> 技术文档 > Flutter中 Provider 的基础用法超详细讲解(二)之ChangeNotifierProvider

Flutter中 Provider 的基础用法超详细讲解(二)之ChangeNotifierProvider

目录

前言

一、什么是ChangeNotifierProvider?

二、ChangeNotifier的简单用法

1.定义状态

2.使用ChangeNotifierProvider提供状态

3.获取状态并监听更新

1.Consumer

2.通过API方式获取

1.Provider.of (context)

2.context.watch ()

3.context.read ()

4.各种获取状态的方法的区别

三、ChangeNotifierProvider高级用法

1.多Provider组合使用

2.使用context.read、watch、select

1.read用于点击事件

2.select精细监听

3.局部重建优化

4.状态共享跨页面

5.手动获取最新状态


前言

上篇文章中,我们大致了解下Provider的优点和缺点,这篇博客主要介绍Provider中的四大核心Provider中的ChangeNotifierProvider。

一、什么是ChangeNotifierProvider?

ChangeNotifierProvider 是 Provider 包中用于提供 ChangeNotifier 类型对象给子 widget 树的组件。

它的核心功能是:将状态对象注入到widget树中,供后续获取与监听更新。

它的两个职责:

持有一个 ChangeNotifier 状态对象

自动管理它的生命周期(创建、释放)

二、ChangeNotifier的简单用法

1.定义状态类

我们首先定义我们的数据模型,这个数据模型继承自ChangeNotifier。

class Counter with ChangeNotifier { int _count = 0; int get count => _count; void increment() { _count++; notifyListeners(); // 通知 UI 更新 }}

2.使用ChangeNotifierProvider提供状态

void main() { runApp( ChangeNotifierProvider( create: (context) => Counter(), child: const MyApp(), ), );}

3.获取状态并监听更新

ChangeNotifierProvider有两种方式获取状态分别是Consumer和API方式获取状态。

1.Consumer

class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Consumer( builder: (context, counter, _) => Column( children: [ Text(\'Count: ${counter.count}\'), ElevatedButton( onPressed: counter.increment, child: Text(\'Increment\'), ), ], ), ); }}

2.通过API方式获取

除了上面的Consumer的方式获取Widget的状态之外,还可以通过下面的API实时获取Widget的状态。

1.Provider.of(context)

我们可以通过Provider.of(context)获取Widget的状态。

import \'package:flutter/material.dart\';import \'package:provider/provider.dart\';import \'consumer.dart\';class ChangeNotifierProviderDemoPage extends StatelessWidget { final String title; const ChangeNotifierProviderDemoPage({super.key, required this.title}); @override Wid