介绍
响应式编程可能会让很多人感到陌生，因为它很复杂，但是GetX将响应式编程变得非常简单。
你不需要创建StreamControllers.
你不需要为每个变量创建一个StreamBuilder。
你不需要为每个状态创建一个类。
你不需要为一个初始值创建一个get。
使用 Get 的响应式编程就像使用 setState 一样简单。
定义Obx变量的三种方式
// 第一种 使用 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>({});
// 第二种是使用 Rx，规定泛型 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>();
// 第三种更实用、更简单、更可取的方法，只需添加 .obs 作为value的属性。
// 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;
// 自定义类 - 可以是任何类
// final user = User().obs;
计数器案例
第一步：应用程序入口设置
import 'package:flutter/material.dart';
import 'package:flutter_getx_example/ObxCountExample/ObxCountExample.dart';
import 'package:get/get.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: "GetX",
home: ObxCountExample(),
);
}
}
第二步：声明Rx变量以及改变计数器的方法
RxInt count = RxInt(0);
// var count = Rx<double>(0);
// var count = 0.obs;
void increment() {
count++;
}
第三步：使用Obx监听值的改变
Obx(() => Text(
"count的值为: $count",
style: TextStyle(color: Colors.red, fontSize: 30),
)),
完整代码
import 'dart:ffi';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class ObxCountExample extends StatelessWidget {
RxInt count = RxInt(0);
// var count = Rx<double>(0);
// var count = 0.obs;
void increment() {
count++;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GetX Obx---计数器"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Obx(() => Text(
"count的值为: $count",
style: TextStyle(color: Colors.red, fontSize: 30),
)),
SizedBox(height: 20,),
ElevatedButton(
onPressed: () {
increment();
},
child: Text("点我加1"))
],
),
),
);
}
}
效果展示
image
自定义类案例
第一步：应用程序入口设置
import 'package:flutter/material.dart';
import 'package:flutter_getx_example/ObxCustomClassExample/ObxCustomClassExample.dart';
import 'package:get/get.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
title: "GetX",
home: ObxCustomClassExample(),
);
}
}
第二步：创建Teacher类
import 'package:get/get.dart';
class Teacher {
// rx 变量
var name = "Jimi".obs;
var age = 18.obs;
// 构造函数创建
// var name;
// var age;
// Teacher({this.name, this.age});
}
第三步：监听Teacher状态改变
import 'package:flutter/material.dart';
import 'package:flutter_getx_example/ObxCustomClassExample/Teacher.dart';
import 'package:get/get.dart';
class ObxCustomClassExample extends StatelessWidget {
var teacher = Teacher();
// final teacher = Teacher(name: "Jimi", age: 18).obs;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GetX Obx---自定义类"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Obx(() => Text(
"我的名字是 ${teacher.name.value}",
style: TextStyle(color: Colors.red, fontSize: 30),
)),
SizedBox(height: 20,),
ElevatedButton(
onPressed: () {
teacher.name.value = teacher.name.value.toUpperCase();
// teacher.update((val) {
// teacher.value.name = teacher.value.name.toString().toUpperCase();
// });
},
child: Text("转换为大写"))
],
),
),
);
}
}
效果展示
image
总结
通过这个章节知道了GetX是一个高性能的状态管理、智能的依赖注入和便捷的路由管理，我们介绍了什么GetX以及如果使用，包括Snackbar、Dialog、BottomSheet、Navigation、Obx 等进行了一个简单的介绍，使用GetX后能极简的缩减我们的代码。
网友评论