Flutter状态管理(1)——InheritedWidget
- 2019 年 10 月 4 日
- 笔记
状态管理
Flutter的状态管理分为两种：局部状态和全局状态。
局部状态：根据官方的含义，就是一个StatefulWidget可以搞定的，比如BottomNavigationBar、PageView等等，其他Widget不需要知道你的状态，你也不需要依赖其他Widget的状态；setState可以实现状态的切换； 全局状态：整个app很多页面都需要用到的状态，比如是否登录了，用户名、用户id等；这个的实现有很多方式，可以参考List of state management approaches
局部状态和全局状态的划分可以参考下图：
Flutter状态管理系列主要指的是全局状态的管理，主要介绍的几种实现方式有：
- InheritedWidget
- StreamBuilder
- Provider
前两种，框架自带；第三种是google推荐使用的三方库。 本文将首先介绍InheritedWidget的实现方式。
InheritedWidget实现全局状态的管理
在Flutter数据传输中，介绍了数据从上向下的传输方式，其中介绍了InheritedWidget的使用，当时的例子是在一个page里面，数据从上向下传输，不熟悉的朋友可以先去看下那篇文章。
这里，将使用InheritedWidget作为全局状态的管理者，那么将InheritedWidget作为根Widget可以实现下面的Widget都可以获取到该Widget持有的状态。
下面的例子，涉及两个页面，第一个页面展示是否登录信息，第二个页面根据是否登录了来走是登录、还是退出的逻辑。
实现
Step1：状态类的定义
class LoginState { bool isLogin = false; @override bool operator ==(other) { return isLogin == (other as LoginState).isLogin; } }
这边比较简单，定义了一个LoginState，isLogin表示是否登录的状态。
重写了==，isLogin状态不变，可以认为LoginState没有变化。
Step2：InheritedWidget的定义
class LoginStateWidget extends InheritedWidget { const LoginStateWidget({Key key, this.loginState, Widget child}) : super(key: key, child: child); static LoginStateWidget of(BuildContext context) { return context.inheritFromWidgetOfExactType(LoginStateWidget); } final LoginState loginState; @override bool updateShouldNotify(LoginStateWidget oldWidget) { return oldWidget.loginState == this.loginState; } }
InheritedWidget持有LoginState对象；另外需要提供of静态方法，方法实现是context.inheritedFromWidgetOfExactType；updateShouldNotify方法是用来判断当该Widget变化时，这里面如果LoginState变化了，即isLogin参数变化了，才会去通知那些依赖该Widget的Widget变化。
Step3：根Widget使用
void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return LoginStateWidget( child: MaterialApp( home: Scaffold( appBar: AppBar( title: Text('状态管理'), ), body: MainPage(), ), ), loginState: LoginState(), ); } }
可以看到，在MaterialApp外面套了一层LoginStateWidget，并且传入了一个初始的LoginState。
Step4：子Widget获取状态
获取的方式是：
LoginStateWidget loginStateWidget=LoginStateWidget.of(context);
拿到了Widget之后，就可以拿到LoginState进行操作了。
主页面的代码如下：
class MainPage extends StatelessWidget { @override Widget build(BuildContext context) { LoginState loginState = LoginStateWidget.of(context).loginState; return Container( child: Center( child: RaisedButton( onPressed: () { Navigator.of(context).push(MaterialPageRoute(builder: (context) { return LoginPage(); })); }, child: Text(loginState.isLogin ? '已登录' : '未登录'), ), ), ); } }
这里Text会根据登录状态实行文字切换，但是依然声明的是一个StatelessWidget。
LoginPage的代码如下，和MainPage差距不大：
class LoginPage extends StatelessWidget { @override Widget build(BuildContext context) { LoginState loginState = LoginStateWidget.of(context).loginState; return Scaffold( appBar: AppBar( title: Text('登录页面'), ), body: Container( child: Center( child: RaisedButton( onPressed: () { loginState.isLogin = !loginState.isLogin; Navigator.of(context).pop(); }, child: Text(loginState.isLogin ? '退出登录' : '登录'), ), ), ), ); } }
运行效果
InheritedWidget的问题
这里我们只有一个状态，试想，如果有多个全局状态，那么应该怎么实现？
- 一个InheritedWidget，多个表示状态的类；需要考虑InheritedWidget的updateShouldNotify方法需要如何实现，每个状态稍有不同就去通知，那么全局那么多Widget都会收到消息，而更多的Widget只是关注某一状态，是否会造成性能损失？
- 多个InheritedWidget，每个InheritedWidget管理一个状态类，这个时候需要嵌套InheritedWidget，如果每个状态之间还有依赖的话，还需要考虑InheritedWidget的嵌套顺序
上面两种方案，是我目前能想到的两种方案，可以看到，都有各种各样的问题。
原理
关于InheritedWidget的实现原理，可以参考从 Flutter 源码看 InheritedWidget 内部实现原理
总结
可以发现InheritedWidget的使用，可以看做是在全局创建InheritedWidget及其管理的状态，然后所有的子Widget都可以获取到该对象及其状态，然后每个可以获取的Widget即是Producer又是Consumer，一切操作就是操作对象一样更改状态，剩下的系统会帮你做掉。
参考
- Differentiate between ephemeral state and app state
- List of state management approaches
- 从 Flutter 源码看 InheritedWidget 内部实现原理
