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 定制）
- 页面 = Scaffold（替代 Uniapp 页面根节点）
- 容器 = Container（替代 view）
- 排版 = Row + Column（flex 布局）
- 占空间 = Expanded（flex:1）
- 点击 = InkWell / GestureDetector（@click）
- 列表 = ListView（scroll-view）
- 输入 = TextField（input）
- 文字 = Text（text）
- 图片 = Image（image）
- 层叠 = Stack（relative + absolute）
最精简 “必背 15 个”（你 90% 时间只用这些）
- Scaffold
- Container
- Row
- Column
- Expanded
- Stack
- Text
- TextField
- Image
- ListView
- ElevatedButton
- InkWell/GestureDetector
- Padding
- SizedBox
- 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 |