前言
首先我們知道GetX組件里面obs狀態(tài)管理有三種創(chuàng)建屬性的方式盯另，我們這里以List為例
- Rx<t style="box-sizing: border-box;">([])</t>
- RxList
- .obs
視頻講解
三種方式對比分析
我們聲明了一個類ListController繼承自GetxController性含，用于屬性創(chuàng)建以及狀態(tài)通知的方法，首先我們用三種方式來創(chuàng)建屬性并且通過convertToUpperCase方法進(jìn)行對值的改變鸳惯，然后我們通過調(diào)用update()`方法來進(jìn)行數(shù)據(jù)更新商蕴，最后我們使用該屬性狀態(tài)的值，接下來我們看一下三種使用方式的對比悲敷。
- 第一種Rx<t style="box-sizing: border-box;">([])</t>
- 第二種RxList
- 第三種 .obs
import 'dart:convert';
import 'package:get/get.dart';
class ListController extends GetxController {
// 第一種
final listOne = Rx<List<Map>>([
{
"name": "Jimi",
"age": 18
}
]);
// 第二種
final listTwo = RxList([
{
"name": "Jimi",
"age": 18
}
]);
// 第三種
final listThree = [{
"name": "Jimi",
"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();
}
}
我們在頁面中獲取狀態(tài)更新的值
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.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("轉(zhuǎn)換為大寫"))
],
),
),
),
);
}
}
</pre>
|`
效果展示
Rx<t style="box-sizing: border-box;">([])源碼分析</t>
Rx<T> 繼承自_RxImpl<T>究恤，_RxImpl<T>又繼承RxNotifier<T>并混合 RxObjectMixin<T> 類
RxImpl<T>它主要的作用是管理泛型的所有邏輯的。
RxObjectMixin<T> 它主要的作用是管理注冊到GetX和Obx的全局對象后德，比如Widget的Rx值
Rx<T>它主要的作用是將自定義模型類用Rx`來進(jìn)行包裝，
class Rx<T> extends _RxImpl<T> {
Rx(T initial) : super(initial);
@override
dynamic toJson() {
try {
return (value as dynamic)?.toJson();
} on Exception catch (_) {
throw '$T has not method [toJson]';
}
}
}
abstract class _RxImpl<T> extends RxNotifier<T> with RxObjectMixin<T> {
_RxImpl(T initial) {
_value = initial;
}
void addError(Object error, [StackTrace? stackTrace]) {
subject.addError(error, stackTrace);
}
Stream<R> map<R>(R mapper(T? data)) => stream.map(mapper);
void update(void fn(T? val)) {
fn(_value);
subject.add(_value);
}
void trigger(T v) {
var firstRebuild = this.firstRebuild;
value = v;
if (!firstRebuild) {
subject.add(v);
}
}
}
</pre>
|`
RxList<e style="box-sizing: border-box;">源碼分析</e>
RxList<E>繼承自ListMixin<E>實現(xiàn)了RxInterface<List<E>>并混合了NotifyManager<List<E>>, RxObjectMixin<List<E>>
RxList<E>它的主要作用是創(chuàng)建一個類似于List<T> 的一個列表
class RxList<E> extends ListMixin<E>
with NotifyManager<List<E>>, RxObjectMixin<List<E>>
implements RxInterface<List<E>> {
RxList([List<E> initial = const []]) {
_value = List.from(initial);
}
factory RxList.filled(int length, E fill, {bool growable = false}) {
return RxList(List.filled(length, fill, growable: growable));
}
factory RxList.empty({bool growable = false}) {
return RxList(List.empty(growable: growable));
}
/// Creates a list containing all [elements].
factory RxList.from(Iterable elements, {bool growable = true}) {
return RxList(List.from(elements, growable: growable));
}
/// Creates a list from [elements].
factory RxList.of(Iterable<E> elements, {bool growable = true}) {
return RxList(List.of(elements, growable: growable));
}
/// Generates a list of values.
factory RxList.generate(int length, E generator(int index),
{bool growable = true}) {
return RxList(List.generate(length, generator, growable: growable));
}
/// Creates an unmodifiable list containing all [elements].
factory RxList.unmodifiable(Iterable elements) {
return RxList(List.unmodifiable(elements));
}
@override
Iterator<E> get iterator => value.iterator;
@override
void operator []=(int index, E val) {
_value[index] = val;
refresh();
}
/// Special override to push() element(s) in a reactive way
/// inside the List,
@override
RxList<E> operator +(Iterable<E> val) {
addAll(val);
refresh();
return this;
}
@override
E operator [](int index) {
return value[index];
}
@override
void add(E item) {
_value.add(item);
refresh();
}
@override
void addAll(Iterable<E> item) {
_value.addAll(item);
refresh();
}
@override
int get length => value.length;
@override
@protected
List<E> get value {
RxInterface.proxy?.addListener(subject);
return _value;
}
@override
set length(int newLength) {
_value.length = newLength;
refresh();
}
@override
void insertAll(int index, Iterable<E> iterable) {
_value.insertAll(index, iterable);
refresh();
}
@override
Iterable<E> get reversed => value.reversed;
@override
Iterable<E> where(bool Function(E) test) {
return value.where(test);
}
@override
Iterable<T> whereType<T>() {
return value.whereType<T>();
}
@override
void sort([int compare(E a, E b)?]) {
_value.sort(compare);
refresh();
}
}
</pre>
|`
.obs源碼分析
當(dāng)我們在調(diào)用.obs的時候其實內(nèi)部的實現(xiàn)源碼還是通過RxList<e>(this)進(jìn)行了一層包裝抄腔，設(shè)計這個主要的目的就是為了方便開發(fā)者進(jìn)行使用
ListExtension<E> on List<E> {
RxList<E> get obs => RxList<E>(this);
/// Add [item] to [List<E>] only if [item] is not null.
void addNonNull(E item) {
if (item != null) add(item);
}
// /// Add [Iterable<E>] to [List<E>] only if [Iterable<E>] is not null.
// void addAllNonNull(Iterable<E> item) {
// if (item != null) addAll(item);
// }
/// Add [item] to List<E> only if [condition] is true.
void addIf(dynamic condition, E item) {
if (condition is Condition) condition = condition();
if (condition is bool && condition) add(item);
}
/// Adds [Iterable<E>] to [List<E>] only if [condition] is true.
void addAllIf(dynamic condition, Iterable<E> items) {
if (condition is Condition) condition = condition();
if (condition is bool && condition) addAll(items);
}
/// Replaces all existing items of this list with [item]
void assign(E item) {
// if (this is RxList) {
// (this as RxList)._value;
// }
clear();
add(item);
}
/// Replaces all existing items of this list with [items]
void assignAll(Iterable<E> items) {
// if (this is RxList) {
// (this as RxList)._value;
// }
clear();
addAll(items);
}
}
</pre>
|`
總結(jié)
我們對Rx<T>([])瓢湃、RxList<E>理张、.obs進(jìn)行了一個總結(jié)，在我們平時的開發(fā)過程中建議大家使用.obs即可绵患，因為這是最簡單的方式雾叭。
