GetX 之状态管理

一、GetBuilder 手动管理

先看看一个简单的例子 建立Controller和View类，Controller里面主动调用update() 去刷新View层里面的UI。

class Controller extends GetxController {
  int counter = 0;
  void increment() {
    counter++;
    update(); // 当调用增量时，使用update()来更新用户界面上的计数器变量。
  }
}

GetBuilder(
  init: Controller(), 
  builder: (_) => Text(
    '${_.counter}',
  ),

1.核心思想

结构图

1.1定义一个继承GetxController的类: 逻辑- Controller 层
1.2定义一个GetBuilder类：界面- *View 层
1.3controlelr 里面调用update() 刷新UI

2.view,controller 的关联

2.1 分析GetBuilder 的源码

2.1.1 它是一个StatefulWidget
2.1.2 initState()寻找定义的Controller. 这里有一些寻找策略，跟2.1.3 我们这没关系忽略掉subscribeToController() Cool找到了! 准备开始建立关系 给Controller通过调用addListner()的方法增加一个监听者, 并绑定一个函数getUpdate
2.1.4 getUpdate 来源于GetStateUpdaterMixin 功能很简单: 当前widget存活就执行setState()

// get-3.22.2/lib/get_state_manager/src/simple/get_state.dart 
class GetBuilder extends StatefulWidget {
  final GetControllerBuilder builder;
  final T init;
  ...

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

}

class _GetBuilderState extends State> with GetStateUpdaterMixin {
  T controller;

  @override
  void initState() {
    // 寻找Controller
    ...
    // 订阅
    _subscribeToController();
  }

  void _subscribeToController() {
    remove?.call();
    remove = (widget.id == null)
        ? controller?.addListener(getUpdate)
        : controller?.addListenerId(widget.id, getUpdate);
  }


}
mixin GetStateUpdaterMixin on State {
  void getUpdate() {
    if (mounted) setState(() {});
  }
}

2.2分析 GetxController 的源码

2.2.1GetxController 实现了Listenable可监听对象的协议
2.2.2.addListener时记录到一个List对象里, 并取名为updater
2.2.3调用update() -> refresh() 迭代所有监听者并调用.

 class GetxController extends DisposableInterface with ListNotifier {
     void update([List ids, bool condition = true]) {
     // 移除无用的代码
     ...
     refresh();
     ...
     }
 }

 class ListNotifier implements Listenable {
     List _updaters = [];

     @protected
     void refresh() {
     for (var element in _updaters) {
         element();
     }
     }

     @override
     Disposer addListener(GetStateUpdate listener) {
     _updaters.add(listener);
     return () => _updaters.remove(listener);
     }

}

2.3.1 GetBuilder是一个状态类，它建立了和Controller的关系并在initState()时增加当前View作为监听者.
2.3.2 Controller里维护了一个updater的列表记录每个监听者，在update()的时候会通知刷新所有View的状态。

3.总结

优点: API足够简单清晰，占用很少内存资源。
不足: 还是需要我们去手动update(),

二、GetX 响应式自动管理

直接上代码：

class Controller extends GetXcontroller {
  final count1 = 0.obs;
  final count2 = 0.obs;
  int get sum => count1.value + count2.value;
}

GetX(
  builder: (controller) {
    print("count 1 rebuild");
    return Text('${controller.count1.value}');
  },
),

1.核心思想

脑补图

1.1 定义一个Controller类: 逻辑 - Controller 层
Controller里包含多个以 .obs 的形式表示的变量，我们把这个变量称作为响应式变量。

1.2 定义一个GetBuilder类：界面 - View 层。

1.3 只要响应式变量发生改变，就会自动通知View刷新界面。

2 分析GetX的源码

2.1GetX 是一个StatefulWidget

class GetX extends StatefulWidget {
  final GetXControllerBuilder builder;

  const GetX({
    this.builder,
  });

  @override
  GetXState createState() => GetXState();
}

2.2GetState类初始化的时候创建一个 _observer = RxNotifier() RxNotifier()里包含一个Stream的流.

2.2.1 initState() _observer 开始增加一个监听者刷新View

class GetXState extends State> {
  GetXState() {
  _observer = RxNotifier();
  }
  RxInterface _observer;
  StreamSubscription subs;

  @override
  void initState() {
  // 寻找controller
  // ... 
  subs = _observer.listen((data) => setState(() {}));
  super.initState();
  }
}

2.2.1 build() 这里很有意思. 把_observer作为RxInterface.proxy 的临时属性，在使用builder的后恢复原有的属性, 需要注意的是builder(controller)函数里一定要包含obs.value, 要不然会提示异常。

Widget get notifyChildren {
  final observer = RxInterface.proxy;
  RxInterface.proxy = _observer;
  final result = widget.builder(controller);
  if (!_observer.canUpdate) {
    throw """
    [Get] the improper use of a GetX has been detected. 
    You should only use GetX or Obx for the specific widget that will be updated.
    If you are seeing this error, you probably did not insert any observable variables into GetX/Obx 
    or insert them outside the scope that GetX considers suitable for an update 
    (example: GetX => HeavyWidget => variableObservable).
    If you need to update a parent widget and a child widget, wrap each one in an Obx/GetX.
    """;
  }
  RxInterface.proxy = observer;
  return result;
}

@override
Widget build(BuildContext context) => notifyChildren;

2.2.3 执行builder(controller) 包含调用obs.value的属性. 开始订阅当前属性的变化, 当发生改变事就自动触发setState() 这是GetX的核心的地方;

mixin RxObjectMixin on NotifyManager {
  // controller.count.value
  T get value {
    if (RxInterface.proxy != null) {
      RxInterface.proxy.addListener(subject);
    }
    return _value;
  }
}

mixin NotifyManager {
  GetStream subject = GetStream();
  final _subscriptions = [];

  void addListener(GetStream rxGetx) {
    if (_subscriptions.contains(rxGetx.listen)) {
      return;
    }

    final subs = rxGetx.listen((data) {
      subject.add(data);
    });
    _subscriptions.add(subs);
  }

}

3 总结

GetX 初始化的时候会创建一个Stream,它来监听当前View的变化，当UI中响加载 obs.value 时，就会把 View刷新 挂载到这个obs属性上。 只要属性变化就会通知View刷新页面。