Flutter是声明式编程的:
Flutter构建应用过程
在编写一个应用的过程中,我们有大量的State需要来进行管理,而正是对这些State的改变,来更新界面的刷新。
状态管理分类
短时状态Ephemeral state
某些状态只需要在自己的Widget中使用,如简单计数器counter、一个PageView组件记录当前的页面、一个BottomNavigationBar中当前被选中的tab,这种状态我们只需要使用StatefulWidget对应的State类自己管理即可,Widget树中的其它部分并不需要访问这个状态。
应用状态App state
开发中也有非常多的状态需要在多个部分进行共享,如用户一个个性化选项、用户的登录状态信息、一个电商应用的购物车,这种状态我们如果在Widget之间传递来、传递去,那么是无穷尽的,并且代码的耦合度会变得非常高,无论是代码编写质量、后期维护、可扩展性都非常差。这个时候我们可以选择全局状态管理的方式,来对状态进行统一的管理和应用。
开发中,没有明确的规则去区分哪些状态是短时状态,哪些状态是应用状态。某些短时状态可能在之后的开发维护中需要升级为应用状态。我们可以简单遵守下面这幅流程图的规则:状态管理选择
共享状态管理
InheritedWidget
InheritedWidget
可以实现跨组件数据的传递。代码示例如下:
class CounterWidget extends InheritedWidget {
CounterWidget({Widget child, this.counter}) : super(child: child);
final int counter;
static CounterWidget of(BuildContext context) {
// 沿着Element树,去找最近的CounterElement 从Element中取出的Widget对象
return context.dependOnInheritedWidgetOfExactType();
}
// 如果返回true:执行依赖当前的InheritedWidget的State中的didChangeDependencies
@override
bool updateShouldNotify(covariant CounterWidget oldWidget) {
return oldWidget.counter != counter;
}
}
定义一个共享数据的InheritedWidget
,需要继承自InheritedWidget
- 这里定义了一个of方法,该方法沿着
Element
树,去找最近的CounterElement
, 然后从Element中取出的Widget
对象 -
updateShouldNotify
方法是对比新旧CounterWidget,是否需要对更新相关依赖的Widget
创建CounterWidget,并且传入数据,在某个Widget中使用共享的数据,并且监听,代码示例如下:
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _counter = 100;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'InheritedWidget Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('InheritedWidget Demo'),
),
body: CounterWidget(
counter: _counter,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [ShowData1(), ShowData2()],
),
),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
setState(() {
_counter++;
});
},
),
),
);
}
}
class ShowData1 extends StatefulWidget {
@override
_ShowData1State createState() => _ShowData1State();
}
class _ShowData1State extends State<ShowData1> {
@override
void didChangeDependencies() {
super.didChangeDependencies();
print('didChangeDependencies执行');
}
@override
Widget build(BuildContext context) {
int counter = CounterWidget.of(context).counter;
return Card(
color: Colors.red,
child: Text('当前计数:$counter', style: TextStyle(fontSize: 30)),
);
}
}
class ShowData2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
int counter = CounterWidget.of(context).counter;
return Container(
color: Colors.blue,
child: Text(
'当前计数:$counter',
style: TextStyle(fontSize: 30),
),
);
}
}
现在很多三方库提供了状态管理。Provider是目前官方推荐的全局状态管理工具,由社区作者Remi Rousselet 和 Flutter Team共同编写。