Flutter GetX---RxList、Rx([])、.obs对比分析

三种方式对比分析

我们声明了一个类ListController继承自GetxController，用于属性创建以及状态通知的方法，首先我们用三种方式来创建属性并且通过convertToUpperCase方法进行对值的改变，然后我们通过调用update()`方法来进行数据更新，最后我们使用该属性状态的值，接下来我们看一下三种使用方式的对比。

• 第一种Rx([])
• 第二种RxList
• 第三种 .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();
    }
  }

  我们在页面中获取状态更新的值

  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([])源码分析

  Rx<T> 继承自_RxImpl<T>，_RxImpl<T>又继承RxNotifier<T>并混合 RxObjectMixin<T> 类

  RxImpl<T>它主要的作用是管理泛型的所有逻辑的。

  RxObjectMixin<T> 它主要的作用是管理注册到GetX和Obx的全局对象，比如Widget的Rx值

  Rx<T>它主要的作用是将自定义模型类用Rx`来进行包装，

• RxList源码分析

  RxList<E>继承自ListMixin<E>实现了RxInterface<List<E>>并混合了NotifyManager<List<E>>, RxObjectMixin<List<E>>

  RxList<E>它的主要作用是创建一个类似于List<T> 的一个列表

• .obs源码分析

  当我们在调用.obs的时候其实内部的实现源码还是通过RxList<e>(this)进行了一层包装，设计这个主要的目的就是为了方便开发者进行使用

• 总结

  我们对Rx<T>([])、RxList<E>、.obs进行了一个总结，在我们平时的开发过程中建议使用.obs即可，因为这是最简单的方式。