Flutter中 Provider 的基础用法超详细讲解(二)之ChangeNotifierProvider
目录
前言
一、什么是ChangeNotifierProvider?
二、ChangeNotifier的简单用法
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