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 {@overrideWidget build(BuildContext context) {return Consumer<Counter>(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<T>(context)
我们可以通过Provider.of<T>(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});@overrideWid