dart语言的list（Flutter GetX基础教程（十二）：RxList、Rx（[]）、.obs对比分析）

本文目录

• Flutter GetX基础教程（十二）：RxList、Rx（[]）、.obs对比分析
• Flutter关于Widget属性传参记录

Flutter GetX基础教程（十二）：RxList、Rx（[]）、.obs对比分析

首先我们知道 GetX 组件里面 obs 状态管理有三种创建属性的方式，我们这里以 List 为例

视频讲解链接

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

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.toUpperCase();
listTwo.toList().first.toString().toUpperCase();
listThree.toList().first.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.listTwo.first}",
style: TextStyle(color: Colors.green, fontSize: 30),
);
},
),
SizedBox(height: 20,),
GetBuilder《ListController》(
init: listController,
builder: (controller) {
return Text(
"我的名字是 ${controller.listThree.first}",
style: TextStyle(color: Colors.green, fontSize: 30),
);
},
),
SizedBox(height: 20,),
ElevatedButton(
onPressed: () {
listController.convertToUpperCase();
},
child: Text("转换为大写"))
],
),
),
),
);
}
}
《/pre》

|`

效果展示
Rx《T》 继承自 _RxImpl《T》 ， _RxImpl《T》 又继承 RxNotifier《T》 并混合 RxObjectMixin《T》 类

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

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

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

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 ’;
}
}
}

abstract class _RxImpl《T》 extends RxNotifier《T》 with RxObjectMixin《T》 {
_RxImpl(T initial) {
_value = initial;
}

void addError(Object error, ) {
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》 继承自 ListMixin《E》 实现了 RxInterface《List《E》》 并混合了 NotifyManager《List《E》》, RxObjectMixin《List《E》》

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

class RxList《E》 extends ListMixin《E》
with NotifyManager《List《E》》, RxObjectMixin《List《E》》
implements RxInterface《List《E》》 {
RxList() {
_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 .
factory RxList.from(Iterable elements, {bool growable = true}) {
return RxList(List.from(elements, growable: growable));
}

/// Creates a list from .
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 .
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 = 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;
}

@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() {
_value.sort(compare);
refresh();
}
}
《/pre》

|`

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

ListExtension《E》 on List《E》 {
RxList《E》 get obs =》 RxList《E》(this);

/// Add is not null.
void addNonNull(E item) {
if (item != null) add(item);
}

// /// Add is not null.
// void addAllNonNull(Iterable《E》 item) {
// if (item != null) addAll(item);
// }

/// Add is true.
void addIf(dynamic condition, E item) {
if (condition is Condition) condition = condition();
if (condition is bool && condition) add(item);
}

/// Adds 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
void assign(E item) {
// if (this is RxList) {
// (this as RxList)._value;
// }

}

/// Replaces all existing items of this list with
void assignAll(Iterable《E》 items) {
// if (this is RxList) {
// (this as RxList)._value;
// }
clear();
addAll(items);
}
}
《/pre》

|`

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

Flutter关于Widget属性传参记录

知识点背景：今天在写flutter_charts中需要在图表中添加横线，需要用到 behaviors这个属性，他是个list。但是当数据没有的时候又不需要添加横线，所以需要根据数据判断是否需要添加横线。直接传null界面直接崩溃，于是写了个function，在function里面判断为null就不添加了，然后把list作为结果返回。

那么问题来了，The argument type ’List《ChartBehavior《ChartBehavior《dynamic》》》 Function()’ can’t be assigned to the parameter type ’List《ChartBehavior《ChartBehavior《dynamic》》》’.

乍一看，传参类型和接受类型是一致的，但是传参类型里面多个Function()，所以只能是不抽取方法，直接定义list，直接添加。不在报错。

总结： dart语言的function返回值应该都是带function的。和直接定义的类型是不同的类型。