Flutter状态管理新的实践

class SecondPage extends StatelessWidget {
  final _model = SecondPageModel();

  @override
  Widget build(BuildContext context) => ChangeNotifierProvider(
        create: (_) => _model,
        child: Scaffold(
          body: Container(
            alignment: Alignment.center,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Consumer(
                  builder: (context, model, child) => Text(model.textA),
                ),
                Selector(
                  builder: (context, model, child) => Text(model),
                  selector: (context, secondPageModel) => secondPageModel.textB,
                ),
                Consumer(
                  builder: (context, model, child) => TextButton(
                    onPressed: () => model.textA = "你好",
                    child: Text("按钮"),
                  ),
                ),
              ],
            ),
          ),
        ),
      );
}

复制

class SecondPageModel with ChangeNotifier {
  String _textA = "hello";
  String _textB = "world";

  String get textA => _textA;

  set textA(String value) {
    _textA = value;
    notifyListeners();
  }

  String get textB => _textB;

  set textB(String value) {
    _textB = value;
    notifyListeners();
  }
}

复制

class FirstPage extends StatelessWidget {
  final _model = FirstPageModel();

  @override
  Widget build(BuildContext context) => Scaffold(
        body: Container(
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TosObWidget(() => Text(_model.textA.value)),
              TosObWidget(() => Text(_model.textB.value)),
              TextButton(
                onPressed: () => _model.textA.value = "你好",
                child: Text("按钮"),
              ),
            ],
          ),
        ),
      );
}

复制

class FirstPageModel {
  final textA = "hello".tos;
  final textB = "world".tos;
}

复制

typedef WidgetCallback = Widget Function();

//TosObWidget的实现
class TosObWidget extends _ObzWidget {
  final WidgetCallback builder;

  const TosObWidget(this.builder, {Key key}) : super(key: key);

  @override
  Widget build() => builder();
}

//TosObWidget的父类，TosObWidget的build函数为重载的其父类_ObzWidget的build函数，
//最终会被_ObzWidget的_ObzState调用
abstract class _ObzWidget extends StatefulWidget {
  const _ObzWidget({Key key}) : super(key: key);

  //创建状态
  @override
  _ObzState createState() => _ObzState();

  //创建widget
  @protected
  Widget build();
}

//state的实现，主要逻辑都在这个类进行实现
class _ObzState extends State<_ObzWidget> {
  RxObserver _observer;

  ///构造函数
  _ObzState() {
    _observer = RxObserver();
  }

  ///初始化
  @override
  void initState() {
    _observer.observe(_updateUI);
    super.initState();
  }

  ///刷新UI
  void _updateUI() {
    if (mounted) {
      setState(() {});
    }
  }

  ///页面销毁
  @override
  void dispose() {
    _observer?.close();
    super.dispose();
  }

  ///创建widget，在这里进行状态观察的绑定
  Widget get buildWidgets {
    //获取proxy原来的值，也就是null
    final observer = RxObserver.proxy;

    //把widget的观察者赋值过去
    RxObserver.proxy = _observer;

    //在widget.build()的时机进行绑定
    final widgets = widget.build();

    //绑定后恢复proxy的值，避免其他widget引用出现错误
    RxObserver.proxy = observer;

    return widgets;
  }

  @override
  Widget build(BuildContext context) => buildWidgets;
}

复制

///RxObj类，所有数据类型可通过.obz扩展属性获得此示例
///当value发生变化时，通知RxObserver更新UI
class RxObj {
  T _value;

  bool _firstRebuild = true;

  final List _observers = [];

  RxObj(this._value);

  ///构造函数重载，如果没有初始值的时候使用
  RxObj.obj();

  T get value {
    if (RxObserver.proxy != null && !_observers.contains(RxObserver.proxy)) {
      _observers.add(RxObserver.proxy);
    }
    return _value;
  }

  set value(T val) {
    if (_value == val && _firstRebuild) {
      return;
    }

    _firstRebuild = false;
    _value = val;

    //数据变化的时候，更新UI
    refresh();
  }

  ///刷新UI，使用引用数据类型的时候，如果没有调用set方法，需要手动refresh()一下
  void refresh() {
    if (_observers.isNotEmpty) {
      for (var observer in _observers) {
        if (observer.canUpdate) {
//observer.update()函数即为执行与Rxobj关联的TosObWidget的_updateUI()函数
          observer.update();
        }
      }
    }
  }
}

复制

/// 通过静态变量proxy，在widget build的时候与状态绑定
/// 定义一个观察者，观察RxObj的数据变化，并通知UI更新
class RxObserver {
  ///观察数据变化方法回调
  VoidCallback update;

  ///判断当前widget是否具备刷新能力（Obz）
  bool get canUpdate => update != null;

  ///TosObWidget dispose的时候执行关闭
  void close() {
    update = null;
  }

  ///注意：这是一个临时变量，最用为使RxObj和TosObWidget建立起订阅关系
  static RxObserver proxy;

  ///观察事件的变化
  observe(VoidCallback update) {
    this.update = update;
  }
}

复制

class FirstPageModel {
  final textA = "hello".tos;
  final textB = "world".tos;
}

复制

///RxObj扩展属性
extension RxT on T {
  ///返回RxObj实例，使用.tos
  RxObj get tos => RxObj(this);
}

复制

final emptyValue = RxObj.obj();

复制

final listValue = ["aaa", "bbb"].tos;

void add(String value) {
  listValue.value.add(value);
  listValue.refresh();
}

复制