本对照表用于帮助 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 布局需求。