Flutter 与 Android 原生布局组件对照表(完整版)

发布于:2025-05-29 ⋅ 阅读:(30) ⋅ 点赞:(0)

本对照表用于帮助 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 的实现方式。
  • 灵活使用 AlignExpandedFlexible 可以覆盖大部分 Android 布局需求。

网站公告

今日签到

点亮在社区的每一天
去签到