Getx - 使用状态管理特性
添加到您的 pubspec.yaml 文件:
dependencies:
get:
1. 状态管理
状态管理其实就是管理应用的数据,在 get
中也称为控制器,所有的数据都必须放在 继承自 GetController 的类中,才可以在视图中使用
第一步:创建 一个Controller
import 'package:get/get.dart';
/// 定义数据控制器
class HomeController extends GetxController {}
第二步:在控制器中声明变量
import 'package:get/get.dart';
/// 定义数据控制器
class HomeController extends GetxController {
// 使用 .obs 作为你值的后缀
final name = "老汪".obs;
// 使用 Rx 和 Darts 泛型,Rx < type >
final count = Rx<int>(0);
// 使用 Rx { Type }
final isLogged = RxBool(false);
}
第三步:在UI中使用变量
import 'package:flutter/material.dart';
import 'package:getx_demo/page/home_controller.dart';
class HomePage extends StatelessWidget {
// 实例化控制器
final controller = HomeController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("状态管理"),
centerTitle: true,
),
body: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('name: ${controller.name}'),
Text('count: ${controller.count}'),
Text('isLogged: ${controller.isLogged}'),
Divider(),
Text('循环items列表:'),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children:
controller.items.map((item) => Text("$item, ")).toList(),
)
],
),
),
);
}
}
2. 声明“可观察的”变量
2.1 第一个是使用 Rx { Type }。
final name = RxString('');
final isLogged = RxBool(false);
final count = RxInt(0);
final balance = RxDouble(0.0);
final items = RxList<String>([]);
final myMap = RxMap<String, int>({});
2.2 第二种是使用 Rx 和 Darts 泛型,Rx < type >
final name = Rx<string>('');
final isLogged = Rx<bool>(false);
final count = Rx<int>(0);
final balance = Rx<double>(0.0);
final number = Rx<num>(0)
final items = Rx<List<string>>([]);
final myMap = Rx<Map<string, int>>({});
// 自定义类
final user = Rx<User>();
2.3 第三种方法更实用、更简单也是首选,就是把.obs 作为你的变量的后缀:
final name = ''.obs;
final isLogged = false.obs;
final count = 0.obs;
final balance = 0.0.obs;
final number = 0.obs;
final items = <String>[].obs;
final myMap = <String, int>{}.obs;
// Custom classes - it can be any class, literally
final user = User().obs;
3. 什么类型可被定义为的obs
你可以在 obs 上转换任何东西:
import 'package:get/get.dart';
class User {
final name;
final age;
User({this.name, this.age});
}
class Teacher {
final name = "李思思".obs;
final languer = "语文".obs;
}
/// 定义数据控制器
class HomeController extends GetxController {
// 使用 .obs 作为你值的后缀
final name = "老汪".obs;
// 使用 Rx 和 Darts 泛型,Rx < type >
final count = Rx<int>(0);
// 使用 Rx { Type }
final isLogged = RxBool(false);
// 使用 .obs 作为你值的后缀
final items = <String>["flutter", "getx", "redux", "java"].obs;
// 自定义User类
final user = User(name: "Camila", age: 18).obs;
// 自定义teacher类
final teacher = Teacher();
// Map, 不响应的数据
final subjects = {"name": "语文", "desc": "超扫good"};
}
4. 如何改变数据的值
第一步: 计数器案例
// 创建控制器
class HomeController extends GetxController {
// 使用 Rx 和 Darts 泛型,Rx < type >
final count = Rx<int>(0);
// 每次点击增加1
void increment() {
print("++")
// 必须使用 .value 修饰具体的值
this.count.value++;
}
}
第二步: UI中使用,并添加点击事件
class HomePage extends StatelessWidget {
// 实例化控制器
final controller = HomeController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("状态管理"),
centerTitle: true,
),
body: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('数字类型: ${controller.count}'),
MaterialButton(
onPressed: () {
// 直接调用函数
controller.increment();
},
color: Colors.blue,
child: Text("change数字类型"),
)
],
),
),
);
}
}
此刻点击,按钮发送事件,控制台会打印数据,数据也确实改变了,但视图不会更新
5. 如何触发视图的更新
在Get中, 有两个不同的状态管理器: 简单的状态管理器(GetBuilder) 和 响应式的管理器(GetX/Obx),所以只有
使用这两个状态管理器修饰的值才会引起视图的更新
5.1 使用GetBuilder()更新
GetBuilder 的目标正是多状态控制。想象一下,你在一个购物车中添加了30种商品,你点击删除一种,同时列表被更新,价格被更新,购物车中的徽章被更新为一个更小的数字。这种类型的方法使得 GetBuilder 成为杀手,因为它将状态分组并同时更改它们,而不需要任何“计算逻辑”。创建 GetBuilder 时就考虑到了这种情况,因为对于状态的临时更改,可以使用 setState,而且不需要状态管理器
这样,如果您想要一个单独的控制器,您可以为它分配 id,或者使用 GetX。这取决于您,记住您拥有的小部件越多,GetX 的性能就越突出,而当状态发生多次更改时,GetBuilder 的性能应该更好。
优点:
只更新所需的小部件。
使用较少内存(接近0mb)的状态管理器
5.1.1 GetBuilder的使用
第一步: 创建控制器
/// 定义数据控制器
class HomeController extends GetxController {
// 注意,这里定义普通的值就行,不用使用.obs修饰
int count = 0;
// 需要手动调用update(),触发更新
void increment() {
count++;
update();
}
}
第二步:渲染视图并触发更新
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("状态管理"),
centerTitle: true,
),
body: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// 使用GetBuilder, 需要手动调用update()
GetBuilder<HomeController>(
init: HomeController(),
builder: (_) => Column(
children: [
Text(
'数字类型: ${_.count}',
style: TextStyle(fontSize: 35),
),
MaterialButton(
onPressed: _.increment,
color: Colors.blue,
child: Text("++"),
)
],
),
),
],
),
),
);
}
}
5.1.2 如果想用 GetBuilder 具体更新某个具体的小部件,你可以给它们分配唯一的 id:
第一步:添加id属性
GetBuilder<HomeController>(
id: "num",
init: HomeController(),
builder: (_) => Column(
children: [
Text(
'数字类型: ${_.count}',
style: TextStyle(fontSize: 35),
),
MaterialButton(
onPressed: _.increment,
color: Colors.blue,
child: Text("++"),
)
],
),
)
第二步:update 时传入某个id属性
// 直接按id更新
void increment() {
count++;
update(["num"]);
}
// 您还可以为更新添加条件, 当count 小于 5 时才更新
void increment() {
count++;
update(["num"], count < 5);
}
5.2 使用Obx()更新
第一步: 创建控制器
/// 定义数据控制器
class HomeController extends GetxController {
// 变量必须用final修饰
final count = 0.obs;
void increment() {
count.value++;
}
}
第二步:渲染UI
class HomePage extends StatelessWidget {
// 实例化控制器
final controller = HomeController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("状态管理"),
centerTitle: true,
),
body: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// 使用Obx返回渲染的 UI widget
Obx(
() => Text(
'数字: ${controller.count}',
style: TextStyle(fontSize: 35),
),
),
// 添加点击事件
MaterialButton(
onPressed: controller.increment,
color: Colors.blue,
child: Text("++"),
)
],
),
),
);
}
}
在用户界面中,当你想要显示这个值并在值改变时更新屏幕时,只需要这样做:
注1:只有在 定义的变量的值发生变化时才会更改。
如果在一个 Obx 中有5多个 Rx (可观察的)变量,当它们中的任何一个发生变化时,它都会自动更新。
但如果我在一个类中有30个变量,当我更新一个时,它会更新该类中的所有变量吗?
并不会的,只有使用 Rx 变量的特定 Widget 才会更新,因此,当 Rx 变量改变它的值时,GetX 只更新屏幕
5.3 使用 GetX () 更新
用法同GetBuilder(), 但不能添加需要惟一的 id属性,
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("状态管理"),
centerTitle: true,
),
body: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
GetX<HomeController>(
init: HomeController(),
builder: (_) => Column(
children: [
Text(
'数字类型: ${_.count}',
style: TextStyle(fontSize: 35),
),
MaterialButton(
onPressed: _.increment,
color: Colors.blue,
child: Text("++"),
)
],
),
),
],
),
),
);
}
}
6. GetxController生命周期钩子
- onInit : 初次渲染完毕,可以在这里定义控制器(输入框,顶部选项卡,PageView等),调接口
- onClose: 组件卸载时触发,清除定时器等
class MyController extends GetxController {
@override
onInit(){
}
@override
void onClose() {
}
}
6. 1 演示输入框配合控制器,
- 调接口就不演示了,放到 写 GetConnect 这个文章里
// 控制器
class HomeController extends GetxController {
// 用户名控制器
TextEditingController userNameController;
@override
void onInit() {
super.onInit();
userNameController = TextEditingController();
print("渲染完成");
}
@override
void onClose() {
super.onClose();
print("close");
}
}
// UI 渲染
class HomePage extends StatelessWidget {
// 实例化控制器
final controller = HomeController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("状态管理"),
centerTitle: true,
),
body: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
TextField(
controller: controller.userNameController,
decoration: InputDecoration(
hintText: "请输入用户名",
),
onChanged: (val) {
print(val);
},
)
],
),
),
);
}
}
7. Get.find()
当有多个控制器时,指定使用某个具体的控制器
// 现有 - HomeController, LoginController
Get.find<LoginController>()
8. 混入状态 StateMixin (保存动态接口数据)
这个一般配合接口数据,在写 getConnect 一块时 说,可以简单看看
另一种处理 UI 状态的方法是使用 StateMixin < t > 。要实现它,可以使用 with 将 StateMixin < t > 添加到允许 t 模型的控制器中
class Controller extends GetController with StateMixin<User>{}
方法可以随时改变状态,只需以下方式传递数据和状态:
change(data, status: RxStatus.success());
允许这些状态:
RxStatus.loading();
RxStatus.success();
RxStatus.empty();
RxStatus.error('message');
要在 UI 中表示它,请使用:
class OtherClass extends GetView<Controller> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: controller.obx(
(state)=>Text(state.name),
onLoading: CustomLoadingIndicator(),
onEmpty: Text('No data found'),
onError: (error)=>Text(error),
),
);
}
9. 内置函数工具类 Woker(一般事件发生时触发特定的回调。)
/// 变量发出新值时,都会调用
ever(count1, (_) => print("$_ has been changed"));
/// 在变量第一次被更改时才调用
once(count1, (_) => print("$_ was changed once"));
/// 防抖,连续点击多次,只执行一次,比如登录,搜索函数中非常有用
debounce(count1, (_) => print("debouce$_"), time: Duration(seconds: 1));
/// 节流,如果用户在1秒内对一个变量进行了1000次更改,那么他只会在规定的计时器之后发送最后一次更改,默认为800毫秒
interval(count1, (_) => print("interval $_"), time: Duration(seconds: 1));
10. 对比 GetBuilder vs GetX vs Obx
GetBuilder 在 内存消耗 方面非常经济,而且几乎没有比他更经济的方法了,但是,GetBuilder 仍然是一个机械状态管理器,您需要手动调用 update () 才会更新视图
GetX 仍然比其他任何反应状态管理器更经济,但是它比 GetBuilder 消耗更多的内存
Obx 比 GetX 更经济,但是输给了 GetBuilder, 与 GetX 和 GetBuilder 不同,您不能在 Obx 中初始化控制器
但使用 Obx,您不需要编写控制器类型,可以从多个不同的控制器中听到更改,但是需要在此之前进行初始化
一劳永逸,使用Obx, 然后是GetX, 追求极致性能使用 GetBuilder