Flutter GetX基础教程(十二):RxList、Rx([])、.obs对比分析

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter GetX基础教程(十二):RxList、Rx([])、.obs对比分析相关的知识,希望对你有一定的参考价值。

参考技术A 首先我们知道 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[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.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("转换为大写"))
],
),
),
),
);


</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 [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> 继承自 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([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 的时候其实内部的实现源码还是通过 RxList<e>(this) 进行了一层包装,设计这个主要的目的就是为了方便开发者进行使用

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;
//



/// 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>

|`

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

Flutter -- GetX准备篇

文章目录

一、前言

什么是 GetX ?

GetX 是 Flutter 上的一个轻量且强大的解决方案:高性能的状态管理、智能的依赖注入和便捷的路由管理。

GetX 的三个基本原则:

  • 性能: GetX 专注于性能和最小资源消耗。GetX 打包后的apk占用大小和运行时的内存占用与其他状态管理插件不相上下。如果你感兴趣,这里有一个性能测试。
  • 效率: GetX 的语法非常简捷,并保持了极高的性能,能极大缩短你的开发时长。
  • 结构: GetX 可以将界面、逻辑、依赖和路由完全解耦,用起来更清爽,逻辑更清晰,代码更容易维护。

GetX 中文官方文档

pub 地址

GetX 相关优势

  • 依赖注入

    • GetX 是通过依赖注入的方式,存储相应的 XxxGetxController;已经脱离了 InheritedWidget 那一套玩法,自己手动去管理这些实例,使用场景被大大拓展
    • 简单的思路,却能产生深远的影响:优雅的跨页面功能便是基于这种设计而实现的、获取实例无需 BuildContext、GetBuilder自动化的处理及其减少了入参等等
  • 跨页面交互

    • 这绝对是GetX的一个优点!对于复杂的生产环境,跨页面交互的场景,实在太常见了,GetX的跨页面交互,实现的也较为优雅
  • 路由管理

    • GetX 内部实现了路由管理,而且用起来,非常简单!bloc没实现路由管理,我不得不找一个star量高的路由框架,就选择了fluro,但是不得不吐槽下,fluro用起来真的很折磨人,每次新建一个页面,最让我抗拒的就是去写fluro路由代码,横跨几个文件来回写,头皮发麻
    • GetX实现了动态路由传参,也就是说直接在命名路由上拼参数,然后能拿到这些拼在路由上的参数,也就是说用flutter写H5,直接能通过Url传值,OMG!可以无脑舍弃复杂的fluro了
  • 实现了全局 BuildContext

  • 国际化,主题实现

二、GetX 集成

1. 在 pubspec.yaml 文件中添加 GetX 的依赖,如下:

dependencies:
  flutter:
    sdk: flutter
  get: ^4.5.1

2. 需要对 GetX 进行初始化,将默认的 MaterialApp 替换为 GetMaterialApp 即可,如下:

class MyApp extends StatelessWidget 
  const MyApp(Key? key) : super(key: key);
  
  @override
  Widget build(BuildContext context) 
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  

三、实践

lib 目录划分模版

  • common

此目录用来存放通用模块及其变量,例如colors、langs、values等,例如:

├── colors
│   └── colors.dart
├── langs
│   ├── en_US.dart
│   ├── translation_service.dart
│   └── zh_Hans.dart
└── values
    ├── cache.dart
    ├── storage.dart
    └── values.dart
  • components

此目录主要存放顶层公告组件,例如 appbar、scaffold、dialog等等,例如:

├── components.dart
├── custom_appbar.dart
└── custom_scaffold.dart
  • pages

此目录主要存放页面文件,例如:

├── Index
├── home
├── login
├── notfound
├── proxy
└── splash

:每个Item为一个文件夹.

  • router

此目录为路由文件,此模版的路由方式约定为命名路由,为固定目录,目录结构如下:

├── app_pages.dart
└── app_routes.dart
  • services

此目录为路由文件,此模版的路由方式约定为命名路由,为固定目录,目录结构如下:

├── app_pages.dart
└── app_routes.dart
  • utils

此目录用来存放一些工具模块,例如 request 、local_storage等等,例如:

├── authentication.dart
├── local_storage.dart
├── request.dart
├── screen_device.dart
└── utils.dart

开发规范

当你需要新建一个页面时,你需要按照以下步骤进行:

假设现在要创建一个 Home 页面.

1. 在 pages 目录下新建 home 目录:

2. 在 home 目录下,新建以下四个文件:

  • home_view.dart : 视图(用来实现页面布局)

  • home_contrller.dart : 控制器(用来实现业务逻辑)

  • home_binding : 控制器绑定(用来绑定controller到view)

  • home_model : 数据模型(用来约定数据模型)

注意:每创建一个页面时,都必须如此做,命名采用 页面名_key 这样的形式。

当你创建好一个页面,目录应该长这样:

// home
.
├── home.binding.dart
├── home_controller.dart
├── home_model.dart
└── home_view.dart

3. 到 router 文件夹下面添加对应路由:

// app_routes.dart
part of 'app_pages.dart';
abstract class AppRoutes 
  ...
  static const Home = '/home';
  ...

// app_pages.dart
class AppPages 

  static final routes = [
    ...
    GetPage(
      name: AppRoutes.Home,
      page: () => HomePage(),
      binding: HomeBinding(),
    ),
    ...
  ];

完成以上步骤,你就可以愉快的开始开发了。

以上是关于Flutter GetX基础教程(十二):RxList、Rx([])、.obs对比分析的主要内容,如果未能解决你的问题,请参考以下文章

在 Flutter 使用 GetX 对话框

Flutter中GetX状态管理的终极指南

Flutter状态管理--GetX的简单使用

Getx在flutter中响应式设计

Flutter状态管理--GetX的简单使用

Flutter状态管理--GetX的简单使用