flutter全局状态管理Provider

状态：即数据；全局状态：即很多页面或组件要共用的数据。

Flutter官方将状态分为：短时 (ephemeral) 状态和应用 (app) 状态。所谓短时 (ephemeral) 状态即widget（组件）自己使用的数据；应用状态即本文所说的全局状态。

无论学习任何框架（vuex、redux）中的状态管理，其的核心还是在于如何存储数据以及如何获取到存储的数据，Provider是Flutter官方推荐的全局状态管理库。

接下来我们通过Provider官方示例来说明如何在应用中使用Provider管理全局数据。

一、全局状态管理类

全局混入的ChangeNotifier，ChangeNotifier 是 Flutter SDK 中的一个简单的类。用于向监听器发送通知。换言之，如果被定义为 ChangeNotifier，你可以订阅它的状态变化。

对于特别简单的程序，可以通过一个 ChangeNotifier 来满足全部需求。在相对复杂的应用中，由于会有多个模型，所以可能会有多个 ChangeNotifier。

全局混入的DiagnosticableTreeMixin，可以帮助在devtools中进行更好地调试。

import 'package:flutter/foundation.dart';/// Mix-in [DiagnosticableTreeMixin] to have access to [debugFillProperties] for thdevtool
// ignore: prefer_mixin
class Counter with ChangeNotifier, DiagnosticableTreeMixin {// 定义数据int _count = 0;// 向外暴露_count的值int get count => _count;// 修改数据void increment() {_count++;notifyListeners(); // 更新UI视图}/// 为了方便调试devtools/// Makes `Counter` readable inside the devtools by listing all of its properties@overridevoid debugFillProperties(DiagnosticPropertiesBuilder properties) {super.debugFillProperties(properties);properties.add(IntProperty('count', count));}
}

唯一一行和 ChangeNotifier 相关的代码就是调用 notifyListeners()。当数据发生改变并且需要更新 UI 的时候可以调用该方法。而剩下的代码就是 Counter 和它本身的业务逻辑。

二、全局注入

ChangeNotifierProvider widget 可以向其子孙节点暴露一个 ChangeNotifier 实例。

/// This is a reimplementation of the default Flutter application using provider + [ChangeNotifier].
void main() {runApp(ChangeNotifierProvider(create: (context) => Counter(),child: const MyApp(),),);
}
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const MaterialApp(home: MyHomePage(),);}
}

如果想提供多个状态，需要使用 MultiProvider：

/// This is a reimplementation of the default Flutter application using provider + [ChangeNotifier].
void main() {runApp(/// Providers are above [MyApp] instead of inside it, so that tests/// can use [MyApp] while mocking the providersMultiProvider(providers: [ChangeNotifierProvider(create: (_) => Counter()),],child: const MyApp(),),);
}
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return const MaterialApp(home: MyHomePage(),);}
}

三、使用全局状态

class MyHomePage extends StatelessWidget {const MyHomePage({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Example'),),body: Center(child: Column(mainAxisSize: MainAxisSize.min,mainAxisAlignment: MainAxisAlignment.center,children: const <Widget>[Text('You have pushed the button this many times:'),/// Extracted as a separate widget for performance optimization./// As a separate widget, it will rebuild independently from [MyHomePage].////// This is totally optional (and rarely needed)./// Similarly, we could also use [Consumer] or [Selector].Count(),],),),floatingActionButton: FloatingActionButton(key: const Key('increment_floatingActionButton'),/// Calls `context.read` instead of `context.watch` so that it does not rebuild/// when [Counter] changes.onPressed: () => context.read<Counter>().increment(),tooltip: 'Increment',child: const Icon(Icons.add),),);}
}class Count extends StatelessWidget {const Count({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Text(/// Calls `context.watch` to make [Count] rebuild when [Counter] changes.'${context.watch<Counter>().count}',key: const Key('counterState'),style: Theme.of(context).textTheme.headline4);}
}

Provider官方相关文档内容：

简单的应用状态管理 | Flutter 中文文档 | Flutter 中文开发者网站

provider | Flutter Package

往期内容：

一、【Flutter开发环境搭建】Java SDK安装

二、【Flutter开发环境搭建】Android SDK、Dart SDK及Flutter SDK安装_

三、Flutter Navigator路由传参