1.GetxController介绍
在实际的项目开发过程中,我们不可能把UI代码、业务逻辑都放在一起处理,这样对项目的架构、代码的可读性、后期的维护将会是致命的,好在GetX为我们提供了GetxController,GetxController主要的作用是用于UI代码与业务逻辑分离开来。
这里主要讲解使用GetxController动态获取数据的三种方式以及更新数据的方式
第一步:应用程序入口设置
import 'package:flutter/material.dart'; import 'package:flutter_getx_example/GetXControllerExample/GetXControllerExample.dart'; import 'package:get/get.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return GetMaterialApp( title: "GetX", home: GetXControllerExample(), ); } }
第二步:定义控制器继承自GetxController
import 'package:flutter_getx_example/ObxCustomClassExample/Teacher.dart'; import 'package:get/get.dart'; class MyController extends GetxController { // 第一种 // var teacher = Teacher(); // // void convertToUpperCase() { // teacher.name.value = teacher.name.value.toUpperCase(); // } // 第二种 // var teacher = Teacher(name: "Jimi", age: 18).obs; // void convertToUpperCase() { // teacher.update((val) { // teacher.value.name = teacher.value.name.toString().toUpperCase(); // }); // } // 第三种 var teacher = Teacher(); void convertToUpperCase() { teacher.name.value = teacher.name.value.toUpperCase(); update(); //1.主动的去调用更新.也可以在update()增加一个id的数组.在调用的使用只有当调用显示的id包含在该id数组里面的时候,才会有效. //2.用来触发/刷新调用的时候obx()函数.这样数据就刷新了. } }
第三步:实例化控制器并使用
import 'package:flutter/material.dart'; import 'package:flutter_getx_example/GetXControllerExample/MyController.dart'; import 'package:get/get.dart'; class GetXControllerExample extends StatelessWidget { // 第一种 MyController myController = Get.put(MyController()); //如果该MyController已经在其他页面使用过了,在另外页面需要重新使用的时候,无需 Get.put,直接使用 Get.find即可. //MyController myController = Get.find();或者MyController countController= Get.find< MyController >(); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("GetX Obx---GetXController"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ // 第一种==>被动的 // Obx(() => Text( // "我的名字是 ${myController.teacher.name}", // style: TextStyle(color: Colors.red, fontSize: 30), // )), // 第二种==>被动的 // GetX( // init: MyController(), // builder: (controller) { // return Text( // "我的名字是 ${controller.teacher.name}", // style: TextStyle(color: Colors.green, fontSize: 30), // ); // }, // ), /* Obx和GetX 和GetBuilder 的区别: Obx的Controller作用域是在外面的,而GetX 的Controller作用域只限于当前函数体里面的. GetBuilder 和GetX 的区别在于GetBuilder 的性能会更高一点 */ // 第三种==>主动的 GetBuilder ( //id:**,该id如何在update()函数数据里面存在的时候,这里的属性值才会跟着发生变化.默认不写的话,是包含的. init: myController,//init方法可以省略不要 builder: (controller) { return Text( "我的名字是 ${controller.teacher.name}", style: TextStyle(color: Colors.green, fontSize: 30), ); }, ), SizedBox(height: 20,), ElevatedButton( onPressed: () { // 第一种 myController.convertToUpperCase(); // 第二种 // Get.find ().convertToUpperCase(); }, child: Text("转换为大写")) ], ), ), ); } }
2.GetxController生命周期
这里主要讲解GetxController的生命周期,包括初始化、加载完成、销毁等。
第一步:应用程序入口设置
import 'package:flutter/material.dart'; import 'package:flutter_getx_example/GetXControllerLifecycleMethodsExample/GetXControllerLifecycleMethodExample.dart'; import 'package:get/get.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return GetMaterialApp( title: "GetX", home: GetXControllerLifecycleMethodExample(), ); } }
第二步:定义控制器继承自GetxController
import 'package:get/get.dart'; class MyLifecycleController extends GetxController { var count = 0; void increment() async { await Future.delayed(Duration(milliseconds: 3000)); count++; update(); } void cleanTask() { print("清除了任务"); } }
第三步:重写GetxController生命周期方法
@override void onInit() { // TODO: implement onInit print("初始化"); super.onInit(); } @override void onReady() { // TODO: implement onReady print("加载完成"); super.onReady(); } @override void onClose() { // TODO: implement onClose print("控制器被释放"); super.onClose(); }
第四步:实例化控制器并使用
import 'package:flutter/material.dart'; import 'package:flutter_getx_example/GetXControllerLifecycleMethodsExample/MyLifecycleController.dart'; import 'package:get/get.dart'; class GetXControllerLifecycleMethodExample extends StatelessWidget { MyLifecycleController myLifecycleController = Get.put(MyLifecycleController()); @override Widget build(BuildContext context) { print("build"); return Scaffold( appBar: AppBar( title: Text("GetXControllerLifecycleMethod"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ GetBuilder( initState: (data) => myLifecycleController.increment(), dispose: (_) => myLifecycleController.cleanTask(), builder: (controller) { return Text( "计数器值为: ${myLifecycleController.count}", style: TextStyle(color: Colors.green, fontSize: 30), ); }, ), ], ), ), ); } }
控制台输出结果
flutter: 初始化 [GETX] Instance "MyLifecycleController" has been created [GETX] Instance "MyLifecycleController" has been initialized [GETX] Instance "GetMaterialController" has been created [GETX] Instance "GetMaterialController" has been initialized flutter: build flutter: 加载完成 flutter: build flutter: build
3.GetxController UniqueID(单独修改某一个地方的属性值,其余页面不变)
我们在开发的过程中会碰到一种情况,就是多个地方引用了同一个属性,但我只想单独更新某一个地方,那么就可以用UniqueID来进行区分。
第一步:应用程序入口设置
import 'package:flutter/material.dart'; import 'package:flutter_getx_example/GetXControllerUniqueIDExample/GetXControllerUniqueIDExample.dart'; import 'package:get/get.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return GetMaterialApp( title: "GetX", home: GetXControllerUniqueIDExample(), ); } }
第二步:定义控制器继承自GetxController,并且定义uniqueID
import 'package:get/get.dart'; class CountController extends GetxController { var count = 0; void increment() { count++; update(['jimi_count']); } }
第三步:实例化控制器并使用
import 'package:flutter/material.dart'; import 'package:flutter_getx_example/GetXControllerUniqueIDExample/CountConroller.dart'; import 'package:get/get.dart'; class GetXControllerUniqueIDExample extends StatelessWidget { CountController countController = Get.put(CountController()); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("GetX Obx---GetXController"), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ GetBuilder( builder: (controller) { return Text( "计数器值为: ${controller.count}", style: TextStyle(color: Colors.red, fontSize: 30), ); }, ), GetBuilder ( id: 'jimi_count', builder: (controller) { return Text( "计数器值为: ${controller.count}", style: TextStyle(color: Colors.green, fontSize: 30), ); }, ), SizedBox(height: 20,), ElevatedButton( onPressed: () => countController.increment(), child: Text("增加")) ], ), ), ); } }
注意事项:
改方法存在一定的弊端,具体弊端详见< GetView 只是对已注册的 Controller 有一个名为 controller 的getter的 const Stateless 的 Widget,如果我们只有单个控制器作为依赖项,那我们就可以使用 GetView ,而不是使用 StatelessWidget ,并且避免了写 Get.Find() 。 GetView的使用方法非常简单,只是要将你的视图层继承自 GetView 并传入需要注册的控制器并 Get.put() 即可,我们来看下代码演示:4.GetView介绍使用详情
4.1.GetView如何使用
4.2.GetView结合GetxController使用
第一步 、定义一个CountController
import 'package:get/get.dart';
class ShopController extends GetxController {
RxInt counter = 10.obs;
void onInit() {
print("onInit");
super.onInit();
}
@override
void onReady() {
print("onReady");
super.onReady();
}
@override
void onClose() {
print("onClose");
super.onClose();
}
void inc() {
counter.value++;
update();
}
}
第二步 、继承GetView并使用状态管理
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/shop.dart';
/**
* 1.必须继承get系统的GetView;
* 2.<>里面的为你所需要使用到的自定义类
*/
class ShopPage extends GetView
5.GetView Binding结合GetxController使用(不需要再写get.put)
第一步 、定义一个shopController
import 'package:get/get.dart';
class ShopController extends GetxController {
RxInt counter = 10.obs;
void onInit() {
print("onInit");
super.onInit();
}
@override
void onReady() {
print("onReady");
super.onReady();
}
@override
void onClose() {
print("onClose");
super.onClose();
}
void inc() {
counter.value++;
update(['first_count']);
}
}
第二步 、定义一个shop Binding
import 'package:get/get.dart';
import '../controllers/shop.dart';
class ShopControllerBinding implements Bindings{
@override
void dependencies() {
//其中
第三步 、路由中绑定Binding
import 'package:get/get.dart';
import '../pages/tabs.dart';
import '../pages/shop.dart';
import '../binding/shop.dart';
import '../middlewares/shopMiddleware.dart';
class AppPage {
static final routes = [
GetPage(name: "/", page: () => const Tabs()),
GetPage(
name: "/shop",
page: () => const ShopPage(),//路由
binding: ShopControllerBinding(),//全局的getxController
middlewares: [ShopMiddleWare()]//中间件->作为页面跳转前的条件判断
),
];
}
第四步 、继承GetView并使用状态管理
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/shop.dart';
class ShopPage extends GetView