GetBuilder manual management

Let’s start with a simple example of creating the Controller and View classes. The Controller calls update() to refresh the UI in the View layer.

class Controller extends GetxController {
  int counter = 0;
  void increment() {
    counter++;
    update(); // When increments are called, update() is used to update counter variables on the user interface.
  }
}

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

How do views and Controllers establish their relationship

Analysis of theGetxControllerThe source of

1. GetxController implements the Listenable listener protocol
2. AddListener is recorded in a List object called updater
3. Call Update () -> refresh() to iterate over all listeners and call.

 class GetxController extends DisposableInterface with ListNotifier {
     void update([List<String> ids, bool condition = true]) {
     // Remove useless code. refresh(); . }}class ListNotifier implements Listenable {
     List<GetStateUpdate> _updaters = <GetStateUpdate>[];

     @protected
     void refresh() {
     for (var element in_updaters) { element(); }}@override
     Disposer addListener(GetStateUpdate listener) {
     _updaters.add(listener);
     return() => _updaters.remove(listener); }}Copy the code

1. GetBuilder is a state class that establishes a relationship with Controller and adds the current View as listener to initState().
2. The Controller maintains a list of updaters for each listener and updates all views with updates ().

GetX responsive automatic management

We also need to declare the Controller and View classes, the most intuitive feeling is that there is no manual update() in the Controller, great!!

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

GetX<Controller>(
  builder: (controller) {
    print("count 1 rebuild");
    return Text('${controller.count1.value}'); },),Copy the code

Analyze GetX source code

1. GetX is a StatefulWidget

   class GetX<T extends DisposableInterface> extends StatefulWidget {
     final GetXControllerBuilder<T> builder;
   
     const GetX({
       this.builder,
     });
   
     @override
     GetXState<T> createState() => GetXState<T>();
   }
   Copy the code

2. When the GetState class initializes, it creates a _observer = RxNotifier(). RxNotifier() contains a Stream

   1. InitState () _observer starts adding a listener to refresh the View

      class GetXState<T extends DisposableInterface> extends State<GetX<T>> {
        GetXState() {
        _observer = RxNotifier();
        }
        RxInterface _observer;
        StreamSubscription subs;
      
        @override
        void initState() {
        / / for the controller
        // ... 
        subs = _observer.listen((data) => setState(() {}));
        super.initState(); }}Copy the code

   2. Build () is interesting here. RxInterface. Proxy (controller) {obs. Value (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;
      
      Copy the code

   3. The execution Builder (Controller) contains properties that call obs.value. Start subscribing to changes in the current property and automatically trigger setState() when they happen. This is the core of GetX;

      mixin RxObjectMixin<T> on NotifyManager<T> {
        // controller.count.value
        T get value {
          if(RxInterface.proxy ! =null) {
            RxInterface.proxy.addListener(subject);
          }
          return_value; }}mixin NotifyManager<T> {
        GetStream<T> subject = GetStream<T>();
        final _subscriptions = <StreamSubscription>[];
      
        void addListener(GetStream<T> rxGetx) {
          if (_subscriptions.contains(rxGetx.listen)) {
            return;
          }
      
          finalsubs = rxGetx.listen((data) { subject.add(data); }); _subscriptions.add(subs); }}Copy the code

GetBuilder vs GetX