综合技术

Flutter | 状态管理探索篇——Scoped Model(一)

微信扫一扫,分享到朋友圈

Flutter | 状态管理探索篇——Scoped Model(一)
0

Flutter的很多灵感来自于React,它的设计思想是数据与视图分离,由数据 映射 渲染视图。所以在Flutter中,它的Widget是immutable的,而它的动态部分全部放到了状态(State)中。

假如你曾进行过react开发,也许你一下会想到 Redux 。flutter有类似redux的状态管理的库吗?答案是肯定的,但是有关在 flutter中使用redux 的应用实践我们会在之后的文章中进行介绍。

今天要和大家分享的是使用Scoped_model进行状态管理。

什么是Scoped_model

Scoped_model是一个dart第三方库,提供了让您能够轻松地将 数据模型 从父Widget传递到它的后代的功能。此外,它还会在模型 更新时重新渲染 使用该模型的所有子项。

它直接来自于Google正在开发的新系统Fuchsia核心Widgets 中对Model类的简单提取,作为独立使用的独立Flutter插件发布。

实现原理

Scoped model使用了观察者模式,将数据模型放在父代,后代通过找到父代的model进行数据渲染,最后数据改变时将数据传回,父代再 通知所有 用到了该model的子代去更新状态。

而我们则需要将它们放在顶层入口MaterialApp之上,这样就能进行全局的状态管理了。


这里page3,page4代表使用到该状态(model)的子页面。

Lets do it!

这里我们以一个最简单的CountApp举例,详细介绍Scoped_model的用法。该项目完整代码已放在 github仓库

这是一个在不同页面使用Scoped共享状态信息的app。这两个页面都依赖于一个数字,这个数字会随着我们按下按钮的次数而增加。


第一步:添加依赖

在pubspec中添加scoped_model的依赖。


第二步:创建Model

在Scoped中,Model是一个只包含与状态相关信息的单位。我们应该把状态数据与操作数据的方法抽象出来封装到Model中。

import 'package:scoped_model/scoped_model.dart';

class CountModel extends Model{
  int _count = 0;
  get count => _count;
  
  void increment(){
    _count++;
    notifyListeners();
  }
}
复制代码
  • 我们需要让我们自定义的CountModel 继承至Model。
  • 在状态发生变化时(increment)通知所有用到了该model的子项更新状态。( notifyListeners )

第三步:将Model放入顶层

//创建顶层状态
  CountModel countModel = CountModel();

  @override
  Widget build(BuildContext context) {
    return ScopedModel(
      model: countModel,
      child: new MaterialApp(
        home: TopScreen(),
      ),
    );
  }
复制代码
  • 我们在顶层创建了一个CountModel的实例。
  • ScopedModel是一个StatelessWidget,它接收一个model,并提供给需要它的所有部件。
  • 将ScopedModel的model属性绑定我们的CountModel对象。

第四步:在子页面中获取Model

Scoped_model提供了两种方式在子页面中获取model。我们先来介绍第一种,使用 ScopedModelDescendant 获取model。

@override
  Widget build(BuildContext context) {
    return ScopedModelDescendant(
      builder: (context,child,model){
        return Scaffold(
          body: Center(
            child: Text(
              model.count.toString(),
              style: TextStyle(fontSize: 48.0),
            ),
          ),
        );
      },
    );
  }
复制代码
  • ScopedModelDescendant是一个Stateless Widget,它接收三个参数。

  • builder是一个ScopedModelDescendantBuilder,它接收三个参数。

    ,在builder中能够通过model来获取CountModel实例。

  • rebuildOnChange属性能够控制当该状态发生变化时,是否rebuild,作用等同于setState。也就是说我们调用改变状态的一些方法时,不必再setState。
floatingActionButton: new FloatingActionButton(
          onPressed: () => model.increment(),
          tooltip: 'Increment',
          child: new Icon(Icons.add),
        )
复制代码

第二种获取model的方式——使用ScopedModel.of

final countModel = ScopedModel.of(context);
countModel.increment();
复制代码

或者在Model中重写of方法

class CountModel extends Model{
  int _count = 0;
  get count => _count;

  void increment(){
    _count++;
    notifyListeners();
  }
//重写of方法
  CountModel of(context) =>
      ScopedModel.of(context);
}
复制代码

然后直接通过CountModel获取model实例

final countModel2 = CountModel().of(context);
复制代码

这种方式似乎让我们的代码有更好的可阅读性。

Q&A

这里看上去似乎只添加了一个model,我应该如何添加多个model

要解决这个问题很简单, 使用Mixin!

class MainModel extends Model with AModel,BModel,CModel{}
复制代码

然后将MainModel放在顶层即可。 这里有一个比较完整的使用ScopedModel 管理状态的应用 ,详细用法可参考该项目。

Scoped是如何做到同步不同页面中的状态的


Model实现了Listenable接口,并重写了void addListener(VoidCallback listener),removeListener(VoidCallback listener)方法,实现了观察者模式。 每当我们调用notifyListeners()方法时,将会通知观察者更新状态。

Scoped如何做到数据能够互相共享的

在不同页面间的数据传递使用了InheritedWidget。


是否具有侵入性

正在研究当中…

写在最后

在flutter中,Scoped_model是一种非常简单易上手,并能保持代码高可阅读性的一种新的状态管理方式,值得各位去尝试一下!

本次所用到的代码已经上传Github: github.com/Vadaski/Vad…

如果您对scoped还有任何疑问或者文章的建议,欢迎在下方评论区以及我的邮箱1652219550a@gmail.com与我联系,我会及时回复!

下一章我们将探索Redux在Flutter中的实践,敬请关注。

阅读原文...


稀土掘金

中国用户听了想打人!库克表示苹果新机不贵:一个月支付30美元

上一篇

我们到底要不要上云?

下一篇

您也可能喜欢

评论已经被关闭。

插入图片
Flutter | 状态管理探索篇——Scoped Model(一)

长按储存图像,分享给朋友