当前位置: article > 正文

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

作者：菜鸟追梦旅行 | 2024-03-17 18:02:57

踩

getxcontroller

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}");
      })),
    );
  }
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/257366

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

1.GetxController介绍

第一步：应用程序入口设置

第二步：定义控制器继承自GetxController

第三步：实例化控制器并使用

2.GetxController生命周期

第一步：应用程序入口设置

第二步：定义控制器继承自GetxController

第三步：重写GetxController生命周期方法

第四步：实例化控制器并使用

控制台输出结果

3.GetxController UniqueID(单独修改某一个地方的属性值,其余页面不变)

第一步：应用程序入口设置

第二步：定义控制器继承自GetxController，并且定义uniqueID

第三步：实例化控制器并使用

4.GetView介绍使用详情

4.1.GetView如何使用

4.2.GetView结合GetxController使用

第一步 、定义一个CountController

第二步 、继承GetView并使用状态管理

5.GetView Binding结合GetxController使用(不需要再写get.put)

第一步 、定义一个shopController

第二步 、定义一个shop Binding

第三步 、路由中绑定Binding

第四步 、继承GetView并使用状态管理

第一步、定义一个CountController

第二步、继承GetView并使用状态管理

第一步、定义一个shopController

第二步、定义一个shop Binding

第三步、路由中绑定Binding

第四步、继承GetView并使用状态管理