Flutter 全能型选手GetX —— 状态管理

这篇具有很好参考价值的文章主要介绍了Flutter 全能型选手GetX —— 状态管理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用篇
  • 简介
  • 依赖管理
  • 路由管理
  • 状态管理
  • 主题配置
  • 多语言配置
  • 离线缓存
  • 网络请求
原理篇
  • Flutter 从源码看Getx的依赖原理

一、简介

  • Obx:响应式状态管理,当数据源变化时,将自动执行刷新组件的方法
  • GetX:响应式状态管理,当数据源变化时,将自动执行刷新组件的方法
  • GetBuilder:简单状态管理,当数据源变化时,需要手动执行刷新组件的方法,此状态管理器内部实际上是对StatefulWidget的封装,占用资源极少!

二、GetBuilder

我们在controller获取数据之后,就会调用controller的update方法来更新界面。如果我们需要刷新对应的界面,就可以
使用GetBuilder将需要Builder的页面包起来如下:

 GetBuilder<FirstController>(builder: (controller) {
          return Text('第一页');
        })

在controller里如果直接update的话,默认刷新全部,但是如果我们只想刷新部分界面,可以直接在
GetBuilder的参数加个标识Id,然后和update里方法里的参数id相对应就行了。

   
class FirstController extends GetxController {
  int count = 0;

  updateData() {
    update(['first']);
  }
}

GetBuilder<FirstController>(
              builder: (controller) {
                return Text('第一页');
              },
              id: 'first',
            )	

三、ValueBuilder

简化它的工作原理是使用采用更新值的回调。StatefulWidget.setState

 ValueBuilder<bool>(
  initialValue: false,
  builder: (value, updateFn) => Switch(
    value: value,
    onChanged: updateFn, // same signature! you could use ( newValue ) => updateFn( newValue )
  ),
  // if you need to call something outside the builder method.
  onUpdate: (value) => print("Value updated: $value"),
  onDispose: () => print("Widget unmounted"),
),

四、Getx、Obx和ObxValue

与ValueBuilder类似,但这是Reactive版本,您传递一个Rx实例(还记得神奇的.obs吗?)并自动更新…是不是很棒?
obs是Getx提供的一个用来修饰变量的。被obs修饰过的变量,可以不使用GetBuilder,但是需要使用另一个widget,那就是obx,来包裹需要刷新的widget,不需要我们手动去update。

 Obx(() => Text('第一页:${controller.count}')))
 
 class FirstController extends GetxController {
  Rx<int> count = 0.obs;

  updateData() {
    // update(['first']);
    count.value++;
  }
}

另外一种形式的写法ObxValue 如下:

ObxValue(() => Text('第一页:${controller.count}'),count.obs)

当然Getx还提供了一个响应式的widget就是Getx,它和Obx都是响应式widget不需要手动update。


class SimplePage extends StatelessWidget {
  const SimplePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Get.put(SimpleController());
    return GetX<SimpleController>(builder: (controller) {
      return Scaffold(
        appBar: AppBar(title: const Text('Simple')),
        body: GestureDetector(
          onTap: () {
            controller.increment();
          },
          child: Center(
            child: Text('${controller.counter.value}'),
          ),
        ),
      );
    });
  }
}

class SimpleController extends GetxController {
  Rx<int> counter = 0.obs;

  void increment() {
    counter.value++;
  }
}

class GetX<T extends DisposableInterface> extends StatefulWidget {
  final GetXControllerBuilder<T> builder;
  final bool global;

  // final Stream Function(T) stream;
  // final StreamController Function(T) streamController;
  final bool autoRemove;
  final bool assignId;
  final void Function(GetXState<T> state)? initState,
      dispose,
      didChangeDependencies;
  final void Function(GetX oldWidget, GetXState<T> state)? didUpdateWidget;
  final T? init;
  final String? tag;

  const GetX({
    this.tag,
    required this.builder,
    this.global = true,
    this.autoRemove = true,
    this.initState,
    this.assignId = false,
    //  this.stream,
    this.dispose,
    this.didChangeDependencies,
    this.didUpdateWidget,
    this.init,
    // this.streamController
  });

当然要说Obx和Getx的区别的话,它提供参数比较多些,其中就包括了一下widget的生命周期。
如果我们想在widget生命周期做一些事,我觉得就可以 使用这个widget了。

五、GetView

GetX 提供了一个快捷的 Widget 用来访问容器中的 controller,即 GetView。GetView是一个继承 StatelessWidget的抽象类,
GetView 是一个const Stateless的Widget,如果我们只有单个控制器作为依赖项,那我们就可以使用GetView,而不是使用StatelessWidget,并且避免了写Get.Find()。
可以看到GetView的源码已经帮你写好了。

abstract class GetView<T> extends StatelessWidget {
  const GetView({Key? key}) : super(key: key);

