定义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;
1.案例一:
第一步：应用程序入口设置
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) {
//注意：这不会修改Flutter的MaterialApp，GetMaterialApp不是修改后的MaterialApp，它只是一个预配置的小部件，它作为子部件具有默认的MaterialApp。您可以手动配置，但绝对没有必要。GetMaterialApp将创建路由，注入它们，注入翻译，注入路由导航所需的一切。如果您仅将Get用于状态管理或依赖项管理，则无需使用GetMaterialApp。GetMaterialApp对于与路线和上下文缺失相关的路由、小吃店、国际化、底表、对话框和高级API是必需的。
return GetMaterialApp(
title: "GetX",
home: ObxCountExample(),
);
}
}
第二步：声明Rx变量以及改变计数器的方法
//RxInt count = RxInt(0);
// var count = Rx<double>(0);
//声明的变量后面跟.obs,在使用Obx函数才可以监听到该属性值得变化
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"))
],
),
),
);
}
}
2.自定义类实现案例:
第一步：先自定义一个类
import 'package:flutter/material.dart';
import 'package:get/get.dart';
// ignore: camel_case_types
//必须继承GetxController
class numberVC extends GetxController {
//声明的变量后面必须跟.obs.当它变化的时候,使用Obx才能够监听到.
var count = 0.obs;
increment() => count++;
}
第二步：应用程序入口设置
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'numberVC.dart';
void main() {
runApp(GetMaterialApp(
home: HomeVC(),
));
}
第三步：使用Obx监听值的改变
//在使用getx的时候,当页面的值需要变动的时候可以直接使用StatelessWidget(无状态组件),没有必要使用StatefulWidget(有状态组件).
class HomeVC extends StatelessWidget {
const HomeVC({super.key});
@override
Widget build(BuildContext context) {
//获取到自定义属性的那个VC(获取到numberVC类的实例)
final controller = Get.put(numberVC());
return Scaffold(
appBar: AppBar(title: Text("getX")),
body: Center(
child: GestureDetector(
onTap: () {
Get.to(OtherVC());
},
child: Container(
width: 200,
height: 200,
color: Colors.red,
//这里必须使用Obx函数进行包裹,获取到的属性改变的时候,这里才会及时做出响应
child: Obx(() {
return Text(
"数字:${controller.count.toString()}",
style: TextStyle(
fontSize: 50,
color: Colors.orange,
),
);
}),
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
//对数字进行加1处理.
controller.increment();
},
child: Icon(Icons.add),
),
);
}
}
第四步(附加)：可以将当前页面使用的属性值传递到下一个页面
class OtherVC extends StatelessWidget {
//你可以让Get找到一个正在被其他页面使用的numberVC,并将它返回会给你
final numberVC VC = Get.find();
@override
Widget build(BuildContext context) {
//访问更新后的计数变量
return Scaffold(
appBar: AppBar(title: Text("下一级页面")),
body: Center(
child: Text("上一个页面的传值${VC.count}"),
),
);
}
}
定义Obx变量的三种方式
// 第一种 使用 Rx{Type}
// final name = R
阅读背景：
Flutter中GetX系列一--(Obx响应式状态管理,共享数据)
来源：互联网
分享到：
