Flutter_Widget_速查表

Flutter 常用组件速查表

按功能分类整理 Flutter 常用 Widget，包含作用、基本用法示例、核心参数及参数说明，方便查阅。

---

一、文本与图标类

组件名	作用	使用方法示例	核心参数	参数作用
Text	显示一段文本	Text('Hello', style: TextStyle(fontSize: 18))	data style textAlign maxLines overflow	显示的字符串 字体样式（颜色/大小/粗细等） 文本对齐方式 最大显示行数 超出后的处理方式（省略号/裁剪等）
RichText	显示多种样式混排的文本	RichText(text: TextSpan(children: [...]))	text textAlign	一个 InlineSpan（通常是 TextSpan），可嵌套不同样式的子文本 整体对齐方式
Icon	显示图标	Icon(Icons.home, size: 24, color: Colors.blue)	icon size color	指定图标数据（如 Icons.home） 图标大小 图标颜色
Image	显示图片	Image.network('url') / Image.asset('path')	image/构造方式 fit width / height errorBuilder	图片来源（网络/本地/内存） 图片适应方式（cover/contain 等） 图片显示宽高 加载失败时的占位组件

---

二、布局类

组件名	作用	使用方法示例	核心参数	参数作用
Container	通用容器，可设置尺寸、边距、装饰、背景等	Container(padding: EdgeInsets.all(8), color: Colors.grey, child: Text('A'))	child padding / margin color / decoration width / height alignment	子组件 内边距/外边距 背景色/装饰（边框、圆角、渐变等） 容器宽高 子组件在容器内的对齐方式
Row	水平方向排列子组件	Row(children: [Text('A'), Text('B')])	children mainAxisAlignment crossAxisAlignment mainAxisSize	子组件列表 主轴（水平）对齐方式 交叉轴（垂直）对齐方式 主轴尺寸是否占满
Column	垂直方向排列子组件	Column(children: [Text('A'), Text('B')])	同 Row（主轴方向为垂直）	同 Row
Stack	层叠布局，子组件按顺序堆叠	Stack(children: [Image(...), Positioned(...)])	children alignment fit	层叠的子组件 未定位子组件的对齐方式 非定位子组件如何适应 Stack 尺寸
Positioned	在 Stack 中精确定位子组件	Positioned(top: 10, left: 10, child: Text('A'))	top/bottom/left/right width/height	距父级 Stack 各边的距离 子组件宽高
Expanded	让子组件按比例填满 Row/Column 剩余空间	Expanded(flex: 2, child: Container())	flex child	占用剩余空间的比例权重 子组件
Flexible	让子组件在 Row/Column 中按需伸缩（不强制占满）	Flexible(child: Text('A'))	flex fit child	弹性权重 FlexFit.tight（占满）或 loose（按需） 子组件
Padding	给子组件添加内边距	Padding(padding: EdgeInsets.all(16), child: Text('A'))	padding child	四周或指定方向的间距 子组件
Center	将子组件居中显示	Center(child: Text('A'))	child widthFactor/heightFactor	子组件 按子组件尺寸的倍数确定 Center 自身尺寸
Align	按指定对齐方式摆放子组件	Align(alignment: Alignment.topRight, child: Text('A'))	alignment child	对齐位置（如 topRight、center 等） 子组件
SizedBox	固定尺寸的空白或包裹容器	SizedBox(width: 20, height: 20)	width height child	固定宽度 固定高度 可选的子组件
Wrap	自动换行的流式布局	Wrap(spacing: 8, children: [...])	direction spacing runSpacing children	主轴方向（水平/垂直） 同一行内子项间距 换行后行与行之间的间距 子组件列表
AspectRatio	按宽高比约束子组件	AspectRatio(aspectRatio: 16/9, child: Container())	aspectRatio child	宽高比数值 子组件
ConstrainedBox	对子组件施加最大/最小尺寸约束	ConstrainedBox(constraints: BoxConstraints(minHeight: 50), child: Text('A'))	constraints child	BoxConstraints（最小/最大宽高） 子组件
SafeArea	避开系统状态栏、刘海屏等安全区域	SafeArea(child: Scaffold(...))	top/bottom/left/right child	是否在对应方向避让 子组件

---

三、按钮类

组件名	作用	使用方法示例	核心参数	参数作用
ElevatedButton	带阴影的凸起按钮，用于主要操作	ElevatedButton(onPressed: (){}, child: Text('确定'))	onPressed style child	点击回调（为 null 时按钮禁用） 按钮样式（颜色、圆角、内边距等） 按钮内容
TextButton	无背景的文字按钮，用于次要操作	TextButton(onPressed: (){}, child: Text('取消'))	onPressed style child	同上
OutlinedButton	带边框、无填充背景的按钮	OutlinedButton(onPressed: (){}, child: Text('查看'))	onPressed style child	同上
IconButton	可点击的图标按钮	IconButton(icon: Icon(Icons.add), onPressed: (){})	icon onPressed tooltip	显示的图标 点击回调 长按时提示文字
FloatingActionButton	悬浮操作按钮，常用于页面主操作	FloatingActionButton(onPressed: (){}, child: Icon(Icons.add))	onPressed child backgroundColor	点击回调 按钮内容（通常是图标） 背景色

