前言
在上一篇文章中，我们讨论了如何使用 Provider 在 Flutter 中进行状态管理。
本篇文章我们来讨论如何使用多个 Provider。
在 Flutter 中，使用 Provider 管理多个不同的状态时，你可以为每个状态创建一个单独的 ChangeNotifierProvider，并在需要的地方使用 Provider.of<T>(context) 或 Consumer<T>来访问这些状态。
接下来让我们正式开始使用：
为每个状态创建类
为每个需要管理的状态创建一个类，并确保这些类继承自 ChangeNotifier。
class Counter with ChangeNotifier { int _count = 0; int get count => _count; void increment() { _count++; notifyListeners(); } } class ThemeSwitcher with ChangeNotifier { bool _isDarkTheme = false; bool get isDarkTheme => _isDarkTheme; void toggleTheme() { _isDarkTheme = !_isDarkTheme; notifyListeners(); } }
在应用的根或需要的地方提供状态
使用 ChangeNotifierProvider 来包裹你的应用或特定的 widget，并为每个状态提供一个 create 函数来创建其对应的实例。
import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { Widget build(BuildContext context) { return MultiProvider( providers: [ ChangeNotifierProvider(create: (context) => Counter()), ChangeNotifierProvider(create: (context) => ThemeSwitcher()), ], child: MaterialApp( home: MyHomePage(), ), ); } } 在
widget 中访问状态
使用 Provider.of<T>(context) 或 Consumer<T> 在需要的地方访问状态。
class MyHomePage extends StatelessWidget { Widget build(BuildContext context) { final counter = Provider.of<Counter>(context); final themeSwitcher = Provider.of<ThemeSwitcher>(context); return Scaffold( appBar: AppBar( title: Text('Multiple Providers Example'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '${counter.count}', style: Theme.of(context).textTheme.headline4, ), Switch( value: themeSwitcher.isDarkTheme, onChanged: (value) { themeSwitcher.toggleTheme(); }, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: () { counter.increment(); }, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }
更新状态
在状态类中修改属性，并调用 notifyListeners() 来通知所有监听这个状态的 widget 进行更新。
class Counter with ChangeNotifier { int _count = 0; int get count => _count; void increment() { _count++; notifyListeners(); // 通知所有监听这个状态的widget进行更新 } } class ThemeSwitcher with ChangeNotifier { bool _isDarkTheme = false; bool get isDarkTheme => _isDarkTheme; void toggleTheme() { _isDarkTheme = !_isDarkTheme; notifyListeners(); // 通知所有监听这个状态的widget进行更新 } }
完整示例
下面是一个例子，展示了如何使用 Provider 来管理两个不同的状态:
代码如下（示例）：
import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { Widget build(BuildContext context) { return MultiProvider( providers: [ ChangeNotifierProvider(create: (context) => Counter()), ChangeNotifierProvider(create: (context) => ThemeSwitcher()), ], child: MaterialApp( home: MyHomePage(), ), ); } } class Counter with ChangeNotifier { int _count = 0; int get count => _count; void increment() { _count++; notifyListeners(); } } class ThemeSwitcher with ChangeNotifier { bool _isDarkTheme = false; bool get isDarkTheme => _isDarkTheme; void toggleTheme() { _isDarkTheme = !_isDarkTheme; notifyListeners(); } } class MyHomePage extends StatelessWidget { Widget build(BuildContext context) { final counter = Provider.of<Counter>(context); final themeSwitcher = Provider.of<ThemeSwitcher>(context); return Scaffold( appBar: AppBar( title: Text('Multiple Providers Example'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '${counter.count}', style: Theme.of(context).textTheme.headline4, ), Switch( value: themeSwitcher.isDarkTheme, onChanged: (value) { themeSwitcher.toggleTheme(); }, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: () { counter.increment(); }, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }
运行结果如下
总结
本文主要介绍了在 Flutter 中如何使用多个 Provider 进行状态管理。
类似的状态管理还有 Bloc 和 GetX 的使用，后续会继续分享它们的使用方式，欢迎关注。
