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

~废弃回忆 �༄

已于 2023-06-21 13:40:09 修改

阅读量7k

点赞数 1

分类专栏： Flutter 文章标签： flutter GetxController 数据更新事件监听改变唯一的值 GetView使用详情

于 2022-11-24 15:23:19 首次发布

本文链接：https://blog.csdn.net/eastWind1101/article/details/128019032

版权

Flutter 专栏收录该内容

67 篇文章 16 订阅

订阅专栏

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<MyController>(
            //   init: MyController(),
            //   builder: (controller) {
            //     return Text(
            //       "我的名字是 ${controller.teacher.name}",
            //       style: TextStyle(color: Colors.green, fontSize: 30),
            //     );
            //   },
            // ),
            /*
            Obx和GetX<MyController>和GetBuilder<MyController>的区别:
              Obx的Controller作用域是在外面的,而GetX<MyController>的Controller作用域只限于当前函数体里面的.
              GetBuilder<MyController>和GetX<MyController>的区别在于GetBuilder<MyController>的性能会更高一点
               
             */
            // 第三种==>主动的
            GetBuilder<MyController>(
              //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<MyController>().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<MyLifecycleController>(
              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<CountController>(
              builder: (controller) {
                return Text(
                  "计数器值为: ${controller.count}",
                  style: TextStyle(color: Colors.red, fontSize: 30),
                );
              },
            ),
            GetBuilder<CountController>(
              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("增加"))
          ],
        ),
      ),
    );
  }
}

注意事项:
改方法存在一定的弊端,具体弊端详见<<Flutter中GetX系列七--依赖注入(put,lazyPut,putAsync)、Binding(统一初始化)>>中的最后的注意事项.所以建议使用<Flutter中GetX系列七中的方法.

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';

/**
 * 1.必须继承get系统的GetView;
 * 2.<>里面的为你所需要使用到的自定义类
 */
class ShopPage extends GetView<ShopController> {
  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() {  
    //其中<ShopController>可以不用写
    Get.lazyPut<ShopController>(() => 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<ShopController> {
  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}");
      })),
    );
  }
}