---

四、输入与表单类

组件名	作用	使用方法示例	核心参数	参数作用
TextField	单行/多行文本输入框	TextField(controller: _c, decoration: InputDecoration(labelText: '姓名'))	controller decoration onChanged obscureText keyboardType	控制输入内容的控制器 输入框外观（标签、提示、边框等） 内容变化回调 是否隐藏输入内容（密码框） 指定弹出的键盘类型
TextFormField	带表单校验功能的文本输入框	TextFormField(validator: (v) => v!.isEmpty ? '不能为空' : null)	validator onSaved decoration	校验函数，返回错误信息或 null 表单保存时的回调 输入框外观
Form	表单容器，统一管理校验与提交	Form(key: _formKey, child: Column(children: [...]))	key autovalidateMode child	通过 GlobalKey 控制表单状态（校验/保存） 自动校验时机 表单内容
Checkbox	复选框	Checkbox(value: checked, onChanged: (v) => setState(() => checked = v!))	value onChanged	是否选中 状态变化回调
Radio	单选按钮	Radio(value: 1, groupValue: selected, onChanged: (v) {})	value groupValue onChanged	当前选项值 当前选中的值（用于比较） 选中变化回调
Switch	开关切换控件	Switch(value: isOn, onChanged: (v) {})	value onChanged	当前开关状态 状态变化回调
Slider	滑动条	Slider(value: v, min: 0, max: 100, onChanged: (v) {})	value min/max onChanged	当前值 取值范围 滑动变化回调
DropdownButton	下拉选择框	DropdownButton(value: v, items: [...], onChanged: (v) {})	value items onChanged	当前选中项 下拉选项列表（DropdownMenuItem） 选中变化回调

---

五、列表与滚动类

组件名	作用	使用方法示例	核心参数	参数作用
ListView	可滚动的列表	ListView(children: [...]) / ListView.builder(itemCount: n, itemBuilder: ...)	children itemBuilder + itemCount（builder 模式） scrollDirection shrinkWrap	直接子组件列表（少量数据） 按需构建列表项（大量/动态数据） 滚动方向 是否根据内容自适应高度
GridView	网格布局的可滚动列表	GridView.count(crossAxisCount: 2, children: [...])	crossAxisCount gridDelegate itemBuilder	每行/列的网格数量 自定义网格排列规则 按需构建网格项
SingleChildScrollView	让单个子组件可滚动	SingleChildScrollView(child: Column(children: [...]))	child scrollDirection	唯一子组件 滚动方向
PageView	左右/上下滑动切换页面	PageView(children: [Page1(), Page2()])	children controller onPageChanged	各页面内容 控制页面跳转的控制器 页面切换回调
CustomScrollView	结合多种 Sliver 组件的复合滚动视图	CustomScrollView(slivers: [SliverAppBar(...), SliverList(...)])	slivers	可滚动的 Sliver 组件集合，如 SliverAppBar、SliverList、SliverGrid
RefreshIndicator	下拉刷新	RefreshIndicator(onRefresh: _refresh, child: ListView(...))	onRefresh child	下拉触发的异步刷新回调 可滚动的子组件

---

六、Material 结构类

组件名	作用	使用方法示例	核心参数	参数作用
Scaffold	页面骨架，提供标准 Material 页面结构	Scaffold(appBar: AppBar(...), body: ..., floatingActionButton: ...)	appBar body floatingActionButton drawer bottomNavigationBar	顶部导航栏 页面主体内容 悬浮按钮 侧边抽屉菜单 底部导航栏
AppBar	顶部应用栏	AppBar(title: Text('标题'), actions: [...])	title actions leading backgroundColor	标题组件 右侧操作按钮列表 左侧图标（常为返回/菜单按钮） 背景色
Card	带圆角和阴影的卡片容器	Card(child: ListTile(...))	child elevation shape	卡片内容 阴影高度 卡片形状（如圆角）
ListTile	标准列表项布局（图标+标题+副标题+尾部）	ListTile(leading: Icon(Icons.person), title: Text('张三'), onTap: (){})	leading title subtitle trailing onTap	左侧图标/头像 主标题 副标题 右侧内容（如箭头/开关） 点击回调
Divider	分割线	Divider(height: 1, color: Colors.grey)	height thickness color	分割线占用的高度 线条粗细 颜色

---

七、导航与路由类

