目錄

前言

一、什么是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