Getx库的使用

Getx库在flutter应用中的使用

obx

  • ObxGetX 库中结合 Rx 可观察者对象实现状态管理的 Widget 组件,使其在 Flutter 开发中实现状态管理变得更加快捷方便,让代码变得更加简洁。如下面的一个计数器的例子:

    先在 pubspec.yaml文件中添加get库依赖

    复制代码
    dependencies:
      flutter:
        sdk: flutter
    
      get: ^4.6.1
    import 复制代码
    import 'package:flutter/material.dart';
    import 'package:get/get.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class CounterPage extends StatelessWidget {
      // 创建一个可观察者对象,用于存储计数器的值
      var count = 0.obs;
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(title: const Text("Counter")),
            body: Center(
              child: Obx(() {
                // 在 Obx 小部件中使用数据
                return Text("${count.value}", style: const TextStyle(fontSize: 50));
              }),
            ),
            floatingActionButton: FloatingActionButton(
              child: const Icon(Icons.add),
              onPressed: () {
                // 更新数据:通过修改数据对象的值来增加计数器的值
                count += 1;
              },
            ),
          ),
        );
      }
    }
  • 我们创建了一个名为 CounterPage 的无状态小部件 StatelessWidget

  • 使用 .obs 创建了一个可观察者对象 count,它表示整数类型的计数器值。

  • build 方法中,我们返回了一个 Scaffold,其中包含了一个 AppBar、一个居中的文本小部件和一个浮动操作按钮。

  • 在居中的文本小部件中,我们使用 Obx 小部件来监听 count 的变化。当 count 的值发生变化时,Obx 会自动刷新界面,显示最新的计数器值。

路由

  • 默认导航

    // 默认的Flutter导航
    Navigator.of(context).push(
    context,
    MaterialPageRoute(
    builder: (BuildContext context) {
    return HomePage();
    },
    ),
    );

  • Get导航

在 GetX 库中,提供了多种路由跳转的方法,主要包括以下几种:

Get.to():跳转到新的页面,并将新页面压入堆栈。例如:

Get .to (NextPage () );

Get.off():跳转到新的页面,并将当前页面从堆栈中移除。例如:

Get .off (NextPage () );

Get.offAll():跳转到新的页面,并清空堆栈。例如:

Get .offAll (NextPage () );

Get.back():返回上一个页面。例如:

Get .back ();

Get.toNamed()Get.offNamed()Get.offAllNamed():使用命名路由进行跳转。例如:

Get .toNamed ('/next' );

put

在Getx框架中,Get.putGet.lazyPut都是用来向依赖注入系统添加实例的方法。

  • Get.put:这个方法会立即实例化对象,并将其存储在Getx的依赖注入系统中。这意味着无论是否有代码使用这个对象,它都会被创建。这对于你希望在应用启动时立即初始化的对象(例如,服务或控制器)非常有用。

  • Get.lazyPut:这个方法会在第一次使用对象时才实例化对象。这对于可能不会立即使用,或者可能根本不会使用的对象非常有用,因为它可以帮助节省内存和初始化时间。

    class Service {
    static Future<void> init() async {
    // 添加 fenix: true 参数,会强制重新创建
    Get.lazyPut(() => ApiService());
    Get.lazyPut(() => StorageService());
    // 这个方法会异步地初始化一个AuthService对象,并等待它的init方法完成
    await Get.putAsync(() => AuthService().init());
    Get.lazyPut(() => NavigationController(), fenix: true);
    Get.lazyPut(() => AuthController(), fenix: true);
    Get.lazyPut(() => WordsService());
    Get.lazyPut(() => WordsController(), fenix: true);
    }
    }

相关推荐
军训猫猫头3 分钟前
1.如何对多个控件进行高效的绑定 C#例子 WPF例子
开发语言·算法·c#·.net
爱分享的程序员8 分钟前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘13 分钟前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
你这个年龄怎么睡得着的15 分钟前
为什么 JavaScript 中 'str' 不是对象,却能调用方法?
前端·javascript·面试
真的想上岸啊17 分钟前
学习C++、QT---18(C++ 记事本项目的stylesheet)
开发语言·c++·学习
南屿im22 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
明天好,会的24 分钟前
跨平台ZeroMQ:在Rust中使用zmq库的完整指南
开发语言·后端·rust
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
叹一曲当时只道是寻常1 小时前
vue中添加原生右键菜单
javascript·vue.js
丁劲犇1 小时前
用 Turbo Vision 2 为 Qt 6 控制台应用创建 TUI 字符 MainFrame
开发语言·c++·qt·tui·字符界面·curse