原文链接https://siques.cn/p/41
这个章节我们会先介绍一下 Flutter 的 StatelessWidget ,还有 StatefulWidget
然后会用一个非常简单的例子来理解一下 Flutter 应用的状态管理 .. 状态就是小部件里的数据 .. 小部件可以自己管理需要的数据 .. 这些数据也可以通过小部件的构造函数从它的父辈那里传递过来 ..
我们还会学一下，使用 InheritedWidget ... 还有 ScopedModel，更有效的去把数据传递给需要的小部件 ...
小部件
StatelessWidget：无变化状态的小部件
StatelessWidget，这种小部件里面不包含可以变化的状态，State 指的就是状态，状态可以想成是小部件里的数据 .. 也就是 StatelessWidget 小部件一但被创建以后 .. 它里面的状态一般不会有什么变化 ..
下面再把 count 的值输出到控制台上检查一下 .. 打开调试控制台 ..
按一下界面上的这个漂浮按钮 .. 你会发现，每次按这个按钮的时候，count 的值都会加上 1 ... 不过在界面上这个 Chip 里面显示的 count 的值没有发生改变 ..
我们创建的小部件的状态会根据用户行为发生变化 ... 这个时候我们需要考虑使用另一种小部件，StatefulWidget ..
StatefulWidget：带变化状态的小部件
StatefulWidget，这种类型的小部件里面可以有一些能够变化的状态 .. 也就是 StaefulWidget 构建的用户界面可以动态的发生变化 .. 比如在我们这个例子里面 .. 点了这个漂浮按钮，界面上显示的这个数字要动态的发生变化 .. 这种情况我们就可以使用一个 StaefulWidget ..
下面可以把我们这个小部件改造成一个 StatefulWidget .. 让它继承一下 StatefulWidget .. 要注意的是 StaefulWidget 小部件本身也是 immutable ，不可改变的 ..
小部件需要的可以变化的那些状态要单独放在一个 State 对象里面 .. 这个 State 对象可以使用小部件里的 createState 这个方法来创建 .
然后到模拟器上再试一下 .. 按一下这个动作按钮 .. count 的值会加上 1，这个变化是在 setState 方法里面完成的，所以每次有变化，小部件都会使用新的状态被重建 .. 重建以后，界面上会显示小部件变化之后的状态 ..
状态管理（由父辈管理状态）
在我们这个 StateManagementDemo 小部件里面 .. 小部件的状态是它自己管理的 .. 它需要的所有的状态都在这个小部件自己这里 .. 有时候这个状态可能在小部件的父辈那里 .. 把 State 从父辈那里传递过来，可以通过小部件的构造函数 ..
使用这个 Counter 的时候，现在需要提供一个 count 属性 .. 这个属性的值可以使用上面定义的这个 _count ...
现在 Counter 小部件里面需要的数据是从它爸爸，也就是 StateManagementDemo 那里传递过来的 ...
从父辈那里传递个回调
下面我们再改造一下这个 Counter 小部件 .. 把这个 Chip 换成一个 ActionChip ，这样可以给它一个 onPressed 属性，设置一下点按这个 Chip 要执行的动作 .. 我想在按它的时候也可以让 _count 的值加上 1 ..
如果在这个 Counter 小部件里面设置它的这个 count ，界面上显示的数字是不会有什么变化的 .. 因为这个数字其实是 StateManagementDemo 里面的 _count 的的值 ..
按一下界面上的这个 ActionChip ... 执行的就是它爸爸传递过来的一个回调 .. 做的事儿就是让小部件的 _count 的值加上 1 ..
再按一下漂浮动作按钮 .... 同样可以增加 _count 的值 ...
状态树
现在，在 Counter 里面需要的数据是通过小部件的构造函数，从 StateManagementDemo 那里直接传递过来的 .. 假设在这两个小部件之间还有一个小部件 .. 比如可能有一个 CounterWrapper .. 在这个 CounterWrapper 里面使用了 Counter ...
这样，这个 Counter 需要的数据要先从 StateManagementDemo 传递给 CounterWrapper .. 然后再由这个 CounterWrapper 传递给 Counter .. 需要一级一级往下传 ..
InheritedWidget
InheritedWidget：直接把数据传递给需要的小部件
在我们这个示例里面，Counter 小部件需要的数据是从 StateManagementDemo 传递给 CounterWrapper，又从 CounterWrapper 传递给了 Counter ... 现在我们需要一种方法，可以把数据直接传递给需要的小部件 .. 也就是 Counter 需要的数据可以不通过 CounterWrapper，而是直接从 StateManagementDemo 那里传递过来 ..
可以试一下 Flutter 的 InheritedWidget .. 用法就是可以去创建一个 InheritedWidget，在这个小部件里面设置其它小部件需要的数据，然后把这个 InheritedWidget 放在小部件树的某个地方，这样在树下面的小部件都可以直接访问到在 InheritedWidget 小部件里的数据了 ..
ScopedModel
ScopedModel：安装与基本用法介绍
ScopedModel 也可以把数据直接交给需要的小部件 .. 它是一个第三方的包，所以要使用它得先去安装一下 .. 打开项目下面的 pubspec.yaml ..
使用 ScopedModel .. 我们得先去创建一个 Model .. 在里面添加需要的数据 .. 然后把 ScopedModel 小部件放到 Widget Tree 的某个位置上 .. 设置一下它的 model .. 这样在它下面的小部件都可以直接访问到它设置的 model 里的东西 ..
使用 ScopedModel 传递数据
先创建一个 Model .. 添加一个类 .. 名字可以是 CounterModel .. 它要继承一下 Model ... 再导入需要的包 .. 就是之前我们安装的这个 scoped_model ..
里添加一个 int _count .. 让它先等于 0 .. 再添加一个 getter 方法， 名字叫 count .. 让它返回 _count 的值 ... 在使用了这个 model 的小部件里面，可以使用这个 getter 方法获取到 _count 的值 ..
按一下界面上的 ActionChip ，会让 CounterModel 的 _count 的值增加 1 ，有变化就会重建这个部件显示出变化之后的样子 ..
同样，按一下漂浮动作按钮，也可以让 CounterModel 里的 _count 的值加上 1 ...
最终代码
import 'package:flutter/material.dart';
import "package:scoped_model/scoped_model.dart";
class StateManagementDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ScopedModel(
model: CounterModel(),
child: Scaffold(
appBar: AppBar(
title: Text('StateManagementDemo'),
elevation: 0.0,
),
body: CouterWrapper(),
floatingActionButton: ScopedModelDescendant(
rebuildOnChange: false,
builder: (context, _, model) => FloatingActionButton(
child: Icon(Icons.add),
onPressed: model.increaseCount,
),
)));
}
}
class CouterWrapper extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Counter(),
);
}
}
class Counter extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ScopedModelDescendant(
builder: (context, _, model) => ActionChip(
label: Text('${model.count}'),
onPressed: model.increaseCount,
));
}
}
class CounterProvider extends InheritedWidget {
final int count;
final VoidCallback increaseCount;
final Widget child;
// 构造函数
CounterProvider({this.count, this.increaseCount, this.child})
: super(child: child);
static CounterProvider of(BuildContext context) =>
context.dependOnInheritedWidgetOfExactType();
@override
bool updateShouldNotify(InheritedWidget oldWidget) {
return true;
}
}
class CounterModel extends Model {
int _count = 0;
int get count => _count;
void increaseCount() {
_count += 1;
notifyListeners();
}
}