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

这篇具有很好参考价值的文章主要介绍了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<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() 即可,我们来看下代码演示:文章来源地址https://www.toymoban.com/news/detail-495756.html

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

到了这里,关于Flutter中GetX系列六--GetxController/GetView使用详情的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter getx 简单使用教程

    所以Flutter使用GetX真的很不错 为什么说什么GetX好用呢? 1、依赖注入 GetX是通过依赖注入的方式,存储相应的XxxGetxController;已经脱离了InheritedWidget那一套玩法,自己手动去管理这些实例,使用场景被大大拓展 2、跨页面交互 这绝对是GetX的一个优点!对于复杂的生产环境,跨

    2024年02月08日
    浏览(56)
  • flutter使用getx进行数据状态管理,实现页面响应式

    无论是什么样的应用,都还是需要最基础的数据来支撑的,而且不同的页面之间可能需要共享数据状态,这就显得数据状态管理非常有必要了。因为我这里使用了get依赖库,所以就可以直接在项目中使用getx来管理状态,不想再使用别的框架了。而且getx使用起来也挺方便的。

    2024年01月22日
    浏览(45)
  • Flutter系列(十一)实现商城首页和商品详情页

    本文介绍了使用Flutter实现商城首页和商品详情页的过程,包括瀑布流插件的使用、页面跳转动画特效、顶部搜索框等组件的添加。商城首页展示了商品列表和点击跳转到商品详情页的功能,商品详情页包括商品信息、评价模块和底部固定栏等内容。详细代码和解决问题的方法也在文章中提供。

    2024年02月09日
    浏览(49)
  • Flutter笔记:GetX模块中不使用 Get.put 怎么办

    Flutter笔记 GetX模块中不使用 Get.put 怎么办 作者 : 李俊才 (jcLee95):https://blog.csdn.net/qq_28550263 邮箱 : 291148484@163.com 本文地址 :https://blog.csdn.net/qq_28550263/article/details/134006728 依赖注入(Dependency Injection,DI)是一种编程模式,它旨在管理和注入类之间的依赖关系,以提高代码

    2024年02月08日
    浏览(49)
  • 【Flutter】Flutter GetX 传递参数

    在 Flutter 开发中,状态管理和数据传递是两个非常重要的环节。今天,我们将介绍一个强大的库——GetX,它可以帮助我们更高效地进行状态管理和数据传递。本文的重点包括: 了解 GetX 是什么以及它的主要功能 学习如何在 Flutter 中安装和使用 GetX 掌握如何使用 GetX 进行参数

    2024年02月05日
    浏览(43)
  • Flutter GetX 之 国际化

    今天给大家介绍一下 GetX 的国际化功能,在日常开发过程中,我们经常会使用到国际化功能,需要们的应用支持 国际化,例如我们需要支持 简体、繁体、英文等等。 上几篇文章介绍了GetX的 路由管理 和 状态管理,看到大家的点赞和收藏,还是很开心的,说明这两篇文章给大

    2024年01月19日
    浏览(62)
  • Flutter 状态管理之GetX库

      Flutter使用的是声明式UI,是通过状态去更新UI组件的,因此我们首先就要学习状态的使用。同样为了简化原本的状态使用,我们会使用Getx库。   之前说要写Flutter,一拖就是一年多,有些不好意思。现在都24年了,终于等到你,下面还是按照我们最属于的思路来吧。 首

    2024年01月23日
    浏览(46)
  • 对Flutter GetX的一些理解

    1.内部实现了 路由管理 ,相比目前主流的fluro框架更轻量,并且路由跳转无需上下文对象,支持自定义路由中间件和动态路由传参等功能。 2.提供两种简单灵活的实现状态管理的方式。 3.它内部实现了依赖注入,可以快速的获取到某个状态管理器( GetxController )。 4.在实际开发

    2023年04月08日
    浏览(33)
  • Flutter组件--TabBar使用详情(分段控制器)

      一个显示水平行选项卡的 Widget 。 通常创建为  AppBar  的  AppBar.bottom  部分并与  TabBarView  结合使用 在什么情况下使用TabBar 当你的app内容类别比较多的时候,我们常常会用到 TabBar ,例如网易新闻、京东、B站等,所以TabBar是一个使用非常频繁的组件。 步骤一:创建TabC

    2024年02月02日
    浏览(48)
  • Flutter GetX 实现 ChatGPT 简单聊天界面

    Flutter 是一款跨平台的移动应用开发框架,而 GetX 是 Flutter 中一种简单易用的状态管理和路由管理工具。本篇我们将使用 Flutter 和 GetX 实现一个简单的聊天界面,以与 ChatGPT 进行交互。 我们需要在 Flutter 项目中引入 GetX 库。在 pubspec.yaml 文件中添加以下依赖: 在 main 函数中添

    2023年04月17日
    浏览(86)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包