Flutter-状态管理(scoped_model)

2019-04-03  本文已影响0人  coolzpw

Flutter是一款响应式的UI框架,其中设计灵感很多来源于React.同React一样,它将数据与视图分离,由数据作为驱动去映射渲染视图.so,也将widget分为Stateless widgetsStateful widgets

实现一个有状态的页面如下:

// 1.继承StatefulWidget,并实现其createState()方法,与自己的state绑定.
class HomePage extends StatefulWidget {
@override
_HomePageState createState() {
  return new _HomePageState();
}
}

//2继续State,并实现其build()方法创建自己UI视图,通过调用setState方法去触发视图的渲染更新
class _HomePageState extends State<HomePage>{
  @override
  void initState() {
      super.initState();
}

  @override
Widget build(BuildContext context) {
  return SingleChildScrollView(
    child: Column(
      children: ContentLayout(),
    ),
  )
}
}

实现一个拥有状态的页面至少需要实现其两个类.你可能会意识到,随着功能的增加,页面的累积,会出现越来越多的状态页面,而且还会有多个页面共享同一个状态,导致代码抒写过于冗余和复杂.这时候,基于迫切的需要,状态管理框架应运而生。

scoped_model
用于管理状态的框架.官方文档介绍中写道,它可以轻松将数据模型从父级widget传入它的children,并且当数据模型发生改变时,会自发的更新所有使用她的wigdet.现在来简单讲解下它的用法.

这里有三个主要用到的类:

import 'package:scoped_model/scoped_model.dart';

class CounterModel extends Model {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    // First, increment the counter
    _counter++;

    // Then notify all the listeners.
    notifyListeners();
  }
}
class CounterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new ScopedModel<CounterModel>(
        model: new CounterModel(),
        child: new Column(children: [
          // Create a ScopedModelDescendant. This widget will get the
          // CounterModel from the nearest ScopedModel<CounterModel>.
          // It will hand that model to our builder method, and rebuild
          // any time the CounterModel changes (i.e. after we
          // `notifyListeners` in the Model).
          new ScopedModelDescendant<CounterModel>(
            builder: (context, child, model) => new Text('${model.counter}'),
          ),
          new Text("Another widget that doesn't depend on the CounterModel")
        ])
    );
  }
}

当然还有另一种方法获取到Model:

final countModel = ScopedModel.of<CountModel>(context);

然后这里我也有个比较疑惑的地方,就是当一个widet需要使用多个Model时,参考官方文档讲解(https://pub.dartlang.org/packages/scoped_model):

class CombinedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final username =
      ScopedModel.of<UserModel>(context, rebuildOnChange: true).username;
    final counter =
      ScopedModel.of<CounterModel>(context, rebuildOnChange: true).counter;

    return Text('$username tapped the button $counter times');
  }
}

当是我在看ScopedModel 和ScopedModelDescendant 源码时,类中并有提供接受多个model的构造方法. 然后参考https://juejin.im/post/5b97fa0d5188255c5546dcf8 , 是指Model 使用使用Mixin进行多继承,但这必定带来很多耦合

(如果有说的不当的,也请大佬赐教~共同交流,共同进步!)

上一篇下一篇

猜你喜欢

热点阅读