组件名	作用	使用方法示例	核心参数	参数作用
Navigator	管理路由栈，实现页面跳转	Navigator.push(context, MaterialPageRoute(builder: (_) => NextPage()))	push/pop builder	入栈/出栈操作 构建目标页面的函数
MaterialPageRoute	定义一个带 Material 转场动画的路由	见上	builder settings	构建页面的函数 路由配置（如路由名）
BottomNavigationBar	底部导航栏，用于多页面切换	BottomNavigationBar(items: [...], currentIndex: i, onTap: (i) {})	items currentIndex onTap	导航项列表（图标+文字） 当前选中项索引 点击切换回调
Drawer	侧边抽屉菜单	Drawer(child: ListView(children: [...]))	child	抽屉内容
TabBar / TabBarView	顶部标签页切换	TabBar(tabs: [...]) + TabBarView(children: [...])	tabs/children controller	标签列表/对应页面内容 TabController，同步标签与内容

---

八、对话框与提示类

组件名	作用	使用方法示例	核心参数	参数作用
AlertDialog	弹出提示对话框	showDialog(context: context, builder: (_) => AlertDialog(title: Text('提示'), actions: [...]))	title content actions	对话框标题 对话框正文 底部操作按钮列表
SnackBar	底部短暂提示条	ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('已保存')))	content duration action	提示内容 显示时长 附带的操作按钮
showModalBottomSheet	从底部弹出的面板	showModalBottomSheet(context: context, builder: (_) => Container(...))	builder isScrollControlled	构建面板内容 是否允许面板占满全屏并可滚动

---

九、手势与交互类

组件名	作用	使用方法示例	核心参数	参数作用
GestureDetector	监听各种手势（点击、拖动、缩放等）	GestureDetector(onTap: (){}, child: Container())	onTap onLongPress onPanUpdate child	点击回调 长按回调 拖动过程回调 子组件
InkWell	带水波纹点击效果的可点击区域	InkWell(onTap: (){}, child: Text('点击'))	onTap splashColor child	点击回调 水波纹颜色 子组件
Dismissible	可滑动删除/移除的组件	Dismissible(key: key, onDismissed: (dir) {}, child: ListTile(...))	key onDismissed direction	唯一标识 滑动移除后的回调 允许滑动的方向

---

十、动画类

组件名	作用	使用方法示例	核心参数	参数作用
AnimatedContainer	属性变化时自动过渡动画的容器	AnimatedContainer(duration: Duration(milliseconds: 300), color: c, width: w)	duration curve 其他 Container 属性	动画时长 动画曲线（缓动效果） 颜色/尺寸等变化后自动补间
AnimatedOpacity	透明度渐变动画	AnimatedOpacity(opacity: visible ? 1 : 0, duration: Duration(milliseconds: 300), child: ...)	opacity duration child	目标透明度 动画时长 子组件
Hero	页面跳转时的共享元素过渡动画	Hero(tag: 'avatar', child: Image(...))	tag child	唯一标识，两个页面需一致才能匹配动画 要过渡的组件
FadeTransition / SlideTransition	基于 AnimationController 的显式渐隐/位移动画	FadeTransition(opacity: animation, child: ...)	opacity/position child	绑定的动画对象 子组件
AnimatedBuilder	自定义动画的通用构建器	AnimatedBuilder(animation: controller, builder: (ctx, child) => ...)	animation builder child	监听的动画对象 每帧重建的构建函数 不随动画重建的静态子组件（性能优化）

---

十一、状态管理 / 数据驱动类

组件名	作用	使用方法示例	核心参数	参数作用
StatelessWidget	无内部状态的静态组件基类	class MyWidget extends StatelessWidget { Widget build(context) => ...; }	build(context)	描述界面的方法，返回子组件树
StatefulWidget	有内部可变状态的组件基类	class MyWidget extends StatefulWidget { ... State createState() => ...; }	createState() setState()（在 State 中）	创建关联的 State 对象 触发界面重建
FutureBuilder	根据 Future 异步结果构建界面	FutureBuilder(future: fetchData(), builder: (ctx, snapshot) => ...)	future builder	要监听的异步任务 根据快照状态（等待/完成/出错）构建界面
StreamBuilder	根据 Stream 数据流构建界面	StreamBuilder(stream: myStream, builder: (ctx, snapshot) => ...)	stream builder initialData	要监听的数据流 根据最新数据构建界面 初始默认数据
ValueListenableBuilder	监听 ValueNotifier 变化并局部刷新界面	ValueListenableBuilder(valueListenable: notifier, builder: (ctx, value, child) => ...)	valueListenable builder	被监听的 ValueNotifier 值变化时重建界面的函数
InheritedWidget	在组件树中向下高效共享数据	class MyData extends InheritedWidget { ... }	updateShouldNotify child	判断是否需要通知依赖者重建 子组件树

---