Flutter狀態管理篇之ChangeNotifier基礎篇（一）

前言

一、什么是ChangeNotifier

二、ChangeNotifier 的基本用法

三、結合Flutter UI 使用

四、結合 Provider 的高級用法

五、ChangeNotifier 的優勢與注意事項

5.1 優勢

5.2 注意事項

六、與 ValueNotifier 的比較

七、實際應用場景

八、總結

前言

????????在 Flutter 開發中，ChangeNotifier 是一個強大的狀態管理工具，位于 package:flutter/foundation.dart 中，廣泛用于實現響應式 UI 更新。它通過提供監聽者管理和通知機制，幫助開發者在狀態變化時通知相關的 UI 組件。

????????本文將詳細介紹ChangeNotifier 的用法，包括其基本概念、實現方式、實際應用場景，以及與 Provider 等工具的結合方式。

一、什么是ChangeNotifier

????????ChangeNotifier 是一個 mixin 類，實現了 Listenable 接口，用于管理狀態并通知注冊的監聽者（VoidCallback 類型）。它允許開發者定義復雜的狀態邏輯，并在狀態變化時通過 notifyListeners 方法觸發 UI 更新。ChangeNotifier 是 Flutter 響應式編程的核心，適合需要管理多字段狀態或自定義通知邏輯的場景。

? ? ? ? ChangeNotifier的核心特征如下：

監聽者管理：通過 addListener 和 removeListener 管理監聽者列表。
通知機制：通過 notifyListeners 通知所有監聽者狀態變化。
銷毀支持：提供 dispose 方法清理資源，防止內存泄漏。
調試友好：內置調試支持（如 debugAssertNotDisposed），幫助發現錯誤。

二、ChangeNotifier 的基本用法

? ? ChangeNotifier通常通過mixin的方式混入自定義類，用于管理狀態。

????????以下是一個簡單的計數器示例，展示其基本用法：

? ? ? ? 圖1.計時器實例

import 'package:flutter/material.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),useMaterial3: true,),home: const MyHomePage(title: 'ChangeNotifier 用法示例'),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {final counter = Counter();void listener() {setState(() {}); // 觸發 UI 更新}@overridevoid initState() {super.initState();counter.addListener(listener);}@overridevoid dispose() {counter.removeListener(listener);counter.dispose(); // 清理 Counter 資源super.dispose();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),backgroundColor: Theme.of(context).colorScheme.primaryContainer,),body: Center(child: Padding(padding: const EdgeInsets.all(16.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('按鈕點擊次數',style: Theme.of(context).textTheme.headlineSmall?.copyWith(fontWeight: FontWeight.bold,color: Theme.of(context).colorScheme.primary,),),const SizedBox(height: 20),Card(elevation: 8,shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12),),color: Theme.of(context).colorScheme.surfaceVariant,child: Padding(padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 60),child: Text('${counter.count}',style: Theme.of(context).textTheme.displayMedium?.copyWith(fontWeight: FontWeight.bold,color: Theme.of(context).colorScheme.onSurfaceVariant,),),),),const SizedBox(height: 30),Row(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton.icon(onPressed: counter.decrement, // 直接調用方法，無需 setStateicon: const Icon(Icons.remove),label: const Text('減少'),style: ElevatedButton.styleFrom(padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),),),const SizedBox(width: 20),ElevatedButton.icon(onPressed: counter.increment, // 直接調用方法，無需 setStateicon: const Icon(Icons.add),label: const Text('增加'),style: ElevatedButton.styleFrom(padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),),),],),],),),),);}
}class Counter with ChangeNotifier {int _count = 0;int get count => _count;void increment() {_count++;notifyListeners();}void decrement() {if (_count > 0) { // 防止計數變為負數_count--;notifyListeners();}}}

說明：
- Counter 類通過 with ChangeNotifier 混入通知功能。
- _count 是私有狀態，count getter 提供外部訪問。
- increment 和 decrement 修改狀態后調用 notifyListeners，觸發監聽者回調。

三、結合Flutter UI 使用

????????在 Flutter 應用中，ChangeNotifier 通常與 UI 組件結合，通過監聽狀態變化自動更新界面。以下是一個完整的計數器應用，展示如何在 Flutter 中使用 ChangeNotifier。

? ? ? ? 下面是一個計時器的例子：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';void main() {runApp(ChangeNotifierProvider(create: (_) => Counter(),child: const MyApp(),),);
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.white),),home: const MyHomePage(title: 'ChangeNotifier用法'),);}
}class MyHomePage extends StatelessWidget {const MyHomePage({super.key, required this.title});final String title;@overrideWidget build(BuildContext context) {final counter = context.watch<Counter>();return Scaffold(appBar: AppBar(title: Text(title),),body: Center(child: Padding(padding: const EdgeInsets.all(16.0),child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text('按鈕點擊次數',style: Theme.of(context).textTheme.titleLarge,),const SizedBox(height: 20),Card(elevation: 8,shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12),),color: Theme.of(context).colorScheme.surfaceVariant,child: Padding(padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 60),child: Text('${counter.count}',style: Theme.of(context).textTheme.displayMedium?.copyWith(color: Theme.of(context).colorScheme.primary,fontWeight: FontWeight.bold,),),),),const SizedBox(height: 30),Row(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton.icon(onPressed: counter.decrement,icon: const Icon(Icons.minimize),label: const Text('減少'),),const SizedBox(width: 20),ElevatedButton.icon(onPressed: counter.increment,icon: const Icon(Icons.add),label: const Text('增加'),),],),],),),),);}
}class Counter with ChangeNotifier {int _count = 0;int get count => _count;void increment() {_count++;notifyListeners();}void decrement() {if (_count > 0) { // 防止計數變為負數_count--;notifyListeners();}}
}

依賴：需要添加 provider 包到 pubspec.yaml：
```
dependencies:provider: ^6.1.5
```
說明：
- 使用 ChangeNotifierProvider 提供 Counter 實例，注入到 widget 樹。
- Consumer 監聽 Counter 的變化，自動重建顯示計數的 Text。
- 點擊“+”或“-”按鈕調用 increment 或 decrement，觸發 notifyListeners，更新 UI。

四、結合 Provider 的高級用法

? ? ChangeNotifier 常與 provider 包結合，用于更復雜的狀態管理。以下是一個管理用戶信息的示例，展示多字段狀態管理。

? ? ? ? 用戶信息管理：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';class UserModel with ChangeNotifier {String _name = 'Anonymous';int _age = 0;String get name => _name;int get age => _age;void updateName(String newName) {_name = newName;notifyListeners();}void updateAge(int newAge) {_age = newAge;notifyListeners();}
}void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'UserModel 示例',theme: ThemeData(primarySwatch: Colors.green, useMaterial3: true),home: ChangeNotifierProvider(create: (_) => UserModel(),child: const UserPage(),),);}
}class UserPage extends StatelessWidget {const UserPage({super.key});@overrideWidget build(BuildContext context) {final userModel = context.read<UserModel>();return Scaffold(appBar: AppBar(title: const Text('用戶信息')),body: Padding(padding: const EdgeInsets.all(16.0),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Consumer<UserModel>(builder: (context, user, child) {return Text('姓名: ${user.name}, 年齡: ${user.age}',style: const TextStyle(fontSize: 20),);},),const SizedBox(height: 20),TextField(decoration: const InputDecoration(labelText: '輸入姓名'),onChanged: (value) => userModel.updateName(value),),const SizedBox(height: 10),Row(children: [ElevatedButton(onPressed: () => userModel.updateAge(userModel.age + 1),child: const Text('年齡 +1'),),const SizedBox(width: 10),ElevatedButton(onPressed: () => userModel.updateAge(userModel.age - 1),child: const Text('年齡 -1'),),],),],),),);}
}

