安装
将 GetX 添加到你的 pubspec.yaml 文件中
dependencies:
get: ^4.6.5
在需要用到的文件中导入，它将被使用。
import 'package:get/get.dart';
GetxController介绍
在实际的项目开发过程中，我们不可能把UI代码、业务逻辑都放在一起处理，这样对项目的架构、代码的可读性、后期的维护将会是致命的，好在GetX为我们提供了GetxController,GetxController主要的作用是用于UI代码与业务逻辑分离开来。
GetxController三种使用方式
// 第一种
Obx(()=>Text(
"测试数据是：${myController.trancher.name}"
)),
// 第二种
GetX<MyController>(
init: MyController(),
builder: ((controller) {
return Text(
"测试数据2：${controller.trancher.name}"
);
}),
),
// 第三种
GetBuilder<MyController>(
init: myController,
builder: ((controller) {
return Text("测试数据GetBuilder：${controller.trancher.name}");
})
),
代码
main.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'GetXControllerExample/GetXControllerExample.dart';
void main(){
return runApp(Home());
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return GetMaterialApp(
title: "",
home: GetXControllerExample(),
);
}
}
GetXControllerExample.dart
import 'package:flutter/material.dart';
import 'package:untitled/GetXControllerExample/MyController.dart';
import 'package:get/get.dart';
class GetXControllerExample extends StatelessWidget {
MyController myController = Get.put(MyController());
Widget build(BuildContext context) {
return Container(
child: Scaffold(
appBar: AppBar(
title: Text("GetXController"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 第一种
// Obx(()=>Text(
// "测试数据是：${myController.trancher.name}"
// )),
// 第二种
GetX<MyController>(
init: MyController(),
builder: ((controller) {
return Text(
"测试数据2：${controller.trancher.name}"
);
}),
),
// 第三种
// GetBuilder<MyController>(
// init: myController,
// builder: ((controller) {
// return Text("测试数据GetBuilder：${controller.trancher.name}");
// })
// ),
SizedBox(height: 20,),
ElevatedButton(onPressed: (){
// 第一种
myController.convertToUpperCase();
// 第二种
// Get.find<MyController>().convertToUpperCase();
}, child: Text("转换"))
],
),
),
),
);
}
}
MyController.dart
import 'package:get/get.dart';
class MyController extends GetxController{
// 第一种
// var trancher = Teacher();
// void convertToUpperCase(){
// trancher.name.value = trancher.name.value.toUpperCase();
// }
// 第二种
// var trancher = trancher(name: "Jimi", age: 18).obs;
// void convertToUpperCase() {
// teacher.update((val) {
// trancher.value.name = trancher.value.name.toString().toUpperCase();
// });
// }
// 第三种
var trancher = Teacher();
void convertToUpperCase() {
trancher.name.value = "12323";
update();
print("执行了");
}
}
class Teacher{
var name = "ancde".obs;
var age = 19.obs;
}
GetxController事件监听
GetxController的事件监听，包括监听单个值、多个值等。
main.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:untitled/GetXControllerCycle/GetXControllerCycle.dart';
void main(){
return runApp(Home());
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return GetMaterialApp(
title: "",
home: GetXControllerCycle(),
);
}
}
GetXControllerCycle.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'GetxControllerOn.dart';
class GetXControllerCycle extends StatelessWidget {
GetxControllerOn getxControllerOn = Get.put(GetxControllerOn());
GetXControllerCycle({super.key});
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GetxController事件监听"),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(onPressed: ()=>{
getxControllerOn.increment()
}, child: Text("加1"))
],
),
);
}
}
GetxControllerOn.dart
import 'package:get/get.dart';
class GetxControllerOn extends GetxController {
var count = 0.obs;
void increment() {
print("执行了");
count++;
}
//重写onInit并监听事件
void onInit() {
// 监听count的值,当它发生改变的时候调用
ever(count, (callback)=>print("ever---$count"));
// 监听多个值,当它们发生改变的时候调用
everAll([count], (callback) => print("everAll----$count"));
// count值改变时调用,只执行一次
once(count, (callback) => print("once----$count"));
// 用户停止打字时1秒后调用,主要是防DDos
debounce(count, (callback) => print("debounce----$count"));
// 忽略3秒内的所有变动
interval(count, (callback) => print("interval----$count"));
super.onInit();
}
}
GetxController生命周期
GetxController的生命周期，包括初始化、加载完成、销毁等。
GetxControllerOn.dart
import 'package:get/get.dart';
class GetxControllerOn extends GetxController {
var count = 0.obs;
void increment() {
print("执行了");
count++;
}
//重写onInit并监听事件
void onInit() {
print("初始化");
// 监听count的值,当它发生改变的时候调用
ever(count, (callback)=>print("ever---$count"));
// 监听多个值,当它们发生改变的时候调用
everAll([count], (callback) => print("everAll----$count"));
// count值改变时调用,只执行一次
once(count, (callback) => print("once----$count"));
// 用户停止打字时1秒后调用,主要是防DDos
debounce(count, (callback) => print("debounce----$count"));
// 忽略3秒内的所有变动
interval(count, (callback) => print("interval----$count"));
super.onInit();
}
void onReady() {
// TODO: implement onReady
print("加载完成");
super.onReady();
}
void onClose() {
// TODO: implement onClose
print("控制器被释放");
super.onClose();
}
}
GetxController UniqueID
我们在开发的过程中会碰到一种情况，就是多个地方引用了同一个属性，但我只想单独更新某一个地方，那么就可以用UniqueID来进行区分。
main.dart
GetXControllerUniqueID.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class GetXControllerUniqueID extends StatelessWidget {
CountController countController = Get.put(CountController());
Widget build(BuildContext context) {
return Container(
child: Scaffold(
appBar: AppBar(
title: Text("GetxController UniqueID"),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
GetBuilder<CountController>(builder: (context){
return Text(
"计数器值为: ${countController.count}",
);
}),
GetBuilder<CountController>(
id:"yuyu_count",
builder: (context){
return Text(
"计数器值为: ${countController.count}",
);
}),
SizedBox(height: 30,),
ElevatedButton(onPressed: ()=>{
countController.increment()
}, child: Text("增加"))
],
),
),
),
);
}
}
class CountController extends GetxController{
var count = 0;
void increment() {
count++;
update(['yuyu_count']);
}
}
