Comparative analysis of Flutter GetX---RxList, Rx([]), .obs

Comparative analysis of three methods

We declare a class ListController 继承自GetxController ，用于属性创建以及状态通知的方法，首先我们用三种方式来创建属性并且通过convertToUpperCase 方法进行对值的改变，然后我们通过调用update() `method to update data, and finally we use the value of the property state, and then we look at the comparison of the three usage methods.

• The first kind of Rx([])
• The second RxList
• The third type.obs

  import 'dart:convert';
  import 'package:get/get.dart';
  
  class ListController extends GetxController {
    // 第一种
    final listOne = Rx<List<Map>>([
      {
        "name": "kwok",
        "age": 18
      }
    ]);
  
    // 第二种
    final listTwo = RxList([
      {
        "name": "kwok",
        "age": 18
      }
    ]);
  
    // 第三种
    final listThree = [{
      "name": "kwok",
      "age": 18
    }].obs;
  
    void convertToUpperCase() {
      listOne.value[0]["name"] = listOne.value.first["name"].toUpperCase();
      listTwo.toList().first["name"] = listTwo.toList().first["name"].toString().toUpperCase();
      listThree.toList().first["name"] = listTwo.toList().first["name"].toString().toUpperCase();
      update();
    }
  }

  We get the value of the state update in the page

  import 'package:flutter/material.dart';
  import 'package:flutter_getx_dvanced_example/ListController.dart';
  import 'package:get/get.dart';
  
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
  
    ListController listController = Get.put(ListController());
  
    @override
    Widget build(BuildContext context) {
      return GetMaterialApp(
        title: "GetX",
        home: Scaffold(
          appBar: AppBar(
            title: Text("GetX"),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                GetBuilder<ListController>(
                  init: listController,
                  builder: (controller) {
                    return Text(
                      "我的名字是 ${controller.listOne.value.first['name']}",
                      style: TextStyle(color: Colors.orange, fontSize: 30),
                    );
                  },
                ),
                SizedBox(height: 20,),
                GetBuilder<ListController>(
                  init: listController,
                  builder: (controller) {
                    return Text(
                      "我的名字是 ${controller.listTwo.first['name']}",
                      style: TextStyle(color: Colors.green, fontSize: 30),
                    );
                  },
                ),
                SizedBox(height: 20,),
                GetBuilder<ListController>(
                  init: listController,
                  builder: (controller) {
                    return Text(
                      "我的名字是 ${controller.listThree.first['name']}",
                      style: TextStyle(color: Colors.green, fontSize: 30),
                    );
                  },
                ),
                SizedBox(height: 20,),
                ElevatedButton(
                  onPressed: () {
                    listController.convertToUpperCase();
                  },
                  child: Text("转换为大写"))
              ],
            ),
          ),
        ),
      );
    }
  }

  Rx([]) source code analysis

  Rx<T> inherits from _RxImpl<T>, _RxImpl<T>inherits from RxNotifier<T>, and mixes in  RxObjectMixin<T> classes

  RxImpl<T>Its main role is to manage all the logic of generics.

  RxObjectMixin<T> Its main function is to manage the global objects registered to GetXand , such as the value ofObxWidgetRx

  Rx<T>Its main function is to wrap the custom model class with Rx`,

• RxList source code analysis

  RxList<E>Inherited from ListMixin<E>Implemented RxInterface<List<E>>and mixed inNotifyManager<List<E>>, RxObjectMixin<List<E>>

  RxList<E>Its main function is to create a List<T> list similar to

• .obs source code analysis

  When we are calling, .obsthe internal implementation source code is actually RxList<e>(this)packaged by a layer. The main purpose of this design is to facilitate developers to use

• Summarize

  We have made a summary of Rx<T>([]), RxList<E>, .obsand it is recommended to use them in our usual development process .obs, because this is the easiest way.