当前位置: 首页 > 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://www.xdnf.cn/news/687259.html

相关文章:

  • TencentOSTiny
  • 【模型显著性分析】配对样本 t 检验
  • 虚拟与现实时空认知同步的核心指标
  • maven中的maven-resources-plugin插件详解
  • 部署LVS-DR群集
  • Docker部署Spark大数据组件:配置log4j日志
  • Vue开发系列——零基础HTML引入 Vue.js 实现页面之间传参
  • Kotlin 中的数据类型有隐式转换吗?为什么?
  • 天津工作机会:技术文档工程师 - 华海清科股份有限公司
  • 【Linux】分页式存储管理:深刻理解页表映射
  • 【Doris基础】Apache Doris 基本架构深度解析:从存储到查询的完整技术演进
  • 金砖国家人工智能高级别论坛在巴西召开,华院计算应邀出席并发表主题演讲
  • 960g轻薄本,把科技塞进巧克力盒子
  • 从零开始学安全:服务器被入侵后的自救指南
  • 第二章 1.5 数据采集安全风险防范之数据采集安全管理
  • git和gitee的常用语句命令
  • JS语言基础
  • LiveNVR 直播流拉转:Onvif/RTSP/RTMP/FLV/HLS 支持海康宇视天地 SDK 接入-视频广场页面集成与视频播放说明
  • 实验设计与分析(第6版,Montgomery)第3章单因子实验:方差分析3.11思考题3.7 R语言解题
  • RuoYi前后端分离项目集成magic-api,并继承RuoYi的权限认证体系来管理magic-api
  • mongodb集群之副本集
  • IP证书的作用与申请全解析:从安全验证到部署实践
  • 【数据集】无缝1 km地表温度数据集(US)
  • 树莓派搭配 Tailscale 搭建个人云网盘
  • 使用 Kali Linux 入侵 Metasploitable 2 虚拟机
  • Bert和GPT区别
  • 生成式引擎优化(GEO):构建AI时代的内容霸权
  • 8卡910B4-32G测试Qwen2.5-VL-72B-instruct模型兼容性
  • (九)深度学习---自然语言处理基础
  • 设计模式25——中介者模式