Flutter笔记:状态提升、控制器模式、GetX控制器和服务

Flutter笔记
状态提升、控制器模式、GetX控制器和服务

作者李俊才 (jcLee95):https://blog.csdn.net/qq_28550263
邮箱 :291148484@163.com
本文地址:https://blog.csdn.net/qq_28550263/article/details/134350949


【简介】本文聊一聊状态提升、控制器模式,GetX简单状态管理与响应式状态管理、GetX服务的相关思想和使用。


1. 概述

在Flutter中,状态管理是一个重要的主题,它涉及到如何存储和更新应用的数据以及如何在组件之间共享数据。状态管理的方法有很多种,包括状态提升、控制器模式、响应式编程等。每种方法都有其优点和适用场景。

状态提升是一种简单的状态管理方法,它通过将状态放在组件树的上层来实现状态的共享。但是,状态提升可能会导致组件树过于复杂,而且不适用于全局状态的管理。

控制器模式是一种更加灵活的状态管理方法,它通过将状态封装在控制器对象中,然后通过控制器来管理状态。控制器模式可以有效地管理全局状态,而且可以避免组件树过于复杂。

响应式编程是一种基于数据流的编程模式,它可以使状态的更新变得更加直观和易于理解。在响应式编程中,状态被视为数据流,组件可以监听数据流的变化并根据变化来更新自己。

GetX库提供了一种简单而强大的状态管理方法,它结合了控制器模式和响应式编程的优点。在GetX中,你可以创建一个继承自GetxController或GetxService的类来保存状态,然后在状态改变时调用update()方法或者使用.obs来通知所有监听这个状态的组件。

接下来,本文具体聊一聊状态提升、控制器模式,GetX简单状态管理与响应式状态管理、GetX服务的相关思想和使用。

2. 状态提升模式

2.1 状态提升的基本概念

状态提升(State Lifting) 是一种在 Flutter 中常用的状态管理模式,其基本思想是将状态放在需要这个状态的最小公共祖先组件上。这样,所有需要这个状态的子组件都可以通过祖先组件来访问和修改这个状态。例如,如果两个兄弟组件都需要访问和修改同一个状态,那么这个状态就应该放在它们的父组件上。

详细说来,这种模式通常用于处理以下情况:

  • 共享数据: 当多个组件需要访问和共享相同的数据时,将状态提升到这些组件的共同祖先组件中,以便它们可以共享数据。

  • 状态同步: 当某个状态需要被多个组件 修改 时,将这个状态提升到共同的父组件,由父组件负责管理和更新状态,然后将状态传递给子组件。

2.2 状态提升的缺陷

虽然状态提升模式在一些简单的场景下工作得很好,但是它也有一些缺陷。

由于每个组件都可以有自己的 内部状态(即局部状态),但当多个组件之间需要共享状态或协同工作时,状态提升就变得非常有用。但是在很多实际开发场景中并不是说你想提升状态就可以提升状态。显而易见的是,如果我们封装一个第三方组件库,不可能在组件发布后去库的使用者的代码里提升状态,但是使用者又有可能需要用到这些状态来控制我们所封装的组件,因此这种情况下状态提升并不是可行的解决方案。

另外一个方面,状态提升在 Flutter 中将很容易导致扩大刷新范围,浪费性能。因此需要一种有效的解决方案来弥补状态提升的不足。这个解决方案就是所谓的 控制器模式。

3. 控制器模式与状态管理

3.1 ChangeNotifier 与 ListerableBuilder(改变通知机制)

顾名思义,ChangeNotifier(改变通知) 可以在状态改变时通知其监听器,是一个可以混入到类中的类。你可以创建一个继承自 ChangeNotifier 的类来保存状态,然后在状态改变时调用 notifyListeners() 方法来通知所有监听这个状态的组件

