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