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());@overrideWidget 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即可，因为这是最简单的方式。