本对照表用于帮助 Android 开发者快速理解 Flutter 中的布局组件与原生布局的关系。
📘 Flutter ↔ Android 布局组件对照表
Flutter Widget | Android View/Layout | 说明 |
---|
Container | FrameLayout / View | 通用容器,可设置背景、边距、对齐等 |
Row | LinearLayout (horizontal) | 横向线性排列 |
Column | LinearLayout (vertical) | 纵向线性排列 |
Stack | FrameLayout | 层叠布局 |
Positioned (在 Stack 内) | FrameLayout + layout_gravity / margin | 绝对定位的子项 |
Align / Center | RelativeLayout + layout_centerInParent / gravity | 对齐到父级 |
Expanded | LinearLayout + layout_weight | 占据剩余空间 |
Flexible | layout_weight + 自适应 | 灵活伸缩(类似 weight 的 wrap_content) |
SizedBox | View + layout_width/height | 固定尺寸 |
Padding | android:padding | 设置内边距 |
Margin (通过 Padding 外包) | android:layout_margin | Flutter 没有 Margin,通常通过外层 Padding 模拟 |
Wrap | FlexboxLayout / 自定义 FlowLayout | 自动换行布局 |
Table | TableLayout | 表格布局 |
IntrinsicWidth/Height | wrap_content | 尺寸自适应内容(性能差时慎用) |
Transform | View.setRotation/Scale/Translation | 变换视图 |
CustomPaint | Canvas + View 自定义绘制 | 自定义绘图 |
📱 滚动与列表布局
Flutter Widget | Android View/Layout | 说明 |
---|
SingleChildScrollView | ScrollView | 单个滚动子项 |
ListView | ListView / RecyclerView | 垂直滚动列表 |
GridView | GridView / RecyclerView + GridLayoutManager | 网格布局 |
PageView | ViewPager2 | 翻页组件 |
CustomScrollView + Slivers | RecyclerView + 多类型 ViewType | 自定义滚动内容 |
🔧 复杂布局、定位、对齐
Flutter Widget | Android View/Layout | 说明 |
---|
RelativeLayout 等效 | 无直接对应(但以下组合可实现) | |
Stack + Positioned | RelativeLayout + rules | 实现子元素相对布局 |
Align | RelativeLayout + alignParentX/Y | 单个子项对齐 |
LayoutBuilder | onMeasure() + 自定义布局 | 根据父布局约束决定子布局 |
CustomMultiChildLayout | ViewGroup + onLayout() | 自定义多个子控件位置 |
FractionallySizedBox | 百分比布局(无直接原生对应) | 占父布局一定比例 |
Positioned.fill | match_parent | 填满父容器 |
OverflowBox | clipChildren=false | 允许子项溢出父容器 |
🧩 页面结构与导航
Flutter Widget | Android View/Layout | 说明 |
---|
Scaffold | Activity + 页面根布局 | 页面基础骨架 |
AppBar | Toolbar | 顶部导航栏 |
BottomNavigationBar | BottomNavigationView | 底部导航栏 |
Drawer | DrawerLayout + NavigationView | 左右侧滑菜单 |
TabBar + TabBarView | TabLayout + ViewPager2 | 顶部 Tab 页面切换 |
Navigator + Route | FragmentManager / Intent | 页面导航系统 |
🎨 控件级对应(附加)
Flutter Widget | Android View | 说明 |
---|
Text | TextView | 显示文本 |
TextField | EditText | 输入框 |
ElevatedButton | Button | 默认按钮 |
IconButton | ImageButton | 图标按钮 |
Image | ImageView | 显示图片 |
Checkbox | CheckBox | 复选框 |
Radio | RadioButton | 单选按钮 |
Switch | Switch | 开关按钮 |
Slider | SeekBar | 滑动条 |
ProgressIndicator | ProgressBar | 进度条 |
AlertDialog | AlertDialog | 弹窗对话框 |
SnackBar | Toast / Snackbar | 底部提示 |
DropdownButton | Spinner | 下拉菜单 |
🧠 总结建议
- Flutter 更强调组合式声明性布局,Android 更偏向静态 XML。
- Flutter 的
Stack + Positioned
是最接近 RelativeLayout
的实现方式。 - 灵活使用
Align
、Expanded
、Flexible
可以覆盖大部分 Android 布局需求。