Flutter中GetX系列六--GetxController/GetView使用详情

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),            //     );            //   },            // ),                        // 第三种==>主动的            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生命周期方法

@overridevoid onInit() {  // TODO: implement onInit  print("初始化");  super.onInit();}@overridevoid onReady() {  // TODO: implement onReady  print("加载完成");  super.onReady();}@overridevoid 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 initializedflutter: buildflutter: 加载完成flutter: buildflutter: 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("增加"))          ],        ),      ),    );  }}

注意事项:
        改方法存在一定的弊端,具体弊端详见<>中的最后的注意事项.所以建议使用

4.GetView介绍使用详情

    GetView 只是对已注册的 Controller 有一个名为 controller 的getter的 const Stateless 的

Widget，如果我们只有单个控制器作为依赖项，那我们就可以使用 GetView ，而不是使用

StatelessWidget ，并且避免了写 Get.Find() 。

4.1.GetView如何使用

GetView的使用方法非常简单，只是要将你的视图层继承自 GetView 并传入需要注册的控制器并

Get.put() 即可，我们来看下代码演示:

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';class ShopPage extends GetView {  const ShopPage({super.key});  @override  Widget build(BuildContext context) {    //如果第一次使用还需要put    Get.put(CountController());    return Scaffold(      appBar: AppBar(        title: const Text('Title'),      ),      body: Center(        child: Column(          children: [            Obx(() => Text("${controller.counter}")),            const SizedBox(              height: 40,            ),            ElevatedButton(                onPressed: () {                  controller.inc();                },                child: const Text("shop counter+1"))          ],        ),      ),    );  }}

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() {      //其中可以不用写    Get.lazyPut(() => ShopController());  }}

第三步 、路由中绑定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 {  const ShopPage({super.key});  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: const Text('Title'),      ),      body: Center(child: Obx(() {        return Text("${controller.counter}");      })),    );  }}

来源地址：https://blog.csdn.net/eastWind1101/article/details/128019032