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<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});

  @override
  Wid