Flutter Widget:State 状态管理

响应式的编程框架永恒的主题——“状态(State)管理”

无论是在 React/Vue/Flutter 中讨论的问题和解决的思想都是一致的。

StatefulWidget的状态应该被谁管理?Widget本身?父 Widget ?都会?还是另一个对象?

下面是官方给出的一些原则:

  • 如果状态是用户数据如复选框的选中状态、滑块的位置,则最好由父 Widget 管理。
  • 如果状态是有关界面外观效果如颜色、动画,最好由 Widget 本身来管理。
  • 如果状态是不同 Widget 共享的,最好由它们共同的父 Widget 管理。

以下是管理状态的最常见的方法:

  • Widget 管理自身的状态。
  • Widget 管理子 Widget 状态。
  • 混合管理(父 Widget 和子 Widget 都管理状态)。

接下来,我们将通过例子说明管理状态的不同方式:创建一个盒子,当点击它时,盒子背景会在绿色与灰色之间切换。状态 _active确定颜色:绿色为true ,灰色为false。如图所示:


Widget管理自身状态

我们实现一个TapboxA,对应的状态类_TapboxAState :

class TapboxA extends StatefulWidget {TapboxA({Key? key}) : super(key: key);@override_TapboxAState createState() => _TapboxAState();
}
class _TapboxAState extends State<TapboxA> {bool _active = false;//确定盒子的当前颜色的布尔值。void _handleTap() {//更新_active,并调用setState()更新UI。setState(() { _active = !_active;});}Widget build(BuildContext context) {return GestureDetector(onTap: _handleTap,child: Container(child: Center(child: Text(_active ? 'Active' : 'Inactive',style: TextStyle(fontSize: 32.0, color: Colors.white),), ),width: 200.0,height: 200.0,decoration: BoxDecoration(color: _active ? Colors.lightGreen[700] : Colors.grey[600],),),);}
}

Widget管理子widget状态

父Widget管理状态并告诉其子Widget何时更新。👇示例中:TapboxB类继承StatelessWidget不管理任何状态。状态由父组件管理,因此它的父组件为StatefulWidget

class ParentWidget extends StatefulWidget {@override_ParentWidgetState createState() => _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {bool _active = false;//管理_active状态void _handleTapboxChanged(bool newValue) {setState(() {_active = newValue;});//当状态改变时,调用setState()更新UI。}@overrideWidget build(BuildContext context) {return Container(child: TapboxB( active: _active,onChanged: _handleTapboxChanged,),);}
}
class TapboxB extends StatelessWidget {TapboxB({Key? key, this.active: false, required this.onChanged}): super(key: key);final bool active;final ValueChanged<bool> onChanged;void _handleTap() {onChanged(!active);}Widget build(BuildContext context) {return GestureDetector(onTap: _handleTap,//回调父级类的函数child: Container(child: Center(child: Text(active ? 'Active' : 'Inactive',style: TextStyle(fontSize: 32.0, color: Colors.white),),),width: 200.0,height: 200.0,decoration: BoxDecoration(color: active ? Colors.lightGreen[700] : Colors.grey[600],),),);}
}

混合状态管理

对于一些组件来说,自身管理一些外观状态,而父组件管理一些其他外部状态。

在例子中,增加一个子widget点击是有高亮效果状态_highlight。当按下、抬起、或者取消点击时更新_highlight状态。

class ParentWidgetC extends StatefulWidget {@override_ParentWidgetCState createState() => _ParentWidgetCState();
}
class _ParentWidgetCState extends State<ParentWidgetC> {bool _active = false;//点击盒子_active状态改变,调用setState()更新UI。void _handleTapboxChanged(bool newValue) {setState(() { _active = newValue;});}@overrideWidget build(BuildContext context) {return Container(child: TapboxC(active: _active,onChanged: _handleTapboxChanged,),);}
}
class TapboxC extends StatefulWidget {TapboxC({Key? key, this.active: false, required this.onChanged}): super(key: key);final bool active;final ValueChanged<bool> onChanged;@override_TapboxCState createState() => _TapboxCState();
}
class _TapboxCState extends State<TapboxC> {bool _highlight = false;//管理_highlight 状态void _handleTapDown(TapDownDetails details) {setState(() {_highlight = true;});}void _handleTapUp(TapUpDetails details) {setState(() {_highlight = false;});}void _handleTapCancel() {setState(() { _highlight = false;});}void _handleTap() {widget.onChanged(!widget.active);//改变父级的值}@overrideWidget build(BuildContext context) {return GestureDetector(//手势:按下时添加绿色边框,当抬起时,取消高亮  onTapDown: _handleTapDown, // 处理按下事件onTapUp: _handleTapUp, // 处理抬起事件onTap: _handleTap,//点击onTapCancel: _handleTapCancel,//处理取消点击child: Container(child: Center(child: Text(widget.active ? 'Active' : 'Inactive',style: TextStyle(fontSize: 32.0, color: Colors.white),),),width: 200.0,height: 200.0,decoration: BoxDecoration(color: widget.active ? Colors.lightGreen[700] : Colors.grey[600],border: _highlight? Border.all(color: Colors.teal[700],width: 10.0,): null,),),);}
}

在这个案例中,我们复习了一个知识点:

Flutter Widget:StatefulWidget&StatelessWidget&State

一个 StatefulWidget 类可以有一个或多个State实例,而State实例只关联一个widget 实例。


全局状态管理

当应用中需要一些跨组件(包括跨路由)的状态需要同步时,上面介绍的方法便很难胜任了。

比如,我们有一个设置页,里面可以设置应用的语言,我们为了让设置实时生效,我们期望在语言状态发生改变时,App中依赖应用语言的组件能够重新 build 一下,但这些依赖应用语言的组件和设置页并不在一起,所以这种情况用上面的方法很难管理。

这时,正确的做法是通过一个全局状态管理器来处理这种相距较远的组件之间的通信。

目前主要有两种办法:

