FlutterScoped_Model浅析

在前端开发中&＃xff0c;我们经常能听到 redux 等状态管理的词汇。

但是对于我这种搞移动端出身的人&＃xff0c;对这些词汇就不是很熟悉。

Flutter 作为借鉴了很多 React 思想的语言&＃xff0c;自然也会有相对应的状态管理。

那什么是状态管理&＃xff1f;为什么需要状态管理&＃xff1f;

什么是状态管理&＃xff1f;

个人认为 状态管理解决的是组件之间的通讯以及状态集中管理和分发的问题

举个例子&＃xff1a;

比如我多个页面同时使用了 User 对象&＃xff0c;当我其中一个地方改了以后&＃xff0c;想要其他的地方也都要更改&＃xff0c;那这个时候就需要状态管理来集中管理数据。

为什么需要状态管理&＃xff1f;

前面已经说过一点&＃xff0c;另一点&＃xff1a;

我们已经使用过 StatefulWidget&＃xff0c;也知道它维护了一个 State&＃xff0c;也就是当前 Widget的状态。

当我们需要改变 Widget 的状态的时候&＃xff0c;就需要 setState()&＃xff0c;这样就会重新走一遍 build 方法来重绘。

当页面简单的时候还好说&＃xff0c;如果页面复杂了&＃xff0c;我们每次点击、或者滑动都要来进行整个页面的 build 吗&＃xff1f;

很明显&＃xff0c;这样不符合常理。

相信很多人已经听过 provide redux... 等等状态管理的方案&＃xff0c;

那么 Scoped_Model 是什么&＃xff1f;

Scoped_Model

先看一下Scoped_Model GitHub 文档上的内容&＃xff1a;

A set of utilities that allow you to easily pass a data Model from a parent Widget down to it&＃39;s descendants. In addition, it also rebuilds all of the children that use the model when the model is updated. This library was originally extracted from the Fuchsia codebase.

一组实用程序&＃xff0c;允许您轻松地将数据模型从父窗口小部件传递给它的后代。此外&＃xff0c;它还重建了模型更新时使用模型的所有子代。这个库最初是从 Fuchsia 基代码中提取的。

和其他的状态管理一样&＃xff0c;它也是使用的 InheritedWidget&＃xff0c; 利用 InheritedWidget 来管理使用了该数据的Widget。

这样就可以在数据改变的时候更新该 Widget 了。

简单使用 Scoped_Model

来看一下官方给出的Demo&＃xff1a;