  final String? tag = null;

  T get controller => GetInstance().find<T>(tag: tag)!;

  @override
  Widget build(BuildContext context);
}

然后控制器的注册要写在bindings中,可以看这里 Flutter 全能型选手GetX —— 依赖管理

六、GetWidget

GetWidget不是个const Stateless视图,它缓存了一个控制器。由于缓存,不能成为一个 “const Stateless”(因为缓存,所以不能成为一个const Stateless)。当我们使用Get.create(()=>Controller())会在每次调用时生成一个新的Controlle,Get.find()`
因为我们平时一般不需要缓存控制器,所以一般很少使用。

七、总结

一般来说,对于大多数场景都是可以使用响应式变量。但是每个响应式变量(.obs),都需要生成对应的 Stream,如果对象足够多,将生成大量的 Stream,必将对内存造成较大的压力,该情况下,就要考虑使用简单状态管理了文章来源地址https://www.toymoban.com/news/detail-433990.html

到了这里,关于Flutter 全能型选手GetX —— 状态管理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Flutter GetX使用

    下载地址: https://pub-web.flutter-io.cn/packages/get 导入依赖: 导入头文件: 创建全局数据 Counter ,继承 GetxController : 添加依赖: 添加组件 Obx() ,监听显示数据: 改变数据: 创建全局数据 MyController 继承 GetxController : 添加依赖: 添加组件 GetBuilderT : 在添加的依赖是全局的,考

    2024年02月16日
    浏览(36)
  • Flutter GetX的使用

    比较强大的状态管理框架 引入库: 实现一个计数器功能 代码如下: 1.状态管理 Get 有两种不同的状态管理器:简单状态管理器(我们称之为 GetBuilder)和反应式状态管理器(GetX/Obx) 使用 Get 进行响应式编程与使用 setState 一样简单。 要使其可观察,您只需在其末尾添加“.

    2024年02月05日
    浏览(43)
  • Flutter GetX使用详解

    GetX是一款功能强大且轻量级的Flutter状态管理和路由管理库。它提供了一种简单而强大的方式来构建Flutter应用程序,无需大量的模板代码。GetX不仅提供了状态管理和路由管理,还包括其他实用工具,如国际化和依赖注入。 在本文中,我们将深入探讨GetX的核心功能,并通过实

    2024年02月08日
    浏览(39)
  • flutter getx 简单使用教程

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

    2024年02月08日
    浏览(56)
  • 【Flutter】Flutter 状态管理 Provider 包使用概述

    🎉想要精通 Flutter,掌握更多技巧和最佳实践?好消息来了!👉 Flutter专栏-Flutter Developer 101 入门小册 正在等你!📚 🔍这里有你需要的所有 Flutter 学习资源,包括代码示例和深度解析。🎯 ⏰专栏内容持续更新,价格也会随之上涨。现在加入,享受最优惠的价格!💰 🚀现

    2024年02月09日
    浏览(42)
  • Flutter中GetX系列六--GetxController/GetView使用详情

    在实际的项目开发过程中,我们不可能把UI代码、业务逻辑都放在一起处理,这样对项目的架构、代码的可读性、后期的维护将会是致命的,好在 GetX 为我们提供了 GetxController , GetxController 主要的作用是用于UI代码与业务逻辑分离开来。 这里主要讲解使用 GetxController 动态获取

    2024年02月10日
    浏览(52)
  • 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:功能型组件(3)- 拖拽组件、缩放平移组件

    拖拽组件包含 Draggable 、 LongPressDraggable 和 DragTarget 。 Draggable 、 LongPressDraggable 为可拖拽的组件, LongPressDraggable 继承自 Draggable ,因此用法和 Draggable 完全一样,唯一的区别就是 LongPressDraggable 触发拖动的方式是长按,而 Draggable 触发拖动的方式是按下。 DragTarget 为拖拽组件的

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

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

    2024年02月05日
    浏览(43)
  • Flutter状态管理 — 探索Flutter中的状态

    前言 随着响应式编程的理念Flutter被大众所了解以来,状态管理一直是一个引人深思的话题。如果想要学习好Flutter这样的响应式的编程框架就一定是离不开状态管理的。我遇到过很多没有了解过响应式编程框架的,或者从事后端开发,自己想用Flutter写个app玩玩的朋友,一上来

    2024年02月09日
    浏览(41)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包