Flutter 中 stateless 和 stateful widget 的区别[Flutter专题60]
Flutter 中 stateless 和 stateful widget 的区别
介绍
要在 Flutter 中构建任何应用程序,我们必须创建一个小部件类,它是 Flutter 应用程序的构建块。Flutter 使用小部件来创建现代移动应用程序。
Flutter 中的 Widget 分为两类:无状态 Widget 和有状态 Widget。考虑到这一点,我们将研究 Flutter 中的无状态和有状态小部件,并解释它们的区别。
让我们从这个问题开始:Flutter 中一个小部件的状态是什么?
小部件的状态
状态是在构建期间同步读取小部件类的信息 - 也就是说,当小部件显示在屏幕上并且如果信息在其生命周期内发生更改时可能会发生变化。
Flutter 内置了几个小部件,它们都分为有状态和无状态小部件。
无状态小部件
在 Flutter 应用程序运行期间,无状态小部件无法更改其状态。这意味着在应用程序运行时无法重绘无状态小部件。出于这个原因,外观和属性在小部件的整个生命周期中保持不变。
当我们描述的 UI 部分不依赖于任何其他小部件时,无状态小部件会很有用。无状态小部件的示例是文本、图标、图标按钮和凸起按钮。
这是一个无状态小部件的示例:
class StatelessScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('坚果前端'),backgroundColor: Colors.blueGrey[600],),backgroundColor: Colors.white,body: Container(),),);}
}
我们可以看到,在代码中,无状态小部件的名称是StatelessScreen
并且它正在覆盖该build
方法。该build
方法将BuildContext
用作参数并返回一个小部件。
当我们创建不需要一次又一次重绘小部件的应用程序时,我们使用无状态小部件。例如,当我们创建一个AppBar
](,无状态小部件可以是不需要更改的脚手架或图标。
无状态小部件类仅在初始化时调用一次。即使有外力作用在它上面,它也不会更新。
每当StatelessScreen
小部件初始化时,build
就会调用该方法。之后,小部件将打印在屏幕上。
但是如果我们希望它在有动作时更新,我们必须制作一个有状态的小部件。
有状态的小部件
当 UI 的某些部分必须在运行时动态更改时,使用有状态小部件。有状态的小部件可以在应用程序运行时多次重绘自己。
当我们描述的 UI 部分动态变化时,有状态小部件很有用。如果我们创建一个按钮小部件,每次用户单击该按钮时都会更新自身,这就是一个有状态小部件。
这是您可以使用有状态小部件的方式:
class StatefulScreen extends StatefulWidget {@override_StatefulScreenState createState() => _StatefulScreenState();
}
class _StatefulScreenState extends State<StatefulScreen> {String title = 'Original title';@overrideWidget build(BuildContext context) {return Column(children: [Text(title),RaisedButton(child: Text('Click'),onPressed: () {setState(() {title = 'Changed title';});})]);}
}
我们创建了一个文本字段和一个按钮小部件。
一旦我们调用这个小部件并按下按钮,我们就会让文本字段的值自动改变。
在这种类型的应用程序中,我们可以通过实现. 是一种在有状态小部件类中调用的方法。每次调用时,此方法都会更改有状态小部件的值。setState()``setState()
无状态和有状态的区别
回顾一下我们在上面的例子中所展示的内容,下表描述了无状态和有状态小部件之间的区别:
无状态小部件 | 有状态的小部件 |
---|---|
仅在初始化时更新 | 动态变化 |
文本、图标和 RaisedButtons
|
复选框、单选按钮和sliders |
没有. 它将被渲染一次并且不会自行更新setState()
|
有一个内部并且可以在输入数据更改时重新渲染setState()
|
静态小部件 | 动态小部件 |
除非发生外部事件,否则无法在运行时更新 | 可以在运行时根据用户操作或数据更改进行更新 |
请注意,对于要创建的两个小部件,它们都需要BuildContext
作为返回小部件的参数。
结论
我们已经介绍了有状态和无状态小部件之间的差异,以帮助您构建更好的 Flutter 应用程序。从示例中,我们了解了无状态和有状态小部件的作用以及如何知道您的用例需要哪个类。
现在,您可以使用针对不同用例的小部件创建更好的 UI。
Flutter 中 stateless 和 stateful widget 的区别[Flutter专题60]相关推荐
- Flutter中Stateless和Stateful的区别
Flutter中Stateless和Stateful的区别 实现Flutter app时,我们用widgets来构建app的UI.这些widgets有两种类型--statefule(有状态) 和 st ...
- 【Flutter】特别篇:stateless和stateful widget的区别
staless 没有任何需要追踪的可改变状态.stateless widget可以提供模块化的UI,也可用函数实现.stateless widget意味着不用改变,这样的话final关键字就可以排上一 ...
- 如何在 Flutter 中禁用默认的 Widget 飞溅效果
如何在 Flutter 中禁用默认的 Widget 飞溅效果 默认情况下,许多 Flutter Material Design 小部件在被选中时会显示飞溅效果. 这适用于IconButton,InkW ...
- 官方文档——一篇文章弄懂Flutter中的布局
来自Flutter中文资源主页https://flutter.cn/ 原文:https://flutter.cn/docs/development/ui/layout Flutter 中的布局 要点 ...
- flutter bloc_如何使用BLoC模式处理Flutter中的状态
flutter bloc Last year, I picked up Flutter and I must say it has been an awesome journey so far. Fl ...
- Flutter中实现整个App变为灰色
前言 为了让更多的人永远记住12月13日,各大厂都在这一天将应用变灰了. 那么接下来我们看一下Flutter是如何实现的. Flutter中实现整个App变为灰色 在Flutter中实现整个App变为 ...
- android webview_在 Flutter 中使用 WebView
本文示例代码可在微信公众号「01二进制」后台回复「WebView」查看下载 前言 我们知道在开发 Native App 时经常会有打开网页的需求,可供的选择通常只有两种: 在 App 内部打开网页 通 ...
- Flutter 中文文档:Flutter 中的布局
要点 widgets 是用于构建 UI 的类. widgets 可以用于布局和展示 UI 元素. 通过组合简单的 widgets 来构建复杂的 widgets. Flutter 布局的核心机制是 wi ...
- Flutter中的isolate-spawn(一)
在Dart中一般来说是单线程模型,但是也可以开启新的线程,两个线程之间数据不共享,内存隔离,这个跟Java这些代码有些区别,对于耗时比较严重的逻辑,比如几百毫秒的逻辑,使用isolate比较适合,本文 ...
最新文章
- linux中awk下 gsub函数用法
- tomcat和idea都占用了8080_IDEA 启动tomcat 端口占用原因以及解决方法( 使用debug模式)...
- 如何将视频下载并且转码拼接
- win10安装mysql5.6,mysql启动时,闪退
- UNIX环境高级编程笔记
- java applet audion_java applet audion
- 利用colab训练YOLOv5
- Python 列表 sort( )方法
- jquery 查找表格里的input_jquery获取input表单值的代码
- eBay起诉指控亚马逊利用非法手段挖走其卖家
- Python中虚拟环境与网络IP地址、端口、socket套接字【详细】
- 利用 nodejs 解析 m3u8 格式文件,并下 ts 合并为 mp4
- C/C++和Lua混合编程
- delphi 隐藏指定程序的托盘图标
- 萌新扫盲2—双绞线的“一百米诅咒”
- 【RDMA】ibv 函数和相关问题|IBV_SEND_INLINE
- 【软件需求工程】北理的恶龙们01——需求获取阶段准备工作
- 安装显卡后蓝屏0x00000116解决办法
- 博易终于发布新版本了
- 哪个邮箱好用又安全?最安全的邮箱排名是?
热门文章
- python修改html的td_python3修改HTMLTestRunner,生成有截图的测试报告,并发送测试邮件(一)...
- C++ VS2017 QT5.12开发在xp环境下运行 [2019]亲测推荐
- python不支持_不支持的操作:不可写的python
- PHP新浪乐居面试题,一个朋友去新浪乐居面试时的面试题(PHP)
- circle函数用法 turtle_Turtle库与Time库基础知识分享(详细)
- 查看linux内存存储空间不足,Linux 下判断Server 内存是否不足
- python中打开文件提示编码当时错误_Python:文件编码错误
- word 段显示在页面最下方_Word你说的白是什么白
- CRF++命名实体识别(NER)初步试探
- 密码学之hill密码