Flutter Widget组件学习（专为 Uniapp 转 Flutter 定制）

一、页面结构 / 根容器（最常用）

Flutter Widget	Uniapp 对应组件	说明
Scaffold	page 根节点	Flutter 页面标配，自带导航栏、状态栏、背景、抽屉
AppBar	navigation-bar	页面顶部导航栏（标题、返回、按钮）
SafeArea	自动安全区适配	避开刘海、底部小黑条，必须套在页面外层

二、布局组件（最核心！）

Flutter Widget	Uniapp 对应	核心用途
Container	<view> + 样式	万能容器，支持宽高、边距、背景、圆角、阴影
Column	<view style="flex-direction:column">	垂直布局（从上到下）
Row	<view style="flex-direction:row">	水平布局（从左到右）
Stack	<view style="position:relative"> 子元素 absolute	层叠布局（悬浮、遮罩、徽章）
Positioned	position:absolute	配合 Stack 定位子元素
Expanded	flex:1	填充剩余空间（必须放在 Row/Column 里）
SizedBox	<view style="width:xx;height:xx"></view>	固定宽高、间距占位
Padding	padding	专门做内边距（比 Container 更轻量）
Align	align / 居中	控制子元素对齐方式
Center	居中	快速让子元素居中

三、文本 / 图标

Flutter Widget	Uniapp 对应	说明
Text	<text>	显示文本（必用）
RichText	富文本	一段文字多种样式
Icon	<icon>	系统图标
IconButton	<button icon>	图标按钮

四、按钮 / 交互

Flutter Widget	Uniapp 对应	说明
ElevatedButton	<button type="primary">	凸起按钮（常用）
TextButton	<text> 点击	文字按钮（无背景）
OutlinedButton	镂空按钮	边框按钮
GestureDetector	@click / @tap	给任何组件添加点击、长按、双击（万能点击）
InkWell	带水波纹点击	带 Material 点击效果（比 GestureDetector 好看）

五、输入框 / 表单

Flutter Widget	Uniapp 对应	说明
TextField	<input>	输入框（文本、密码、数字）
Checkbox	<checkbox>	复选框
Radio	<radio>	单选框
Switch	<switch>	开关
Slider	<slider>	滑块
Form + TextFormField	表单校验	表单统一校验（登录、注册必用）

六、列表（最常用！）

Flutter Widget	Uniapp 对应	说明
ListView	<scroll-view> + <view v-for>	垂直 / 水平长列表（自带滚动、复用）
ListView.builder	高性能长列表	按需渲染，海量数据不卡顿
GridView	<grid>	网格布局
SingleChildScrollView	<scroll-view>	可滚动容器（适合少量内容）

七、图片 / 资源

Flutter Widget	Uniapp 对应	说明
Image	<image>	本地 / 网络图片
CircleAvatar	圆形头像	快速实现圆形头像
FadeInImage	图片占位 + 淡入	优化网络图片体验

八、弹窗 / 提示

Flutter Widget	Uniapp 对应	说明
AlertDialog	uni.showModal	确认弹窗
BottomSheet	uni.showActionSheet	底部弹出菜单
SnackBar	uni.showToast	底部轻提示
Drawer	侧滑抽屉	侧边栏菜单

九、导航 / 路由

Flutter 类 / Widget	Uniapp 对应	说明
Navigator	uni.navigateTo	页面跳转、返回
MaterialPageRoute	路由页面	页面跳转动画
TabBar + TabBarView	<tab-bar>	底部 / 顶部 tab 切换

十、样式增强（高频小部件）

Flutter Widget	Uniapp 对应	用途
DecoratedBox	背景 / 边框	加背景、边框、渐变（比 Container 轻）
Opacity	opacity	透明度
ClipRRect	border-radius	圆角裁剪
ClipOval	圆形裁剪	圆形图片 / 按钮
Card	卡片容器	带阴影、圆角的卡片

快速记忆口诀（专为 Uniapp 转 Flutter 定制）

1. 页面 = Scaffold（替代 Uniapp 页面根节点）
2. 容器 = Container（替代 view）
3. 排版 = Row + Column（flex 布局）
4. 占空间 = Expanded（flex:1）
5. 点击 = InkWell / GestureDetector（@click）
6. 列表 = ListView（scroll-view）
7. 输入 = TextField（input）
8. 文字 = Text（text）
9. 图片 = Image（image）
10. 层叠 = Stack（relative + absolute）