  1. 实现一个全局的事件总线。将语言状态改变对应为一个事件,然后在APP中依赖应用语言的组件的initState 方法中订阅语言改变的事件。当用户在设置页切换语言后,我们发布语言改变事件,而订阅了此事件的组件就会收到通知,收到通知后调用setState(...)方法重新build一下自身即可。
  2. 使用一些专门用于状态管理的包,如 Provider、Redux。

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

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

相关文章

webpack的热更新是如何做到的?

Webpack的热更新&#xff08;Hot Module Replacement&#xff0c;HMR&#xff09;技术是现代前端开发中极为重要的一部分&#xff0c;它极大地提高了开发效率&#xff0c;并让开发者能够实时地查看代码更改后的效果&#xff0c;而无需手动刷新页面。在本文中&#xff0c;我们将…

什么是晶振精度?对电路有什么影响?

晶振的精度是衡量其频率稳定性的重要指标&#xff0c;指在温度为25℃条件下晶振正常工作时输出的频率工差范围&#xff0c;通常以ppm(parts per million)表示即“PPM”。这意味着晶振的频率每百万分之一的偏差&#xff0c;如果以10ppm的精度为例&#xff0c;意味着每秒钟的工作…

VMware虚拟机硬盘容量扩容方法

扩容后不会影响原文件。亲测有效&#xff0c;高效便捷 - 在关机状态下&#xff0c;先在VM上直接扩容硬盘容量&#xff0c;输入扩容后的硬盘最大容量 注意&#xff0c;如果想在原硬盘上增加容量&#xff0c;需要将原来的快照都删除 - 输入最大磁盘大小 运行虚拟机进入系统&…

VUE3实现一键复制功能

1.使用vueuse/core (安全策略的问题&#xff0c;非https网页下面不让你拷贝) vueuse/core是一个为 Vue.js 提供常用功能和实用工具函数的库。它是基于 Composition API&#xff0c;为开发者提供了一组易于使用和可复用的函数 http网页使用解决方法:解决方法! 2.使用插件 n…

账号+密码+图片验证码认证

账号密码图片验证码认证 实现步骤 实现账号密码认证&#xff0c;执行流程如下 第一步: 对于验证码服务工程的生成验证码图片的接口在网关处需要放行,否则页面无法获取生成的验证码图片 /**临时放行所有请求 /auth/**认证服务地址 /content/open/**内容管理公开访问文件接口 …

C语言——自定义类型——结构体(从零到一的跨越)

目录 前言 1.什么是结构体 2.结构体类型的声明 2.1结构体的声明 2.2结构体的创建和初始化 2.3结构成员访问操作符 2.3.1结构体成员直接访问 2.3.2结构体成员的间接访问 2.4结构体变量的重命名 2.5结构体的特殊声明 2.6结构的自引用 3.结构体内存对齐 3.1对齐规则 3…

10:00面试,10:06就出来了,问的问题有点变态。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到8月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…

echart trigger 为 axis 的时候不显示 tooltip 解决办法

echart trigger 为 axis 的时候不显示 tooltip 解决办法 在项目 vitetsvue3 中使用 echart 显示了一个曲线图&#xff1a; 但当把图表的 trigger 设置成 axis 的时候&#xff0c;鼠标扫过并不显示具体的数值&#xff0c;如上图所示。 但 trigger item 的时候是正常的。 解决…

【virtio-networking 和 vhost-net 简介】

文章目录 Virtio 基本构建块Virtio spec 和 vhost 协议Vhost-net/virtio-net architectureVirtio-networking and OVS总结参考链接 Virtio 是作为虚拟机 (VM)访问简化device&#xff08;如块设备和网络适配器&#xff09;的 标准化开放接口而开发的。Virtio-net是一种虚拟以太…

【Linux】多线程概念 | POSIX线程库

文章目录 一、线程的概念1. 什么是线程Linux下并不存在真正的多线程&#xff0c;而是用进程模拟的&#xff01;Linux没有真正意义上的线程相关的系统调用&#xff01;原生线程库pthread 2. 线程和进程的联系和区别3. 线程的优点4. 线程的缺点5. 线程异常6. 线程用途 二、二级页…

excel 破解 保护工作簿及保护工作表

excel 破解 保护工作簿及保护工作表 对于这种 保护工作簿及保护工作表 不知道密码时&#xff0c;可以使用以下方法破解 保护工作簿破解 打开受保存的excel 右键点击sheet名称 —> 查看代码 复制以下代码&#xff0c;粘贴到代码区域 Sub 工作簿密码破解() ActiveWorkbook.…

C++ —— 类和对象(终)

目录 1. 日期类的实现 1.1 前置 和 后置 重载 1.2 >> 和 << 的重载 2. const 成员 3. 取地址及const取地址操作符重载 4. 再谈构造函数 4.1 构造函数体赋值 4.2 初始化列表 4.3 隐式类型转换 4.4 explict 关键字 5. static 成员 5.1 概念 5.2 特性 …

【Web】浅聊Hessian异常toString姿势学习复现

目录 前言 利用关键 调用分析 如何控制第一个字节 EXP 前言 Hessian CVE-2021-43297&#xff0c;本质是字符串和对象拼接导致隐式触发了该对象的 toString 方法&#xff0c;触发toString方法便可生万物&#xff0c;而后打法无穷也&#xff01; 这个CVE针对的是Hessian2I…

Follow-Your-Click——点选图像任意区域对象使用短提示语即可生成视频

简介 “I2V”&#xff08;图像到视频生成&#xff09;旨在将静态图像转换为具有合理动作的动态视频剪辑&#xff0c;在电影制作、增强现实和自动广告等领域有广泛应用。然而&#xff0c;现有的I2V方法存在一些问题&#xff0c;例如缺乏对图像中需要移动的部分的精准控制&#…

Chain of Verification-CoVe减少LLM中的幻觉现象

Chain-Of-Verification Reduces Hallucination In Large Language Models 在大型语言模型中&#xff0c;产生看似合理但实际上错误的事实信息&#xff0c;即幻觉&#xff0c;是一个未解决的问题。我们研究了语言模型在给出回答时进行深思以纠正错误的能力。我们开发了Chain-of…

深度解析 Android 系统属性

目录 Android系统属性 1.属性在哪里&#xff1f; 2.属性长什么样&#xff1f; 3.如何读写属性&#xff1a; 4.属性的作用 属性文件生成过程 如何添加系统属性 1.添加系统属性到 /system/build.prop 2.添加系统属性到 /vendor/build.prop 3.添加系统属性到 /product/b…

未来教育趋势:AI个性化培训如何推动企业与员工共赢

AI定制学习&#xff1a;重新定义个性化员工培训的未来 随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;我们正目睹并亲历了AI在培训领域所引发的根本性变革。AI技术的整合不仅革新了知识传递的模式&#xff0c;而且重新塑造了个性化学习的内涵。依托于尖端算…

《深入Linux内核架构》第2章 进程管理和调度 (4)

目录 2.6 CFS调度类 2.6.1 数据结构 2.6.2 CFS操作 2.6.3 队列操作 2.6.4 选择下一个进程 2.6.5 处理周期性调度器 2.6.6 唤醒抢占 2.6 CFS调度类 即完全公平调度类&#xff0c;用于调度普通进程。 2.6.1 数据结构 struct sched_class fair_sched_class {.next &am…

Restormer: Efficient Transformer for High-Resolution Image Restoration

Abstract 由于卷积神经网络&#xff08;CNN&#xff09;在从大规模数据中学习可概括的图像先验方面表现良好&#xff0c;因此这些模型已广泛应用于图像恢复和相关任务。最近&#xff0c;另一类神经架构 Transformer 在自然语言和高级视觉任务上表现出了显着的性能提升。虽然 T…

【安全类书籍-2】Web渗透测试:使用Kali Linux

目录 内容简介 作用 下载地址 内容简介 书籍的主要内容是指导读者如何运用Kali Linux这一专业的渗透测试平台对Web应用程序进行全面的安全测试。作者们从攻击者的视角出发,详细阐述了渗透测试的基本概念和技术,以及如何配置Kali Linux以适应渗透测试需求。书中不仅教授读者…