Flutter状态管理（四）scoped_model

简介

scoped_model是一个简单的第三方状态管理框架，它的源码只有一个dart文件，代码量非常少，巧妙的利用了InheritedWidget和AnimatedBuilder的特性，达到了状态管理的目的。
官网地址：https://pub.flutter-io.cn/packages/scoped_model

如何安装

• pubspec.yaml中：

dependencies:
  scoped_model: ^1.0.1

• 运行: flutter pub get
• dart文件中引用：import 'package:scoped_model/scoped_model.dart';

代码示例

还是那个点击按钮+1的示例,改用scoped_model实现：

image.png

import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
class ScopedModelTest extends StatefulWidget {
  @override
  _ScopedModelTestState createState() => _ScopedModelTestState();
}

class _ScopedModelTestState extends State<ScopedModelTest> {
  // 创建model
  CountModel _model = CountModel();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ScopedModel"),
        centerTitle: true,
      ),
      body: Center(
        child: ScopedModel<CountModel>(
          model: _model,
          child: CountWidget(),// 要将使用model中数据的widget成为ScopedModel的子widget
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: (){
          _model.increment();// 出发model的+1方法
        },
      ),
    );
  }
}

// 自定义Model
class CountModel extends Model{
  // 要共享的状态数据
  int _counter = 0;
  int get counter => _counter;
  // +1的方法
  void increment(){
    ++_counter;
    notifyListeners();
  }
}

// 使用了状态数据的Widget
class CountWidget extends StatefulWidget {
  @override
  _CountWidgetState createState() => _CountWidgetState();
}

class _CountWidgetState extends State<CountWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ScopedModelDescendant<CountModel>(
        builder: (context,child,model){
          return Text(model.counter.toString());
        },
      ),
    );
  }
}

解析：

• 自定义CountModel 继承 Model，成员_counter是状态数据；同时定义了方法increment()，方法内部是对状态数据的更改，然后调用notifyListeners()方法，告诉所有依赖此状态数据的widget,此状态数据更新了，内部最终是调用了widget的setState方法进行了页面重新build，渲染了新的状态数据。
• 自定义CountWidget，模拟了一个使用了状态数据的Widget。需要注意使用ScopedModelDescendant<CoutModel>，这是一个StatelessWidget,在内部调用ScopedModel.of<T>(context, rebuildOnChange: rebuildOnChange)获取到泛型CountModel在渲染树中的实例，通过builder传递回来，然后通过model.counter获取到model中定义的状态数据。
• 使用ScopedModel

ScopedModel<CountModel>(
          model: _model,
          child: CountWidget(),// 要将使用model中数据的widget成为ScopedModel的子widget
        ),

接收两个参数：model是前面创建的CountModel,也就是_counter所在的数据，是需要通过floatingActionButton去进行操作的。child是依赖CountModel的Widget。ScopedModel内部最终是将model和child传递给了一个InheritedWidget，利用InheritedWidget的特性将model从渲染树中下传到了CountWidget。

• floatingActionButton中通过_model.increment()更改model中的状态数据，进而出发notifyListeners().

核心原理

• 数据共享：ScopedModel内部是一个InheritedWidget,CountWidget是ScopedModel的child，实际是InheritedWidget的child，model是InheritedWidget中的共享数据，这样通过InheritedWidget的特性，CountWidget就能获取到model，从而显示model的数据。
• 跨Widget更新：Model的本质是一个Listenable，内部有一个Set<VoidCallback> _listeners，是所有使用到该model位置的的Widget的回调，比如这里的ScopedModel。AnimatedBuilder是ScopedModel的一个中间件 ，其本质是一个AnimatedWidget，AnimatedWidget是一个StatefulWidget，在initState内部会去调用model的addListener方法，方法参数是一个内容是setState的方法。model内更改状态数据去notifyListeners时，会调用到该setState,进而触发重新build。

源码分析

注意这里列出的源码都是删减版的，只保留了核心内容

• Model

abstract class Model extends Listenable {
  // 维护了一个回调的set
  final Set<VoidCallback> _listeners = Set<VoidCallback>();
  /// 在AnimatedWidget的initState内调用该方法
  @override
  void addListener(VoidCallback listener) {
    _listeners.add(listener);
  }

  /// CountModel中increment方法内部调用该方法，将所有的回调给执行。
  @protected
  void notifyListeners() {
    _listeners.toList().forEach((VoidCallback listener) => listener());
  }
}

• ScopedModel
  注意深追
  AnimatedBuilder --> AnimatedWidget
  _InheritedModel --> InheritedWidget

class ScopedModel<T extends Model> extends StatelessWidget {
  /// The [Model] to provide to [child] and its descendants.
  final T model;

  /// The [Widget] the [model] will be available to.
  final Widget child;

  ScopedModel({@required this.model, @required this.child})
      : assert(model != null),
        assert(child != null);

  @override
  Widget build(BuildContext context) {
    // 注意深追AnimatedBuilder，--> AnimatedWidget  
    return AnimatedBuilder(
      animation: model,
      builder: (context, _) => _InheritedModel<T>(model: model, child: child),
    );
  }
}

• AnimatedWidget的state中
  这里的listenable就是前面的model
  initState中去addListener，参数方法内是setState

abstract class AnimatedWidget extends StatefulWidget {
  const AnimatedWidget({
    Key key,
    @required this.listenable,
  }) : assert(listenable != null),
       super(key: key);

  final Listenable listenable;

  @override
  _AnimatedState createState() => _AnimatedState();

}

class _AnimatedState extends State<AnimatedWidget> {
  @override
  void initState() {
    super.initState();
    widget.listenable.addListener(_handleChange);
  }
  void _handleChange() {
    setState(() {
      // The listenable's state is our build state, and it changed already.
    });
  }

}

• _InheritedModel
  这是一个InheritedWidget,前面的model和CountWidget最终都是传递到这里来

class _InheritedModel<T extends Model> extends InheritedWidget {
  final T model;
  final int version;

  _InheritedModel({Key key, Widget child, T model})
      : this.model = model,
        this.version = model._version,
        super(key: key, child: child);

  @override
  bool updateShouldNotify(_InheritedModel<T> oldWidget) =>
      (oldWidget.version != version);
}

• ScopedModelDescendant 是为了获取共享的model而做的一层封装，通过ScopedModel.of<T>(context, rebuildOnChange: rebuildOnChange)获取到model，在通过builder传递出去。build的类型是ScopedModelDescendantBuilder

class ScopedModelDescendant<T extends Model> extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return builder(
      context,
      child,
      ScopedModel.of<T>(context, rebuildOnChange: rebuildOnChange),
    );
  }
}

typedef Widget ScopedModelDescendantBuilder<T extends Model>(
  BuildContext context,
  Widget child,
  T model,
);