深度理解Flutter:有状态Widget与无状态Widget的详细对比

image.png

有状态Widget

什么是有状态Widget (StatefulWidget)

官方解释: 如果用户与 widget 交互,widget 会发生变化,那么它就是 有状态的
有状态的 widget 自身是可动态改变的(基于State)。 例如用户交互而改变 Widget 的 state。
Checkbox、Radio、Slider class - material library - Dart API、 InkWell、Form 和 TextField 都是有状态 widget,它们都是 StatefulWidget 的子类。

Widget 的 状态(state )保存在一个 State 的对象中。 StateWidget 是分离的,当 Widget状态变化时,State 对象调用 setState() 来通知框架去重绘 Widget

如何创建一个有状态Widget

实现一个有状态Widget需要创建两个类:

  • 一个 StatefulWidget 的子类,用来定义一个 widget 类。
  • 一个 State 的子类,包含该widget状态并定义该 widget 的 build() 方法。

我们可以通过 VSCode Flutter 命令补全来快速场景一个 有状态组件:

fstful

image.png

import 'package:flutter/material.dart';class FulStatePage extends StatefulWidget {const FulStatePage({super.key});_FulStatePageState createState() => _FulStatePageState();
}class _FulStatePageState extends State<FulStatePage> {Widget build(BuildContext context) {return Container();}
}
创建StatefulWidget 子类

上面代码中,我创建了一个 FulStatePage 类 继承了 StatefulWidget ,这时它是一个有状态的Widget
框架在 构建 Widget 时会调用 createState()创建管理state ,上面代码中,我们创建了 _FulStatePageState 实例.

class FulStatePage extends StatefulWidget {const FulStatePage({super.key});_FulStatePageState createState() => _FulStatePageState();
}

上面代码详细解释:

  1. FulStatePage类继承自StatefulWidget,表示这是一个具有可变状态的小部件。
  2. 构造函数const FulStatePage({super.key})接收一个可选参数key,用于在构建小部件时标识它。
  3. createState()方法返回一个与FulStatePage关联的状态对象,即_FulStatePageState
  4. _FulStatePageStateFulStatePage对应的状态类,它继承自State类
  5. _FulStatePageState中可以定义和管理该小部件的可变状态,并实现相关的业务逻辑。
  6. 通过重写build()方法,在其中构建小部件树来描述该小部件的外观和行为。
  7. FulStatePage类通常会被作为其他小部件的子部件使用,以提供动态交互和数据驱动的功能。

需要注意的是:

  • FulStatePage类的构造函数使用了const关键字,表示该小部件是不可变的,即其属性在构建后不能更改。
  • key参数用于在小部件树中唯一标识该小部件,以便在进行更新、重建等操作时进行准确定位。
  • createState()方法必须被重写,用于创建与该小部件关联的状态对象
  • 状态对象State负责管理和更新小部件的可变状态,并通过setState()方法通知Flutter框架进行重建。
创建State的子类

_FulStatePageState 类存储可不的信息。

class _FulStatePageState extends State<FulStatePage> {int num = 0; void setNum(){setState(() {++num})}Widget build(BuildContext context) {return Container();}
}

上面代码详细解释:

  1. _FulStatePageState类继承自State<FulStatePage>,表示它是FulStatePage小部件的状态类。
  2. build()方法中,可以构建并返回描述该小部件外观和行为的小部件树。
  3. 当状态发生变化时,build()方法会被调用,以重新构建小部件树来反映新的状态。

需要注意的是:

  • BuildContext context参数提供了与当前小部件相关的上下文信息,可以用于获取主题、媒体查询等。
  • build()方法中,可以使用各种小部件来构建界面,例如Container、Text、Image等。
  • 返回的小部件树描述了该小部件的外观和行为,可以包含其他小部件作为子部件。
  • 可以在build()方法中使用状态对象的属性来动态生成小部件,实现根据状态变化而改变界面的效果。
  • 避免在build()方法中进行耗时操作,以保持应用程序的响应性能。
  • 如果需要更新状态并触发重建,应使用setState()方法。这将通知Flutter框架重新调用build()方法。

无状态Widget StatelessWidget

