当前位置: 首页 > news >正文

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

本对照表用于帮助 Android 开发者快速理解 Flutter 中的布局组件与原生布局的关系。


📘 Flutter ↔ Android 布局组件对照表

Flutter WidgetAndroid View/Layout说明
ContainerFrameLayout / View通用容器,可设置背景、边距、对齐等
RowLinearLayout (horizontal)横向线性排列
ColumnLinearLayout (vertical)纵向线性排列
StackFrameLayout层叠布局
Positioned (在 Stack 内)FrameLayout + layout_gravity / margin绝对定位的子项
Align / CenterRelativeLayout + layout_centerInParent / gravity对齐到父级
ExpandedLinearLayout + layout_weight占据剩余空间
Flexiblelayout_weight + 自适应灵活伸缩(类似 weight 的 wrap_content)
SizedBoxView + layout_width/height固定尺寸
Paddingandroid:padding设置内边距
Margin (通过 Padding 外包)android:layout_marginFlutter 没有 Margin,通常通过外层 Padding 模拟
WrapFlexboxLayout / 自定义 FlowLayout自动换行布局
TableTableLayout表格布局
IntrinsicWidth/Heightwrap_content尺寸自适应内容(性能差时慎用)
TransformView.setRotation/Scale/Translation变换视图
CustomPaintCanvas + View 自定义绘制自定义绘图

📱 滚动与列表布局

Flutter WidgetAndroid View/Layout说明
SingleChildScrollViewScrollView单个滚动子项
ListViewListView / RecyclerView垂直滚动列表
GridViewGridView / RecyclerView + GridLayoutManager网格布局
PageViewViewPager2翻页组件
CustomScrollView + SliversRecyclerView + 多类型 ViewType自定义滚动内容

🔧 复杂布局、定位、对齐

Flutter WidgetAndroid View/Layout说明
RelativeLayout 等效无直接对应(但以下组合可实现)
Stack + PositionedRelativeLayout + rules实现子元素相对布局
AlignRelativeLayout + alignParentX/Y单个子项对齐
LayoutBuilderonMeasure() + 自定义布局根据父布局约束决定子布局
CustomMultiChildLayoutViewGroup + onLayout()自定义多个子控件位置
FractionallySizedBox百分比布局(无直接原生对应)占父布局一定比例
Positioned.fillmatch_parent填满父容器
OverflowBoxclipChildren=false允许子项溢出父容器

🧩 页面结构与导航

Flutter WidgetAndroid View/Layout说明
ScaffoldActivity + 页面根布局页面基础骨架
AppBarToolbar顶部导航栏
BottomNavigationBarBottomNavigationView底部导航栏
DrawerDrawerLayout + NavigationView左右侧滑菜单
TabBar + TabBarViewTabLayout + ViewPager2顶部 Tab 页面切换
Navigator + RouteFragmentManager / Intent页面导航系统

🎨 控件级对应(附加)

Flutter WidgetAndroid View说明
TextTextView显示文本
TextFieldEditText输入框
ElevatedButtonButton默认按钮
IconButtonImageButton图标按钮
ImageImageView显示图片
CheckboxCheckBox复选框
RadioRadioButton单选按钮
SwitchSwitch开关按钮
SliderSeekBar滑动条
ProgressIndicatorProgressBar进度条
AlertDialogAlertDialog弹窗对话框
SnackBarToast / Snackbar底部提示
DropdownButtonSpinner下拉菜单

🧠 总结建议

  • Flutter 更强调组合式声明性布局,Android 更偏向静态 XML。
  • Flutter 的 Stack + Positioned 是最接近 RelativeLayout 的实现方式。
  • 灵活使用 AlignExpandedFlexible 可以覆盖大部分 Android 布局需求。

相关文章:

  • HTTP协议接口三种测试方法之-JMeter(保姆教程)
  • GO——内存逃逸分析
  • goofys挂载minio为本地目录
  • IAR创建STM8裸机工程创建---STM8开发【二】
  • 金融全业务场景的系统分层与微服务域架构切分
  • 科技赋能音乐,指北科技新品闪耀广州国际乐器展
  • 智慧场馆:科技赋能的艺术盛宴
  • 青岛市长任刚与深兰科技董事长陈海波会谈,深兰青岛项目即将进入快车道!
  • leetcode hot100刷题日记——24.回文链表
  • Problem H. saki 酱 saki 酱 saki 酱 saki 酱(树的直径)
  • 影刀RPA-17- 列表练习
  • OpenCV CUDA模块直方图计算------在 GPU上执行直方图均衡化(Histogram Equalization)函数equalizeHist
  • 【Redis】基本命令
  • 油桃TV v20250519 一款电视端应用网站聚合TV播放器 支持安卓4.1
  • 英飞凌SBC芯片TLE9263QX for STM32的库函数与使用
  • git push Git远端意外挂断
  • 基于FPGA的DES加解密系统verilog实现,包含testbench和开发板硬件测试
  • AI笔记 - 模型调试 - 调试方式
  • 基于ssm的商城系统(全套)
  • 为 MCP Server 提供 Auth 认证,及 Django 实现示例
  • 莱芜 网站/济南seo官网优化
  • 做网站网站加载内容慢怎么解决/搜索引擎有哪些好用
  • 湖南建设厅网站不良记录/移动建站优化
  • 建设网站域名备案/优化大师优化项目有哪些
  • 自己做网站可以揽业务吗/专业优化网站排名
  • 哪个网站做二手车抵押/怎样把个人介绍放到百度