文章目录
- [一、StatelessWidget 无状态组件 与 StatefulWidget 有状态组件](#一、StatelessWidget 无状态组件 与 StatefulWidget 有状态组件)
-
- [1、StatelessWidget 无状态组件](#1、StatelessWidget 无状态组件)
- [2、StatefulWidget 有状态组件](#2、StatefulWidget 有状态组件)
- [3、StatelessWidget 与 StatefulWidget 对比](#3、StatelessWidget 与 StatefulWidget 对比)
- [4、Android 中的组件对照](#4、Android 中的组件对照)
-
- [对应 StatelessWidget 无状态组件](#对应 StatelessWidget 无状态组件)
- [对应 StatefulWidget 有状态组件](#对应 StatefulWidget 有状态组件)
参考文档 :
- Flutter 官方文档 : https://docs.flutter.dev/install/quick
- 使用出现网络问题 , 参考 在中国网络环境下使用 Flutter 文档 ;
一、StatelessWidget 无状态组件 与 StatefulWidget 有状态组件
在 Flutter 中，StatelessWidget ( 无状态组件 ) 和 StatefulWidget ( 有状态组件 ) 是构建所有界面的两大基础核心，所有 页面、控件 最终都 继承自这两个组件，是 Flutter 开发中最核心的概念。
- StatelessWidget 用于 静态展示，数据不变，轻量高效
- StatefulWidget 用于 动态交互，数据可变，支持刷新
1、StatelessWidget 无状态组件
StatelessWidget 无状态组件 是 静态、不可变、无状态的组件，一旦 创建渲染后，界面数据和样式无法改变。
- 没有可变状态 ( 没有 setState 方法 )
- 数据只能通过外部传入 ( 构造函数参数 ) ，自身无法修改数据
- 构建后界面固定，不会主动刷新
- 性能更高，开销更小
StatelessWidget 无状态组件 适用场景 : 都是 纯展示类、不需要交互修改的控件 / 页面 ;
- 标题栏、文本标签
- 图标、静态图片
- 固定样式的按钮、卡片
- 静态介绍页
开发复杂界面时 , 几乎 大部分组件都使用 StatelessWidget 无状态组件 或 自定义组件 , StatefulWidget 组件都是复杂组件 , 复杂项目几乎不用 , 可定制型太差 ;
2、StatefulWidget 有状态组件
StatefulWidget 有状态组件 是 动态、可变、有状态的组件，可以在运行时修改数据并刷新界面。
- 拥有可变状态 ( State ) ，专门管理数据
- 通过 setState() 方法修改数据并触发界面重建
- 分为两部分 : StatefulWidget ( 本身不可变 ) + State ( 存储可变状态 )
- 支持交互、数据更新、动画等动态场景
StatefulWidget 有状态组件 的 适用场景 , 都是 需要动态变化、用户交互的控件 / 页面 :
- 计数器、输入框
- 列表、下拉刷新
- 表单、勾选框
- 有交互的页面 , 如 : 点击切换、数据请求后刷新 ;
StatefulWidget 有状态组件 都是复杂组件 , 进行了非常复杂的封装 , 开发复杂项目一般都不会使用这些封装好的组件 , 一般都是自己使用 简单组件 或 自定义组件 ;
3、StatelessWidget 与 StatefulWidget 对比
| 对比维度 | StatelessWidget ( 无状态 ) | StatefulWidget ( 有状态 ) |
|---|---|---|
| 是否可变 | 不可变，界面固定 | 可变，支持动态刷新 |
| 状态管理 | 无内部状态，数据来自外部 | 有独立 State 类管理内部可变数据 |
| 刷新方式 | 仅外部数据改变时重建 | 调用 setState() 主动刷新 |
| 核心方法 | 只有 build() |
createState() + build() + setState() |
| 性能 | 高，开销极小 | 相对较低 ( 频繁 setState 会有性能消耗 ) |
| 结构复杂度 | 简单，一个类即可 | 稍复杂 : 组件类 + 状态类 |
| 典型用途 | 静态展示 ( 文本、图标、图片 ) | 动态交互 ( 计数器、表单、列表 ) |
4、Android 中的组件对照
对应 StatelessWidget 无状态组件
Android 对应 StatelessWidget 无状态组件 , 只负责展示，不保存状态的普通 View , 如 :
- TextView 显示文字
- ImageView 显示图片
- Button 按钮 ( 只展示，不自己存状态 )
- 静态布局 LinearLayout 等
这些组件 与 StatelessWidget 无状态组件 特点完全一样 :
- 数据从外部传入
- 自己不保存、不修改状态
- 外部改变数据，它才刷新
- 无状态、轻量
对应 StatefulWidget 有状态组件
Android 对应 StatefulWidget 有状态组件 , 会 自己保存状态、会自动刷新的 View / 组件 , 如 :
- EditText 输入框 ( 自己保存输入的文字 )
- CheckBox 勾选框 ( 保存选中状态 )
- Switch 开关 ( 自己保存开关状态 )
- 自定义 View 保存数据、刷新 UI
- 屏幕旋转后自动恢复数据的控件
这些组件 与 StatefulWidget 有状态组件 特点完全一样 :
- 自己维护内部状态
- 状态变化 → UI 自动刷新
- 有自己的数据、状态生命周期
- 可交互、可修改自身内容