flutter教程,Flutter：快速创建简单闪屏页

// 第二种

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();

}

}

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

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

(

init: listController,

builder: (controller) {

return Text(

"我的名字是 {controller.listTwo.first['name']}",

style: TextStyle(color: Colors.green, fontSize: 30),

);

},

),

SizedBox(height: 20,),

GetBuilder

(

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

继承自 _RxImpl

， _RxImpl

又继承 RxNotifier

并混合 RxObjectMixin

类

RxImpl

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

RxObjectMixin

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

Rx

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

class Rx

extends _RxImpl

{

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

extends RxNotifier

with RxObjectMixin

{

_RxImpl(T initial) {

_value = initial;

}

void addError(Object error, [StackTrace? stackTrace]) {

subject.addError(error, stackTrace);

}

Stream

map

(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);

}

}

}

|`

RxList

继承自 ListMixin

实现了 RxInterface
<list
> 并混合了 NotifyManager
<list
>, RxObjectMixin
<list
>

RxList

它的主要作用是创建一个类似于 List

的一个列表

class RxList

extends ListMixin

with NotifyManager
<list
>, RxObjectMixin
<list
>

implements RxInterface
<list
> {

RxList([List

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

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

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

operator +(Iterable

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

item) {

_value.addAll(item);

refresh();

}

@override

int get length => value.length;

@override

@protected

List

get value {

RxInterface.proxy?.addListener(subject);

return _value;

}

@override

set length(int newLength) {

_value.length = newLength;

refresh();

}

@override

void insertAll(int index, Iterable

iterable) {

_value.insertAll(index, iterable);

refresh();

}

@override

Iterable

get reversed => value.reversed;

@override

Iterable

where(bool Function(E) test) {

return value.where(test);

}

@override

Iterable

whereType

() {

return value.whereType

();

}

@override

void sort([int compare(E a, E b)?]) {

_value.sort(compare);

refresh();

}

}

|`

当我们在调用 .obs 的时候其实内部的实现源码还是通过 RxList

(this) 进行了一层包装，设计这个主要的目的就是为了方便开发者进行使用

ListExtension

on List

{

RxList

get obs => RxList

(this);

/// Add [item] to [List

] only if [item] is not null.

void addNonNull(E item) {

if (item != null) add(item);

}

// /// Add [Iterable

] to [List

] only if [Iterable

] is not null.

// void addAllNonNull(Iterable

item) {

// if (item != null) addAll(item);

// }

/// Add [item] to List

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

] to [List

] only if [condition] is true.

void addAllIf(dynamic condition, Iterable

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;

// }

}

/// Replaces all existing items of this list with [items]

void assignAll(Iterable

items) {

// if (this is RxList) {

// (this as RxList)._value;

// }

clear();

addAll(items);

}

}

|`

我们对 Rx

([]) 、 RxList

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

</list
</list
</list

</list
</list
</list

</list