在Flutter中,无状态小部件(Stateless Widget)是一种不包含可变状态的小部件。它们是不可变的,意味着一旦构建完成,它们的内容就不能再改变。
无状态小部件通过继承StatelessWidget类来创建,并重写build方法来描述其UI。build方法接收一个BuildContext参数,并返回一个小部件树,用于构建界面。

import 'package:flutter/material.dart';class CollectPage extends StatelessWidget {
const CollectPage({super.key,});Widget build(BuildContext context){return Container();}
}

什么时候使用无状态Widget

  1. 当小部件的内容是静态的,不需要根据外部事件或数据进行更新时,可以使用无状态小部件。例如,一个简单的文本展示小部件或一个静态的图标按钮。
  2. 当小部件的状态由父级管理时,可以使用无状态小部件。父级可以通过传递参数来控制子部件的外观和行为。
  3. 当小部件不需要响应用户交互时,可以使用无状态小部件。无状态小部件主要用于展示静态内容,而不涉及与用户的交互。
  4. 当性能要求较高时,无状态小部件比有状态小部件具有更轻量级的性能开销,因为它们不需要维护状态对象。所以,在性能要求较高的场景下,可以考虑使用无状态小部件。

例如一些纯静态展示内容 [文章列表,listview 显示的内容(不需要交互改变weidget), 一些按钮等]
总之,无状态小部件适用于静态内容、由父级管理状态、不需要响应用户交互或对性能要求较高的情况。

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

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

相关文章

校招社招,认知能力测验,③如何破解语言常识类测试题?

作为认知能力测评中的一个环节&#xff0c;语言常识类&#xff0c;是大概率的出现&#xff0c;不同的用人单位可能略有不同&#xff0c;语言是一切的基础&#xff0c;而常识则意味着我们的知识面的宽度。 语言常识类的测试&#xff0c;如果要说技巧&#xff1f;难说....更多的…

洗地机什么牌子好?目前口碑最好的洗地机

如今&#xff0c;人们的生活中&#xff0c;洗地机已经成为了越来越受欢迎的清洁工具&#xff0c;洗地机能迅速而有效地清理地板、地毯以及其他硬表面&#xff0c;为用户提供更加方便快捷的洗地机体验。那么&#xff0c;洗地机什么牌子好?我们一起来看看目前口碑最好的洗地机有…

在Kubernetes中优雅地导出和清理Ingress资源

引言 Kubernetes的Ingress资源是定义外部访问集群服务的规则。随着微服务架构和容器化技术的普及&#xff0c;Ingress作为路由流量的关键组件变得愈发重要。当我们需要在环境之间迁移Ingress资源或者备份当前的配置时&#xff0c;就会用到导出功能。然而&#xff0c;直接使用k…

508基于51单片机的火灾检测与报警系统设计

基于51单片机的火灾检测与报警系统设计[proteus仿真] 火灾检测与报警系统这个题目算是课程设计和毕业设计中常见的题目了&#xff0c;本期是一个基于51单片机的火灾检测与报警系统设计 需要的源文件和程序的小伙伴可以关注公众号【阿目分享嵌入式】&#xff0c;赞赏任意文章 …

在云服务器ECS上用Python写一个搜索引擎

在云服务器ECS上用Python写一个搜索引擎 一、场景介绍二、搜索引擎的组成2.1 网页的爬取及排序2.2 用户使用搜索引擎进行搜索 三、操作步骤3.1 环境准备3.2 安装Anaconda3.3 安装Streamlit3.4 下载搜索引擎代码3.5 运行搜索引擎 四、常见问题4.1 运行setup.py时可能的问题4.2 如…

数字孪生与物联网(IoT)技术的结合

数字孪生与物联网&#xff08;IoT&#xff09;技术的结合可以在多个领域实现更智能、更高效的应用。以下是数字孪生在物联网技术中的一些应用&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.实时监…

【Verilog】期末复习——解释下列名词(FPGA、ASIC、IP、RTL、EDA、HDL、FSM)

系列文章 数值&#xff08;整数&#xff0c;实数&#xff0c;字符串&#xff09;与数据类型&#xff08;wire、reg、mem、parameter&#xff09; 运算符 数据流建模 行为级建模 结构化建模 组合电路的设计和时序电路的设计 有限状态机的定义和分类 期末复习——数字逻辑电路分…

Opencv实验合集——实验八:相机校准

