Flutter Widgets 核心手册
简介
本文档整理了 Flutter 开发中常用 Widget 的分类、用途及官方文档链接，适合快速查阅。
📚 一、基础概念与页面结构
在此部分，我们定义页面的骨架和组件的类型。
| 名称 | 类型 | 用途一句话 |
|---|---|---|
| Scaffold | 页面骨架 | 提供 AppBar、Body、Drawer、底部导航等完整页面结构。 |
| MaterialApp | 根组件 | App 的入口，管理全局主题、路由、本地化。 |
| AppBar | 导航栏 | 顶部的标题栏，通常包含标题和操作按钮。 |
点击查看：StatelessWidget 与 StatefulWidget 的区别
- StatelessWidget (无状态)：静态 UI。只有展示功能，不会因为数据变化自动刷新（如 Text, Icon）。
- StatefulWidget (有状态)：动态 UI。内部持有状态，数据变化时通过
setState刷新界面（如 Checkbox, Slider）。
📐 二、布局类 Widgets
1. 单子元素布局 (Single Child)
容器只能包含一个子组件，主要用于控制大小、位置或添加装饰。
| 组件 | 解释 |
|---|---|
| Container | 万能盒子。集成了大小、颜色、边距(Padding)、装饰(Decoration)等功能。 |
| Padding | 给子组件添加内边距。 |
| Center | 将子组件居中展示。 |
| Align | 控制子组件在父容器中的对齐方式（TopLeft, BottomRight 等）。 |
| SizedBox | 指定固定的宽度或高度，也常用于产生间距。 |
| Expanded | 在 Row/Column 中使用，强制子组件填满剩余空间。 |
| FittedBox | 缩放子组件以适应父容器的空间。 |
| AspectRatio | 强制子组件保持固定的宽高比（如 16:9）。 |
| ConstrainedBox | 给子组件添加额外的最大/最小尺寸限制。 |
| Offstage | 控制组件是否渲染（隐藏但不移除，保留状态）。 |
2. 多子元素布局 (Multi Child)
容器可以包含多个子组件（
List<Widget>）。
| 组件 | 解释 |
|---|---|
| Row | 水平排列子组件。 |
| Column | 垂直排列子组件。 |
| Stack | 层叠布局。子组件可以堆叠在一起（类似 Photoshop 图层）。 |
| IndexedStack | 虽然是层叠，但同一时间只显示一个索引对应的子组件。 |
| Wrap | 自动换行的流式布局（像文字自动换行一样排列组件）。 |
| Table | 表格布局，严格按行和列对齐。 |
| Flow | 高级自定义布局，通常用于制作复杂的展开菜单动画。 |
📝 三、内容与媒体 Widgets
| 组件 | 解释 |
|---|---|
| Text | 显示简单文本，支持样式设置。 |
| RichText | 富文本。支持在一段文字中混合不同颜色、字体和样式。 |
| Image | 显示图片。支持网络 (Network)、本地 (Asset)、内存 (Memory) 图片。 |
| Icon | 显示矢量图标（如 Material Icons）。 |
🌀 四、滚动视图 Widgets
注意
当内容超出屏幕范围时必须使用滚动 Widget，否则会出现黄黑相间的溢出警告条。
| 名称 | 用途 |
|---|---|
| ListView | 最常用的线性滚动列表（支持无限加载）。 |
| GridView | 网格滚动布局（相册墙效果）。 |
| SingleChildScrollView | 使原本不支持滚动的单个组件（如 Column）变得可以滚动。 |
| PageView | 按页切换的滚动视图（类似抖音上下滑，或轮播图）。 |
| CustomScrollView | 使用 Slivers 构建复杂的自定义滚动效果（如吸顶 Header）。 |
🎨 五、视觉与效果 Widgets
| 名称 | 用途 |
|---|---|
| Opacity | 控制子组件的透明度 (0.0 - 1.0)。 |
| Transform | 对子组件进行几何变换：旋转、缩放、平移。 |
| ClipOval / ClipRRect | 裁剪组件。Oval 为圆形/椭圆，RRect 为圆角矩形。 |
| DecoratedBox | 在子组件绘制前/后绘制背景或边框（Container 底层就是它）。 |
| BackdropFilter | 背景滤镜。常用于制作毛玻璃（高斯模糊）效果。 |
| CustomPaint | 提供 Canvas，允许开发者使用 Paint 自定义绘制图形。 |
🧩 六、交互类 Widgets (通常是 StatefulWidget)
| 组件 | 作用 |
|---|---|
| TextField | 文本输入框。 |
| Switch | 开关选择器。 |
| Checkbox | 复选框。 |
| Radio | 单选按钮。 |
| Slider | 滑动条。 |
| GestureDetector | 手势检测器。给任意组件添加点击、长按、拖拽事件。 |
🔥 七、动画 Widgets
| 组件 | 用途 |
|---|---|
| AnimatedContainer | 属性发生变化时自动执行动画的 Container。 |
| AnimatedOpacity | 透明度变化的隐式动画。 |
| Hero | 跨页面共享元素动画（如点击图片放大跳转）。 |
| AnimationController | 手动控制动画的启动、停止、反转。 |
🎯 核心总结
Scaffold
用于搭建整页结构。当你需要写一个新的“页面（Screen）”时，通常以它作为根节点。
StatelessWidget
静态、不变、无状态 UI。 构建成本低，如果页面内容不需要随时间或用户操作改变，优先选它。
StatefulWidget
能变化、有交互、能刷新 UI 的组件。 当你需要维护数据（如输入框内容、滚动位置、动画状态）时使用它。