---

最精简 "必背 15 个"（你 90% 时间只用这些）

1. Scaffold
2. Container
3. Row
4. Column
5. Expanded
6. Stack
7. Text
8. TextField
9. Image
10. ListView
11. ElevatedButton
12. InkWell/GestureDetector
13. Padding
14. SizedBox
15. SafeArea

Flutter 常用组件属性速查表

组件名称	精细属性 + 具体取值
Scaffold	appBar: AppBar (title: Text ("标题"))body: 页面内容floatingActionButton: 悬浮按钮bottomNavigationBar: 底部导航drawer: 左侧抽屉backgroundColor: Colors.whiteresizeToAvoidBottomInset: true / false
Container	width: 200height: 200alignment: Alignment.center / topLeft / bottomRightpadding: EdgeInsets.all(10) / symmetric(horizontal:10,vertical:5) / only(left:10)margin: EdgeInsets.all(10) / symmetric(horizontal:10,vertical:5) / only(top:5)color: Colors.bluedecoration: BoxDecoration (颜色、圆角、边框、阴影)child: 子组件
Row	mainAxisAlignment: start / center / end / spaceBetween / spaceAround / spaceEvenlycrossAxisAlignment: start / center / end / stretchmainAxisSize: max / minchildren: 子组件列表
Column	mainAxisAlignment: start / center / end / spaceBetween / spaceAround / spaceEvenlycrossAxisAlignment: start / center / end / stretchmainAxisSize: max / minchildren: 子组件列表
Expanded	flex: 1 / 2 / 3child: 子组件必须放在 Row/Column 内
Stack	alignment: center / topLeft / topRight / bottomCenterfit: StackFit.loose / expandclipBehavior: Clip.none / hardEdgechildren: 层叠子组件
Text	data: "显示文字"style: TextStyle(fontSize: 16,color: Colors.black,fontWeight: normal / bold,fontStyle: normal / italic,letterSpacing: 1,height: 1.5,decoration: none / underline / lineThrough)textAlign: left / center / rightmaxLines: 1overflow: ellipsissoftWrap: true
TextField	controller: TextEditingController()decoration: InputDecoration (hintText:"提示",labelText:"标签",border:OutlineInputBorder ())keyboardType: text / number / emailobscureText: true (密码) /falsemaxLength: 20enabled: true / falseonChanged: (value){}
Image	image: NetworkImage(url) / AssetImage(path)width: 100height: 100fit: cover / contain / fill / scaleDownalignment: centercolor: 混合色
ListView	scrollDirection: vertical / horizontalpadding: EdgeInsets.all(10)shrinkWrap: true / falsephysics: AlwaysScrollable / NeverScrollableitemCount: 数量itemBuilder: 构建列表
ElevatedButton	onPressed: (){}onLongPress: (){}child: Text ("按钮")style: 背景色、文字色、圆角、padding
InkWell	onTap: 点击onDoubleTap: 双击onLongPress: 长按splashColor: 水波纹颜色child: 子组件
GestureDetector	onTap: 点击onDoubleTap: 双击onLongPress: 长按onPanUpdate: 拖拽child: 子组件
Padding	padding: EdgeInsets.all(10)padding: EdgeInsets.symmetric(horizontal:10, vertical:5)padding: EdgeInsets.only(left:10, top:5)child: 子组件
SizedBox	width: 100height: 50SizedBox (width:20) 水平间距SizedBox (height:10) 垂直间距child: 子组件
SafeArea	top: true / falsebottom: true / falseleft: true / falseright: true / falsechild: 子组件
GridView	GridView.count () 固定列数 crossAxisCount: 2 (列数)mainAxisSpacing: 10 (行间距)crossAxisSpacing: 10 (列间距)padding: EdgeInsets.all(10)childAspectRatio: 1 (宽高比)shrinkWrap: true / falsephysics: AlwaysScrollable / NeverScrollablechildren: 子组件列表**GridView.builder () 动态构建（高效）**crossAxisCount: 2 /gridDelegate 配置itemCount: 总数itemBuilder: 构建条目padding: EdgeInsets.all(10)mainAxisSpacing: 10crossAxisSpacing: 10