用户登录

先创建一个 Model .. 添加一个类 .. 名字可以是 CounterModel .. 它要继承一下 Model ... 再导入需要的包 .. 就是之前我们安装的这个 scoped_model ..

里添加一个 int _count .. 让它先等于 0 .. 再添加一个 getter 方法, 名字叫 count .. 让它返回 _count 的值 ... 在使用了这个 model 的小部件里面,可以使用这个 getter 方法获取到 _count 的值 ..

下面再添加一个 increaseCount 方法 .. 它要做的就是让 _count 的值加上 1 ... 要重建小部件还得再执行一下 notifyListeners .. 使用了这个 model 的小部件会监听 model 的变化 .. 用了这个 notifyListeners 方法以后,这些监听的小部件会被重建 ..

ScopedModel

下面我们要先把 ScopedModel 放在 widget tree 的某个地方 .. 比如可以把它放在 StateManagementDemo 这里 .. 用一个 ScopedModel 小部件包装一下 .. 里面除了 child ,我们要再添加一个 model .. 设置一下可用的 model ... 这里就是 CounterModel ... 这样它下面的所有的小部件都可以访问到这里设置的这个 model 里面的东西 ..

现在这个 StateManagementDemo 里的这些 state 我们都可以把它去掉 .. 也就是它不再需要是一个 StatefulWidget,可以是一个 StatelessWidget ... 把它再改造成一个 StatelessWidget ..

ScopedModelDescendnat

小部件里的 FloatingActionButton .. 需要用到 model 里的 increaseCount 方法 .. 这就需要把这个小部件放在一个 ScopedModelDescendnat 小部件里面 .. 设置一下 model 的类型 .. CounterModel ..

这个小部件需要一个 builder 属性 .. 它是一个方法 . 方法里面有 context 参数,一个可选的子部件 .. 还有一个 model 参数 ..

现在这个 FloatingActionButton 的 onPressed 属性的值,可以设置成 model.increaseCount .. 这个方法是我们在 CounterModel 里面添加的 ..

默认这个漂浮动作按钮在 model 有变化的时候会被重建,不过它其实不需要重建 .. 所以我们可以把这个 ScopedModelDescendant 小部件的 rebuildOnChange 的值设置成 false ... 这样即使有变化也不会重建它下面的这个 FloatingActionButton 小部件 ..

再去设置一下 Counter .. 去掉在 build 方法里设置的这些数据 ..

用一个 ScopedModelDescendant 包装一下这个 ActionChip 小部件 .. 类型是 CounterModel .. 小部件里面有个 builder 参数 .. 参数的值是个方法 .. 接收一个 context .. 一个可选的子部件 ... 还有一个 model 参数 ..

现在这个 ActionChip 里的 label 属性要显示的文字,可以换成 model 里的 count ...

它的 onPressed 的值,换成 model 里的 increaseCount ..

重建启动一下 ..

回到模拟器,再试一下 ..

按一下界面上的 ActionChip ,会让 CounterModel 的 _count 的值增加 1 ,有变化就会重建这个部件显示出变化之后的样子 ..

同样,按一下漂浮动作按钮,也可以让 CounterModel 里的 _count 的值加上 1 ...

使用 ScopedModel 传递数据《 Flutter 移动应用:状态管理 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点