一、页面结构 / 根容器最常用Flutter WidgetUniapp 对应组件说明Scaffoldpage 根节点Flutter 页面标配自带导航栏、状态栏、背景、抽屉AppBarnavigation-bar页面顶部导航栏标题、返回、按钮SafeArea自动安全区适配避开刘海、底部小黑条必须套在页面外层二、布局组件最核心Flutter WidgetUniapp 对应核心用途Containerview 样式万能容器支持宽高、边距、背景、圆角、阴影Columnview styleflex-direction:column垂直布局从上到下Rowview styleflex-direction:row水平布局从左到右Stackview styleposition:relative子元素 absolute层叠布局悬浮、遮罩、徽章Positionedposition:absolute配合 Stack 定位子元素Expandedflex:1填充剩余空间必须放在 Row/Column 里SizedBoxview stylewidth:xx;height:xx/view固定宽高、间距占位Paddingpadding专门做内边距比 Container 更轻量Alignalign/ 居中控制子元素对齐方式Center居中快速让子元素居中三、文本 / 图标Flutter WidgetUniapp 对应说明Texttext显示文本必用RichText富文本一段文字多种样式Iconicon系统图标IconButtonbutton icon图标按钮四、按钮 / 交互Flutter WidgetUniapp 对应说明ElevatedButtonbutton typeprimary凸起按钮常用TextButtontext点击文字按钮无背景OutlinedButton镂空按钮边框按钮GestureDetectorclick/tap给任何组件添加点击、长按、双击万能点击InkWell带水波纹点击带 Material 点击效果比 GestureDetector 好看五、输入框 / 表单Flutter WidgetUniapp 对应说明TextFieldinput输入框文本、密码、数字Checkboxcheckbox复选框Radioradio单选框Switchswitch开关Sliderslider滑块FormTextFormField表单校验表单统一校验登录、注册必用六、列表最常用Flutter WidgetUniapp 对应说明ListViewscroll-viewview v-for垂直 / 水平长列表自带滚动、复用ListView.builder高性能长列表按需渲染海量数据不卡顿GridViewgrid网格布局SingleChildScrollViewscroll-view可滚动容器适合少量内容七、图片 / 资源Flutter WidgetUniapp 对应说明Imageimage本地 / 网络图片CircleAvatar圆形头像快速实现圆形头像FadeInImage图片占位 淡入优化网络图片体验八、弹窗 / 提示Flutter WidgetUniapp 对应说明AlertDialoguni.showModal确认弹窗BottomSheetuni.showActionSheet底部弹出菜单SnackBaruni.showToast底部轻提示Drawer侧滑抽屉侧边栏菜单九、导航 / 路由Flutter 类 / WidgetUniapp 对应说明Navigatoruni.navigateTo页面跳转、返回MaterialPageRoute路由页面页面跳转动画TabBarTabBarViewtab-bar底部 / 顶部 tab 切换十、样式增强高频小部件Flutter WidgetUniapp 对应用途DecoratedBox背景 / 边框加背景、边框、渐变比 Container 轻Opacityopacity透明度ClipRRectborder-radius圆角裁剪ClipOval圆形裁剪圆形图片 / 按钮Card卡片容器带阴影、圆角的卡片快速记忆口诀专为 Uniapp 转 Flutter 定制页面 Scaffold替代 Uniapp 页面根节点容器 Container替代 view排版 Row Columnflex 布局占空间 Expandedflex:1点击 InkWell / GestureDetectorclick列表 ListViewscroll-view输入 TextFieldinput文字 Texttext图片 Imageimage层叠 Stackrelative absolute最精简 “必背 15 个”你 90% 时间只用这些ScaffoldContainerRowColumnExpandedStackTextTextFieldImageListViewElevatedButtonInkWell/GestureDetectorPaddingSizedBoxSafeAreaFlutter 常用组件属性速查表组件名称精细属性 具体取值ScaffoldappBar: AppBar (title: Text (标题))body: 页面内容floatingActionButton: 悬浮按钮bottomNavigationBar: 底部导航drawer: 左侧抽屉backgroundColor: Colors.whiteresizeToAvoidBottomInset: true / falseContainerwidth: 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: 子组件RowmainAxisAlignment: start / center / end / spaceBetween / spaceAround / spaceEvenlycrossAxisAlignment: start / center / end / stretchmainAxisSize: max / minchildren: 子组件列表ColumnmainAxisAlignment: start / center / end / spaceBetween / spaceAround / spaceEvenlycrossAxisAlignment: start / center / end / stretchmainAxisSize: max / minchildren: 子组件列表Expandedflex: 1 / 2 / 3child: 子组件必须放在 Row/Column 内Stackalignment: center / topLeft / topRight / bottomCenterfit: StackFit.loose / expandclipBehavior: Clip.none / hardEdgechildren: 层叠子组件Textdata: 显示文字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: trueTextFieldcontroller: TextEditingController()decoration: InputDecoration (hintText:提示,labelText:标签,border:OutlineInputBorder ())keyboardType: text / number / emailobscureText: true (密码) /falsemaxLength: 20enabled: true / falseonChanged: (value){}Imageimage: NetworkImage(url) / AssetImage(path)width: 100height: 100fit: cover / contain / fill / scaleDownalignment: centercolor: 混合色ListViewscrollDirection: vertical / horizontalpadding: EdgeInsets.all(10)shrinkWrap: true / falsephysics: AlwaysScrollable / NeverScrollableitemCount: 数量itemBuilder: 构建列表ElevatedButtononPressed: (){}onLongPress: (){}child: Text (按钮)style: 背景色、文字色、圆角、paddingInkWellonTap: 点击onDoubleTap: 双击onLongPress: 长按splashColor: 水波纹颜色child: 子组件GestureDetectoronTap: 点击onDoubleTap: 双击onLongPress: 长按onPanUpdate: 拖拽child: 子组件Paddingpadding: EdgeInsets.all(10)padding: EdgeInsets.symmetric(horizontal:10, vertical:5)padding: EdgeInsets.only(left:10, top:5)child: 子组件SizedBoxwidth: 100height: 50SizedBox (width:20) 水平间距SizedBox (height:10) 垂直间距child: 子组件SafeAreatop: true / falsebottom: true / falseleft: true / falseright: true / falsechild: 子组件GridViewGridView.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
