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。
  }
  @override
  Widget 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;});}
  @override
  Widget 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);//改变父级的值
  }
  @override
  Widget 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。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【每日一题】1969. 数组元素的最小非零乘积-2024.3.20

题目&#xff1a; 1969. 数组元素的最小非零乘积 给你一个正整数 p 。你有一个下标从 1 开始的数组 nums &#xff0c;这个数组包含范围 [1, 2p - 1] 内所有整数的二进制形式&#xff08;两端都 包含&#xff09;。你可以进行以下操作 任意 次&#xff1a; 从 nums 中选择两…

Java与Go:指针

在计算机内存中&#xff0c;每个变量都有一个唯一的地址&#xff0c;指针就是用来保存这个地址的变量。通过指针&#xff0c;我们可以间接地访问和修改存储在该地址处的数据。今天我们来聊一聊Java和Go指针&#xff0c;预告一下&#xff0c;我们需要借助C语言做一些小小的比较。…

SQL61 检索并列出已订购产品的清单

order by cust_name 升序 order by cust_name desc 降序

计算机网络面经-什么是IPv4和IPv6?

前言 Internet协议&#xff08;IP&#xff09;是为连接到Internet网络的每个设备分配的数字地址。它类似于电话号码&#xff0c;是一种独特的数字组合&#xff0c;允许用户与他人通信。IP地址主要有两个主要功能。首先&#xff0c;有了IP&#xff0c;用户能够在Internet上被识别…

腾讯云GPU云服务器简介_GPU服务器购买指南_GPU云服务器操作

腾讯云GPU服务器是提供GPU算力的弹性计算服务&#xff0c;腾讯云GPU服务器具有超强的并行计算能力&#xff0c;可用于深度学习训练、科学计算、图形图像处理、视频编解码等场景&#xff0c;腾讯云百科txybk.com整理腾讯云GPU服务器租用价格表、GPU实例优势、GPU解决方案、GPU软…

One Nav一为主题最新V4.1602版官方正版学习版

在现今数字化快速发展的时代&#xff0c;信息的获取与整合变得愈发重要。为此&#xff0c;我们推出了一款功能强大且独具特色的WordPress主题——One Nav&#xff0c;又称“一导航主题”。这款主题集网址、app、资源、书籍、影视等内容导航于一体&#xff0c;为用户提供了一站式…

java NIO群聊系统

demo要求&#xff1a; 1&#xff09;编写一个NIO群聊系统&#xff0c;实现服务器端和客户端之间的数据简单通讯&#xff08;非阻塞&#xff09; 2&#xff09;实现多人群聊 3&#xff09;服务器端&#xff1a;可以监测用户上线&#xff0c;离线&#xff0c;并实现消息转发功…

Open World Object Detection in the Era of Foundation Models

Open World Object Detection in the Era of Foundation Models 摘要介绍相关工作开放词汇物体检测开放世界目标检测类无关的目标检测3.真实世界目标检测基准3.1 数据集细节3.2 基准架构3.3 什么是一个未知对象4. 利用基准模型用于开放世界目标检测4.1 背景4.2 属性生成4.3 属性…

汽车价格的回归预测项目

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 问题描述 汽车价格预测是一个旨在预估二手车市场中汽车售价的问题。这个问题涉及到分析各种影响汽车价格的因素&#xff0c;如品牌、车龄、性能…

Git原理与使用(一)

目录 前言 版本控制器 Linux下的Git的安装 Git的基本操作 创建Git本地仓库 配置Git 工作区、暂存区、版本库 添加与提交 查看.git文件 前言 我们可能要写多个文档对一个产品进行描述&#xff0c;但是一般情况下我们可能要写多个文档&#xff0c;比如&#xff1a; 初…

图片编辑器中实现文件上传的三种方式和二进制流及文件头校验文件类型

背景 最近在 vue-design-editor 开源项目中实现 psd 等多种文件格式上传解析成模板过程中, 发现搞定设计文件上传没有使用 input 实现文件上传, 所以我研究了一下相关技术, 总结了以下三种文件上传方法 input 文件选择window.showOpenFilePicker 和 window.showDirectoryPicke…

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

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

RAFT: Adapting Language Model to Domain Specific RAG

预备知识 RAG介绍一文搞懂大模型RAG应用&#xff08;附实践案例&#xff09; - 知乎 (zhihu.com) RAG的核心理解为“检索生成” 检索&#xff1a;者主要是利用向量数据库的高效存储和检索能力&#xff0c;召回目标知识&#xff1b; 生成&#xff1a;利用大模型和Prompt工程…

Android Studio实现内容丰富的安卓校园公告助手

获取源码请点击文章末尾QQ名片联系&#xff0c;源码不免费&#xff0c;尊重创作&#xff0c;尊重劳动 093校园助手 1.开发环境 android stuido3.6 jak1.8 eclipse mysql tomcat 2.功能介绍 具体往下看第三节&#xff0c;功能截图 安卓端&#xff1a; 1.注册登录 2.校园公告列表…

微信小程序订阅消息(一次性订阅消息)

1、准备工作 登录微信公众平台–>订阅消息–>在公共模板库中选中一个模版–>将模版id复制&#xff0c;前后端都需要。 点击详情–>查看详细内容模版 复制给后端 2、相关api的使用 前端使用&#xff1a;wx.requestSubscribeMessage wx.openSetting wx.getSetti…

[Qt学习笔记]QPushButton点击事件和长按事件使用功能

1、背景介绍 在使用QPushButton中&#xff0c;一般都在UI界面直接右键添加槽函数进入代码&#xff0c;很少去分析每个触发事件的功能&#xff0c;比如需要通过长按按钮来触发相应的操作&#xff0c;这里点击信号不可以达到预期的效果。 2、功能分析 首先分析QPushButton的点…

13014.Linux小知识点记录

文章目录 1 工具记录1.1 串口传输文件 1 工具记录 1.1 串口传输文件 打开SecureCRT的串口&#xff0c;执行rx 文件名指令从桌面将可执行文件&#xff0c;拖拽到串口终端即可

计算机三级——网络技术(综合题第二题)

路由器工作模式 用户模式 当通过Console或Telnet方式登录到路由器时&#xff0c;只要输入的密码正确&#xff0c;路由器就直接进入了用户模式。在该模式下&#xff0c;系统提示符为一个尖括号(>)。如果用户以前为路由器输入过名称&#xff0c;则该名称将会显示在尖指号的前…

opengl日记10-opengl使用多个纹理示例

文章目录 环境代码CMakeLists.txt文件内容不变。fragmentShaderSource.fsvertexShaderSource.vsmain.cpp 总结 环境 系统&#xff1a;ubuntu20.04opengl版本&#xff1a;4.6glfw版本&#xff1a;3.3glad版本&#xff1a;4.6cmake版本&#xff1a;3.16.3gcc版本&#xff1a;10.…

【Hadoop】Hadoop 编译源码

目录 为什么要源码编译Hadoop 编译源码1前期工作准备2jar 包安装2.1安装 Maven2.2安装 ant2.3安装 glibc-headers 和 g2.4安装 make 和 cmake2.5安装 protobuf2.6安装 openssl 库2.7安装 ncurses-devel 库 3编译源码3.1解压源码到 /opt/ 目录3.2 进入到 hadoop 源码主目录 /opt…