說明：
- UserModel 管理 name 和 age 兩個字段。
- TextField 更新姓名，按鈕更新年齡，每次變化調用 notifyListeners。
- Consumer 監聽 UserModel 的變化，實時更新 UI。

五、ChangeNotifier 的優勢與注意事項

5.1 優勢

靈活性：支持管理復雜狀態（多字段、自定義邏輯）。
響應式：通過 notifyListeners 觸發 UI 更新，與 Provider 等工具無縫集成。
調試支持：內置 debugAssertNotDisposed，防止銷毀后誤用。
可擴展：通過 mixin 方式，易于擴展到自定義類。

5.2 注意事項

手動調用 notifyListeners：開發者需明確在狀態變化時調用 notifyListeners，否則 UI 不會更新。

清理資源：在頁面銷毀時調用 dispose，避免內存泄漏。例如：

class Counter with ChangeNotifier {@overridevoid dispose() {super.dispose(); // 必須調用父類的 dispose}
}

避免遞歸通知：在 notifyListeners 期間移除監聽者或調用 dispose 可能導致錯誤，需小心處理。
性能優化：避免頻繁調用 notifyListeners，必要時檢查狀態是否真正變化。

六、與 ValueNotifier 的比較

? ? ChangeNotifier 和 ValueNotifier 都用于狀態管理，但適用場景不同：

ChangeNotifier：
- 適合復雜狀態管理（多字段、自定義通知邏輯）。
- 需手動調用 notifyListeners。
- 更通用，但實現稍復雜。
ValueNotifier：
- 專注于單一值管理，自動在值變化時通知。
- 更輕量，適合簡單場景（如計數器、開關）。
- 繼承自 ChangeNotifier，API 更簡單。

選擇建議：

如果只需要管理單一值，使用 ValueNotifier（結合 ValueListenableBuilder）。
如果需要管理多個字段或復雜邏輯，使用 ChangeNotifier（結合 Provider）。

七、實際應用場景

表單管理：管理多個輸入字段的狀態（如登錄表單）。
復雜 UI 狀態：如購物車、用戶設置等需要多字段更新的場景。
與 Provider 結合：構建大型應用的全局狀態管理。
動畫控制：結合 ChangeNotifier 實現自定義動畫狀態。

八、總結

? ? ChangeNotifier 是 Flutter 中強大的狀態管理工具，通過監聽者機制實現響應式 UI 更新。它適合管理復雜狀態，結合 Provider 和 Consumer 可以輕松集成到 Flutter 應用中。通過合理使用 notifyListeners 和 dispose，開發者可以構建高效、可維護的狀態管理邏輯。相比 ValueNotifier，ChangeNotifier 提供更大的靈活性，適合需要自定義通知邏輯的場景。希望本文能幫助你快速上手 ChangeNotifier，并在實際項目中靈活運用！