import &＃39;package:flutter/material.dart&＃39;;
import &＃39;package:scoped_model/scoped_model.dart&＃39;;
void main() { runApp(MyApp( model: CounterModel(), ));
}
class MyApp extends StatelessWidget { final CounterModel model; const MyApp({Key key, &＃64;required this.model}) : super(key: key); &＃64;override Widget build(BuildContext context) { // At the top level of our app, we&＃39;ll, create a ScopedModel Widget. This // will provide the CounterModel to all children in the app that request it // using a ScopedModelDescendant. return ScopedModel( model: model, child: MaterialApp( title: &＃39;Scoped Model Demo&＃39;, home: CounterHome(&＃39;Scoped Model Demo&＃39;), ), ); }
}
// Start by creating a class that has a counter and a method to increment it.
//
// Note: It must extend from Model.
class CounterModel extends Model { int _counter &＃61; 0; int get counter &＃61;> _counter; void increment() { // First, increment the counter _counter&＃43;&＃43;; // Then notify all the listeners. notifyListeners(); }
}
class CounterHome extends StatelessWidget { final String title; CounterHome(this.title); &＃64;override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(&＃39;You have pushed the button this many times:&＃39;), // Create a ScopedModelDescendant. This widget will get the // CounterModel from the nearest parent ScopedModel. // It will hand that CounterModel to our builder method, and // rebuild any time the CounterModel changes (i.e. after we // &＃96;notifyListeners&＃96; in the Model). ScopedModelDescendant( builder: (context, child, model) { return Text( model.counter.toString(), style: Theme.of(context).textTheme.display1, ); }, ), ], ), ), // Use the ScopedModelDescendant again in order to use the increment // method from the CounterModel floatingActionButton: ScopedModelDescendant( builder: (context, child, model) { return FloatingActionButton( onPressed: model.increment, tooltip: &＃39;Increment&＃39;, child: Icon(Icons.add), ); }, ), ); }
}

代码有点长&＃xff0c;但是没关系&＃xff0c;大部分都是注释&＃xff0c;不管那么多&＃xff0c;

我们直接copy代码到项目中&＃xff0c;运行看一下效果&＃xff1a;

效果非常简单&＃xff0c;和我们刚开始学Flutter一样的例子。

下面就解释一下代码&＃xff0c;

可以看到&＃xff0c;首先是把 ScopedModel 放在了APP 最顶部来初始化&＃xff1a;

class MyApp extends StatelessWidget { final CounterModel model; const MyApp({Key key, &＃64;required this.model}) : super(key: key); &＃64;override Widget build(BuildContext context) { // At the top level of our app, we&＃39;ll, create a ScopedModel Widget. This // will provide the CounterModel to all children in the app that request it // using a ScopedModelDescendant. return ScopedModel( model: model, child: MaterialApp( title: &＃39;Scoped Model Demo&＃39;, home: CounterHome(&＃39;Scoped Model Demo&＃39;), ), ); }
}

随后定义了一个 CounterModel&＃xff1a;

// Start by creating a class that has a counter and a method to increment it.
//
// Note: It must extend from Model.
class CounterModel extends Model { int _counter &＃61; 0; int get counter &＃61;> _counter; void increment() { // First, increment the counter _counter&＃43;&＃43;; // Then notify all the listeners. notifyListeners(); }
}

注释上面写的很清楚&＃xff0c;必须继承自 Model。

为什么&＃xff1f;我们看Model源码&＃xff1a;

abstract class Model extends Listenable { final Set _listeners &＃61; Set(); int _version &＃61; 0; int _microtaskVersion &＃61; 0; /// [listener] 将在Model更改时调用。 &＃64;override void addListener(VoidCallback listener) { _listeners.add(listener); } /// [listener] 移除时调用。 &＃64;override void removeListener(VoidCallback listener) { _listeners.remove(listener); } /// Returns the number of listeners listening to this model. int get listenerCount &＃61;> _listeners.length; /// 仅当Model已更改时由[model]调用。 &＃64;protected void notifyListeners() { // 我们安排一个微任务来消除可能同时发生的多个更改。 if (_microtaskVersion &＃61;&＃61; _version) { _microtaskVersion&＃43;&＃43;; scheduleMicrotask(() { _version&＃43;&＃43;; _microtaskVersion &＃61; _version; // Convert the Set to a List before executing each listener. This // prevents errors that can arise if a listener removes itself during // invocation! _listeners.toList().forEach((VoidCallback listener) &＃61;> listener()); }); } }
}

可以看到&＃xff0c;Model 继承了 Listenable&＃xff0c;所以我们在自己定义 Model 的时候才可以调用 notifyListeners()方法。

最后在需要该 Model的地方使用 ScopedModelDescendant 来获取。

ScopedModelDescendant( builder: (context, child, model) { return Text( model.counter.toString(), style: Theme.of(context).textTheme.display1, ); },
),

有人可能觉得这种方式不是很优雅&＃xff0c;代码太多。

官方也提供了另一种方法&＃xff1a; ScopedModel.of<CounterModel>(context)。

状态的集中管理以及 Widget更新

官方示例只是提供一个简单的例子&＃xff0c;并不能展现出它的威力&＃xff0c;

所以我们自己写一个示例。

该示例在多个页面同时使用同一个数据&＃xff0c;然后在其中一个页面更新数据。

这样就达到了我们所谓状态的集中管理。

效果如下&＃xff1a;

主要代码如下&＃xff1a;

// 点击事件
&＃64;override
Widget build(BuildContext context) { return FloatingActionButton( onPressed: ScopedModel.of(context).increment, tooltip: &＃39;Increment&＃39;, child: const Icon(Icons.add), );
}
// 接收事件
class CounterLabel extends StatelessWidget { const CounterLabel({Key key}) : super(key: key); &＃64;override Widget build(BuildContext context) { print("third counter label build"); final counter &＃61; ScopedModel.of(context, rebuildOnChange: true); return Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: [ const Text( &＃39;You have pushed the button this many times:&＃39;, ), Text( &＃39;${counter.count}&＃39;, style: Theme.of(context).textTheme.display1, ), ], ); }
}

可以看到我们的 Widget 都是无状态的&＃xff0c;也就是说我们确实达到了数据更新就更新UI的要求。

那么我们再打印log 看一下&＃xff0c;是否只是更新了 使用该 Model 的 Widget。

还是整个Page 都 build 了。

我们在 Page 的 build方法中打印&＃xff1a;

class MyHomePage extends StatelessWidget { const MyHomePage({Key key}) : super(key: key); &＃64;override Widget build(BuildContext context) { print("home page build"); }
}
........ // 第二第三页同理
print("second home page build");
print("third counter label build");

然后在 CounterLabel 中 打印

class CounterLabel extends StatelessWidget { const CounterLabel({Key key}) : super(key: key); &＃64;override Widget build(BuildContext context) { print("home counter label build"); }
}
........ // 第二第三页同理
print("second counter label build");
print("third counter label build");

运行效果如下&＃xff1a;

可以看到&＃xff0c;确实只更新了使用该 Model 的 Widget。

总结

在Flutter 中状态管理有很多&＃xff0c;redux、fish_redux 等等等等。

而Scoped_Model 是我用过最简单&＃xff0c;最舒服的一种。

因为我是搞移动开发的&＃xff0c;所以我会选择 Scoped_Model。

下一篇简单讲讲 Scoped_Model 的原理。

完整代码已经传至GitHub&＃xff1a;https://github.com/wanglu1209/WFlutterDemo