1.定义 首先&#xff0c;我们来理解一下怎么从相机的角度去看一张图片&#xff0c;就好比如你用眼睛作为相机来进行摄影&#xff0c;但是比摄影机强的是&#xff0c;你是怎么摄影图片之后再将它矫正出现在你眼前&#xff0c;将歪歪扭扭的图片变成一张在你眼前是一张直的图片 为…

1、C语言:数据类型/运算符与表达式

数据类型/运算符/表达式 1.数据类型与长度2.常量3.声明4. 运算符5. 表达式 1.数据类型与长度 基本数据类型 类型说明char字符型&#xff0c;占用一个字节&#xff0c;可以存放本地字符集中的一个字符int整型&#xff0c;通常反映了所有机器中整数的最自然长度float单精度浮点…

C语言stricmp函数

之前学习了strcmp函数,下面看一下stricmp; strcmp()比较字符串,区分大小写; 根据资料, strcmp() 以二进制的方式进行比较,不会考虑多字节或宽字节字符; 使用stricmp()比较字符串,不区分大小写; 字符串大小的比较是以ASCII 码表上的顺序来决定,此顺序亦为字符的值。…

JavaWeb实验报告

JavaWeb实验报告 JavaWeb实验报告 2024 年 1 月 7 日 课程名称&#xff1a; JavaWeb 实验名称&#xff1a; 期末作业 班级&#xff1a; 姓名 同组人&#xff1a; 指导教师评定&#xff…

国产编程语言炫彩,界面库ui dll,有人了解吗

中文编程: 中英文双语编程, 中英一键切换, 中英对照, 中文为主, UNICODE/ANSI编码都支持; 完全免费: 炫语言免费, 调试器免费, IDE绿色版无需安装; 纯文本: 纯文本格式代码, 随意复制粘贴, GIT代码托管, 多人合作开发; PY风格: PY风格代码, 通过代码缩进确定作用域 非 大花括…

已解决 ValueError: Data cardinality is ambiguous 问题

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通Golang》…

已解决 Java Error: java.lang.UnsupportedOperationException 问题

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通Golang》…

安装pygraphviz步骤

1. 安装graphviz软件 去官网graphviz下载&#xff0c;graphviz软件安装包&#xff0c;然后安装。 2. 准备c/c环境 检查 Visual Studio Build Tools&#xff1a;如果您之前安装了 Visual Studio 或 Visual Studio Build Tools&#xff0c;那么您应该已经有了 C 编译器。您可以…

数据库常见的面试题

1.查询"01"课程比"02"课程成绩高的学生的信息及课程分数&#xff1a; SELECT s.student_id, s.student_name, sc1.course_score AS score1, sc2.course_score AS score2 FROM student s JOIN score sc1 ON s.student_id sc1.student_id AND sc1.course_i…

面试经典150题(72-77)

leetcode 150道题 计划花两个月时候刷完&#xff0c;今天&#xff08;第三十五天&#xff09;完成了6道(72-77)150&#xff1a; 72.(236. 二叉树的最近公共祖先) 题目描述&#xff1a; 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义…

Java IO流(四)-字符流输出流

字符输出流 1.1 字符流输出介绍 Writer类 写入字符流的最顶层的类 , 是一个抽象类 ,不能实例化 , 需要使用其子类FileWriter类 FileWriter类 : 用来写入字符文件的便捷类 1.2 FileWriter的成员 构造方法 : public FileWriter(File file) : 往指定的File路径中写入数据publi…

7个PyCharm实用插件实现轻松编程

大家好&#xff0c;IDE&#xff08;集成开发环境&#xff09;是开发者的武器&#xff0c;使用一个好的IDE和一些很棒的插件&#xff0c;工作效率会更高。Python是一种广泛使用的编程语言&#xff0c;PyCharm是最受欢迎的Python IDE之一。以下介绍7个PyCharm插件&#xff0c;它们…

IDE安装,关于运行vbs出现800a0046权限不足的解决情况(java进阶1)

安装教程&#xff1a;JetBrains全家桶破解&#xff1a;2023.x 破解教程-搜云库技术团队 安装过程遇到的问题 1&#xff09;关于运行vbs出现800a0046权限不足的解决情况 解决方法&#xff1a; 一句话重点&#xff1a;把360安全卫士退出后&#xff0c;成功运行了。 参考&…