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

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://www.lryc.cn/news/2395941.html

相关文章:

  • 【产品经理从0到1】自媒体端产品设计
  • 017搜索之深度优先DFS——算法备赛
  • 解决 maven编译项目-Fatal error compiling: 无效的目标发行版: 21 -> [Help 1]
  • Thinkphp6实现websocket
  • web-css
  • 关于 smali:2. 从 Java 到 Smali 的映射
  • 三、zookeeper 常用shell命令
  • 分布式流处理与消息传递——Paxos Stream 算法详解
  • 智变与重构:AI 赋能基础教育教学的范式转型研究报告
  • 平衡三进制
  • 针对Python开发的工具推荐及分析,涵盖集成开发环境(IDE)、轻量级工具、在线开发平台、代码管理工具等)
  • 960g轻薄本,把科技塞进巧克力盒子
  • xcode 编译运行错误 Sandbox: rsync(29343) deny(1) file-write-create
  • C# 基于 Windows 系统与 Visual Studio 2017 的 Messenger 消息传递机制详解:发布-订阅模式实现
  • ComfyUI+阿里Wan2.1+内网穿透技术:本地AI视频生成系统搭建实战
  • 腾讯云开发者社区文章内容提取免费API接口教程
  • 利用海外代理IP,做Twitter2026年全球趋势数据分析
  • OpenLayers 图形交互编辑
  • pikachu靶场通关笔记06 XSS关卡02-反射型POST
  • SQLiteStudio - 免费开源、轻量高效,跨平台的 SQLite 数据库管理工具,代替 Navicat for SQLite
  • Prometheus + Grafana + Cadvisor:构建高效企业级服务监控体系
  • WEBSTORM前端 —— 第3章:移动 Web —— 第2节:空间转换、转化
  • Java研学-MongoDB(一)
  • 【AI面试秘籍】| 第25期:RAG的关键痛点及解决方案深度解析
  • OpenGL、GLUT、freeGLUT 与 GLFW 的区别
  • 服务器带宽线路的区别(GIA、CN2、BGP、CMI等)
  • ppt一键制作:ai自动生成PPT,便捷高效超级精美!
  • 多方法解决MNIST数字识别
  • Maven(黑马)
  • CppCon 2014 学习:ODB, Advanced Weapons and Tactics