其中需要指出的是,ChangeNotifier 实现了 Listenable 接口,用于提供一个可以发送变化通知的对象:

  • Listenable 接口定义了两个方法:addListener()removeListener(),这两个方法分别用于添加和移除监听器。任何实现了 Listenable 接口的对象都可以被其他对象监听,当 Listenable 对象的状态发生变化时,它可以通知所有的监听器。(实际上是 发布-订阅模式-见《发布订阅模式原理及其应用》,地址:https://jclee95.blog.csdn.net/article/details/129930814)

  • ChangeNotifierListenable 的一个具体实现,它提供了一个 notifyListeners() 方法,可以在状态改变时调用,以通知所有的监听器。ChangeNotifier 内部维护了一个监听器列表,当你调用 addListener() 方法时,监听器会被添加到这个列表中;当你调用removeListener() 方法时,监听器会从这个列表中移除。

例如,你可以创建一个 Counter 类,它继承自 ChangeNotifier,并有一个 count 状态和一个 increment 方法:

class Counter with ChangeNotifier {int _count = 0;int get count => _count;void increment() {_count++;notifyListeners();}
}

然后,你可以使用 ListenableBuilder监听 这个 Counter 对象。ListenableBuilder 函数会在每次 ChangeNotifier 调用 notifyListeners() 以实现 Counter 对象的 状态改变 时被调用。

class CounterWidget extends StatelessWidget {final Counter counter;CounterWidget({ this.counter});Widget build(BuildContext context) {return ListenableBuilder(listenable: counter,builder: (context, _) {return Text('Count: ${counter.count}');},);}
}

其中:

  1. 当你创建一个 ListenableBuilder 并传入一个 Listenable 对象(ChangeNotifierListenable 的实现)时,ListenableBuilder 会将自己添加到 Listenable 的监听器列表中。

  2. Listenable 对象的状态改变并调用 notifyListeners() 方法时,所有的监听器(包括ListenableBuilder)都会收到通知。

  3. ListenableBuilder 收到通知时,它会调用其builder函数来重建子组件。builder函数会接收到当前的 BuildContextListenable 对象,以及一个可选的 child 参数,然后返回一个新的 Widget

  4. ListenableBuilder 会将 builder 函数返回的 新 Widget 显示在屏幕上,从而更新UI的效果。

功能上 ListenableBuilderAnimationBuilder 是一样的。

因此在封装组件时,经常使用控制器来命名这个基于 改变通知(发布订阅) 的类:

/// 计数器控制器类
/// 
/// - 存储计数器状态;
/// - 提供改变状态的方法作为外部改变状态的接口。
class CounterController with ChangeNotifier {int _count = 0;int get count => _count;void increment() {_count++;notifyListeners();}
}

3.2 控制器模式是如何工作的

控制器模式是一种更加灵活的状态管理模式。在这种模式下,状态被保存在一个或多个控制器对象中,而不是直接保存在组件中。组件可以创建和管理这些控制器对象,也可以通过它们来访问和修改状态。

当状态改变时,控制器会通知所有监听这个状态的组件,这样这些组件就可以根据新的状态来更新自己。因为状态被保存在控制器中,所以它可以被任何可以访问到这个控制器的组件共享,这使得状态管理变得更加灵活和高效。

状态提升时,我们仅仅时把状态放在了层级更高的组件,但是控制器模式将状态放在一个独立的类中,这个类不仅用于存储状态,也提供相应的改变方法。实际上,上一节混入了 ChangeNotifierCounter 类就是一个控制器。

为什么控制器要混入或继承于ChangeNotifier?

因为我们的目标是状态改变后能够及时的更新UI。

Flutter 中,提供 ChangeNotifier - ListenableBuilder 机制:

前者用于控制器类——因为控制器类是状态改变的源:

  • 所有改变状态变量的操作被封装在控制器类中,以接口的形式暴露给外部使用;
  • 在修改的接口方法中,每当数据更改数据后调用 notifyListeners()方法完成通知监听器。

后者用于 build 方法的某个局部需要依赖于数据更新的UI中:

  • ListenableBuilder 的 builder 方法在监听器被通知后使用新的数据进行重构;

4. GetxController 与控制器模式

4.1 简单状态管理

GetX 库中,你可以创建一个继承自 GetxController 的类来保存状态,然后在状态改变时调用 update() 方法来通知所有监听这个状态的组件。

class CounterController extends GetxController {int count = 0;void increment() {count++;update();}
}

然后,你可以在UI类中使用 GetBuilder 来监听这个 CounterController 对象。当 CounterController 对象的状态改变时,GetBuilder 会自动重建,从而更新UI。

class CounterWidget extends StatelessWidget {Widget build(BuildContext context) {final counterController = Get.put(CounterController());return Scaffold(appBar: AppBar(title: Text('Counter')),body: Center(child: GetBuilder<CounterController>(builder: (controller) => Text('Count: ${controller.count}'),),),floatingActionButton: FloatingActionButton(child: Icon(Icons.add),onPressed: counterController.increment,),);}
}

仅仅从使用的角度上看:

  1. 在控制器类中:
  • 从继承于 ChangeNotifier 变成了继承于 GetxController
  • 从使用 notifyListeners(); 函数通知更新UI变成了 使用 update(); 函数更新UI。
  1. 在 UI 的build函数的需要更新处:
  • 从使用 ListenableBuilder 类包括需要依赖数据更新部分改成了使用 GetBuilder 类。

4.2 响应式状态管理

GetX的响应式状态管理提供了一种用起来更加方便地方式——不再需要使用 update() 方法。但是这意味着需要在每一个变量上做些手脚——添加.obs 变成“响应式变量”。

在GetX库内部,.obs 是一个扩展方法,它可以用于将普通的Dart值(如String、int、double等)转换为可观察的 Rx 对象。——这是因为在 Dart 语言中,你可以通过 扩展(extension) 语法来为已有的类型添加新的方法或属性。GetX库就使用了这个特性,为Dart的基本类型添加了 .obs 扩展方法。

所以,当你在一个String、int、double等值后面调用.obs时,你实际上是在创建一个新的Rx对象,这个对象的初始值就是这个值。例如,var count = 0.obs;就等价于var count = Rx(0);。

Rx对象是可观察的,你可以使用value属性来获取或设置它的值,也可以使用addListener()方法来添加监听器。当Rx对象的值改变时,所有的监听器都会收到通知。这就是GetX的响应式状态管理的基础。

基于响应式转台管理,控制器类调整为:

// 控制器类
class CounterController extends GetxController {RxInt count = 0.obs;void increment() {count++;}
}

而在UI部分,也不再使用 ChangeNotifierListenableBuilder或者简单状态管理的GetBuilder ,而是由 Obx进行包裹,例如:

// 界面组件
class CounterView extends StatelessWidget {final CounterController controller = Get.put(CounterController());Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Counter App with GetX'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Obx(() => Text('Count: ${controller.count}')),ElevatedButton(onPressed: () => controller.increment(),child: Text('Increment'),),],),),);}
}

5. GetxService 与全局状态管理

实际上 GetxService 和 的功能是很像的,我们可以将控制器类改为一个服务类,比如计数器的例子:

class CounterService extends GetxService {var count = 0.obs;void increment() {count.value++;}
}

然后,你可以在UI类中使用Obx来监听这个CounterService对象。当CounterService对象的状态改变时,Obx会自动重建,从而更新UI:

class CounterWidget extends StatelessWidget {Widget build(BuildContext context) {final counterService = Get.put(CounterService());return Scaffold(appBar: AppBar(title: Text('Counter')),body: Center(child: Obx(() => Text('Count: ${counterService.count.value}')),),floatingActionButton: FloatingActionButton(child: Icon(Icons.add),onPressed: counterService.increment,),);}
}

从使用上看没有什么不同。但是GetxService是一个长生命周期的类,一旦被创建,就会一直存在,直到应用被关闭或者你手动调用Get.reset()。

6. GetxController 和 GetxService的比较

GetxControllerGetxService 都是 GetX 库中的核心组件,它们都有生命周期方法(onInit(), onReady(), onClose()),并且都可以用于 管理状态和依赖。但是,它们的主要区别在于它们的存活时间和用途不一样。

6.1 GetxController 的应用场景

GetxController 是一个用于状态管理的类,它的实例可以通过 Get.put()Get.lazyPut()Get.putAsync()Get.create() 等方法创建并绑定到一个生命周期。当与绑定的页面不再需要时, GetX会自动删除GetxController的实例 以释放内存。因此,GetxController通常用于页面和小部件的 局部状态管理,例如用户界面的交互、表单状态、主题颜色等。

6.2 GetxService 的应用场景

GetxService 是一个长期存活在应用中的类,它的实例一旦被创建,就不会被自动删除,除非你手动调用Get.reset()。因此,GetxService 通常用于需要全局访问和长期存在的服务,例如用户认证、数据库操作、网络请求等。

最常见的就是认证和权限,者往往是整个应用生命周期都需要的,因此我们经常定义各异认证服务,用于处理应用中与认证相关的状态:

class AuthService extends GetxService {Future<AuthService> init() async {// Initialize your class}
}

在GetX中,Get.reset()方法用于清除所有的依赖项,包括GetxController和GetxService的实例。这个方法通常在你需要完全重置应用状态时使用,例如用户注销登录时。

然而,如果你有一个场景需要重置CounterService的状态,例如用户注销登录时,你可以调用Get.reset()。例如:

void userLogout() {// ...其他的注销逻辑...// 重置应用状态Get.reset();
}

需要指出的是,Get.reset()会清除所有的依赖项,包括所有的GetxController和GetxService的实例。如果你只想重置CounterService的状态,你可以在CounterService中添加一个重置状态的方法,然后在需要的地方调用这个方法。比如:

void userLogout() {// ...其他的注销逻辑...// 重置CounterService的状态Get.find<CounterService>().reset();
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/139678.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

450. 删除二叉搜索树中的节点

题目描述 给定一个二叉搜索树的根节点 root 和一个值 key&#xff0c;删除二叉搜索树中的 key 对应的节点&#xff0c;并保证二叉搜索树的性质不变。返回二叉搜索树&#xff08;有可能被更新&#xff09;的根节点的引用。 一般来说&#xff0c;删除节点可分为两个步骤&#x…

ubuntu cp210x(USB转串口)驱动安装教程

ubuntu cp210x&#xff08;USB转串口&#xff09;驱动安装 前言1. 驱动下载2. 驱动编译和安装3. 可能遇到的问题及解决办法3.1 第一种解决方案&#xff1a;检查当前是否已有CP210x.ko驱动3.2 第二种解决方案&#xff1a;修改驱动文件&#xff0c;编译 前言 CP2108 是一款高度集…

【Phoenix】目录结构

当我们通过 mix phx.new 命令生成一个新的Phoenix应用时&#xff0c;它会创建以下目录结构&#xff1a; ├── _build ├── assets ├── config ├── deps ├── lib │├── hello │├── hello.ex │├── hello_web │└── hello_web.ex ├── priv └── …

uniapp中picker 获取时间组件如何把年月日改成年月日默认时分秒为00:00:00

如图所示&#xff0c;uniapp中picker组件的日期格式为&#xff1a; 但后端要 2023-11-08 00:00:00格式 如何从2023-11-08转化为 2023-11-08 00:00:00&#xff1a;&#x1f447; const date new Date(e.detail.value);//"2023-11-17" date.setHours(0, 0, 0); // 2…

C语言从入门到精通之【数据类型和关键字】

数据类型在程序使用之前已经预先设定好了&#xff0c;在整个程序的运行过程中没有变化&#xff0c;这些称为常量&#xff08;constant&#xff09;。其他数据类型在程序运行期间可能会改变或被赋值&#xff0c;这些称为变量&#xff08;variable&#xff09;。 变量类型有几种…

复盘一个诡异的Bug

该Bug的诡异之处在于这是一个由多种因素综合碰撞之后形成的综合体。纵观整个排查过程&#xff0c;一度被错误的目标误导&#xff0c;花费大量功夫后才找到问题点所在&#xff0c;成熟的组件在没有确凿证据之前不能随意怀疑其稳定性。 前言 此前在接入两台粒径谱仪&#xff08;…

Android sqlite 使用简介

进行Android应用开发时经常会用到数据库。Android系统支持sqlite数据库&#xff0c;在app开发过程中很容易通过SQLiteOpenHelper使用数据库&#xff0c;SQLiteOpenHelper依赖于Context对象&#xff0c;但是基于uiatomator1.0和Java程序等无法获取Context的应用如何使用数据库呢…

html与django实现多级数据联动

html与django实现多级数据联动 1、流程 1、进入页面后先获取年级数据 2、选择年级后获取院级数据 3、选择院级后获取层次数据 4、选择层次数据后获取专业数据 2、html代码 <p style"margin-top: 10px;"><label>年级</label><select id"…

什么是微服务自动化测试?

什么是微服务&#xff1f; 微服务 - 也称为微服务架构 - 是一种构建方式&#xff0c;它将应用程序构建为松散耦合服务的集合&#xff0c;具有完整的业务功能。微服务架构允许连续交付/部署大型复杂应用程序。本文将概述自动微服务测试工具和最佳实践。 它还使组织能够发展其技…

Ubuntu诞生已经19年了

导读2004 年 10 月 20 日&#xff0c;Ubuntu 4.10 正式发布&#xff0c;代号‘Warty Warthog’。 2004 年 10 月 20 日&#xff0c;Ubuntu 4.10 正式发布&#xff0c;代号‘Warty Warthog’。 ▲ Ubuntu 4.10 与最新版 Ubuntu 23.10 的对比 作为 Ubuntu 第一个版本&#xff0…

heygen 2usd一分钟的视频,到底该怎么赚回成本?

内容来源&#xff1a;heroooooh ​最近一直在琢磨heygen 2usd一分钟的视频&#xff0c;到底该怎么赚回成本&#xff0c;现在有了以下几个使用Heygen赚钱的思路&#xff0c;供执行力强的朋友参考 1、国外搬国内&#xff0c;基本上就是做流量。 比如把国外的英文教程搬运国内&am…

Postman基本页面和请求/响应页签介绍

近期在复习Postman的基础知识&#xff0c;在小破站上跟着百里老师系统复习了一遍&#xff0c;也做了一些笔记&#xff0c;希望可以给大家一点点启发。 一、Postman的界面介绍 Home主页、Workspace工作空间、Collections集合、Environments环境变量、Mock Server虚拟服务器、Mo…

Direct3D粒子系统

粒子和点精灵 粒子(是种微小的物体,在数学上通常用点来表示其模型。所以显示粒子时,使用点图元(由 D3 DPRIMITIVETYPE类型的D3 DPT POINTLIST枚举常量表示)是一个很好的选择。但是光栅化时,点图元将被映射为一个单个像素。这样就无法为我们提供很大的灵活性,因为实际应用…

spring boot 中@Value读取中文配置时乱码

1.spring boot 读取application.properties 该文件是iso8859编码 如果是直接写中文 读取时会乱码 显示成?? 必须得转ascii码才能正常显示 其他方法测试也不行 Value("${apig.order.tiaokong.qianzi}") private String apigOrderTiaokongQianzi;

【CAN总线】从数字设计的角度分析CAN协议2—CAN帧格式

前面简单介绍了CAN的概述: 【CAN总线】从数字设计的角度分析CAN协议1—CAN概述 文章目录 1.CAN发送器和接收器的定义(1)发送器(Transmitter)(2)接收器(Receiver)2.帧格式(1)数据帧(Data Frame)帧起始(SOF)仲裁场控制场数据场CRC场应答场帧结尾(EOF)(2)远程…

Spring面试题:(六)Spring注解开发原理

ioc过程 发现只要将bean注册到BeanDefinitionMap中就可以创建bean对象 如何将xml配置的bean注册到BeanDefinitionMap 通过注解注册的bean过程一样 注册bean的接口&#xff1a;BeanDefinitionRegistryPostProcessor 开启组件扫描的两种方式&#xff1a;xml和注解 xml方式…

2020年五一杯数学建模B题基于系统性风险角度的基金资产配置策略分析解题全过程文档及程序

2020年五一杯数学建模 B题 基于系统性风险角度的基金资产配置策略分析 原题再现 近年来&#xff0c;随着改革开放程度的不断提高&#xff0c;我国经济运行中的各种风险逐渐暴露并集中传导和体现于金融领域。党的“十九大”报告提出“守住不发生系统性金融风险的底线”要求&am…

【云备份项目两万字总结】服务端篇 -----附源码

项目总结 整体回顾逐步实现utill.hppconfig.hppdata.hpphot.hppservice.hpp 代码 整体回顾 服务端的目标是&#xff1a; 对客户端的请求进行处理管理客户端上传的文件 于客户端进行数据交换&#xff0c;我们需要引入网络&#xff0c;所以我们引入第三方库----httplib.h库&am…

【见缝插针】射击类游戏-微信小程序项目开发流程详解

还记得小时候玩过的见缝插针游戏吗&#xff0c;比一比看谁插得针比较多&#xff0c;可有趣了&#xff0c;当然了&#xff0c;通过它可以训练自己的手速反应&#xff0c;以及射击水平&#xff0c;把握时机&#xff0c;得分越高就越有成就感&#xff0c;相信小朋友们会喜欢它的&a…

【OpenCV】计算视频的光流并跟踪物体calcOpticalFlowPyrLK

一、介绍 计算光流可以使用OpenCV的calcOpticalFlowPyrLK方法&#xff0c;cv2.calcOpticalFlowPyrLK是OpenCV库中的一个函数&#xff0c;用于计算稀疏光流。它实现的是Lucas-Kanade方法&#xff0c;这是一种常用的光流计算方法。 光流是图像中物体运动的近似表示&#…