一、Column 垂直布局竖着排队纵向排列核心一句话所有子组件从上到下垂直排列像竖列清单一样依次摆放是最常用的基础布局之一。典型实战场景微信聊天列表、外卖订单列表、个人资料页、表单输入页、商品详情竖排内容。核心常用属性justifyContent主轴对齐控制垂直方向的排列对齐方式支持顶部对齐、居中对齐、底部对齐、均分间距排列。alignItems交叉轴对齐控制水平方向的对齐方式支持左对齐、居中对齐、右对齐。适配总结只要是纵向罗列内容的页面优先用 Column结构简单、排版规整。二、Row 水平布局横着排队横向排列核心一句话所有子组件从左到右水平排列横向依次排布无默认堆叠和换行。典型实战场景页面顶部导航栏、底部按钮栏、一行功能图标、标签按钮组、搜索框按钮组合。核心常用属性justifyContent主轴对齐控制水平方向的排列方式可实现左对齐、居中、两端均分、间隔均匀分布等效果。alignItems交叉轴对齐控制垂直方向的对齐方式适配组件高低不一的居中、置顶、置底对齐。适配总结横向并列的按钮、图标、文字组合全部用 Row 实现是横向排版的首选布局。三、Stack 层叠布局叠罗汉层级覆盖核心一句话组件同位置层叠堆叠后写入的子组件会覆盖在前面组件的上方实现层级效果。典型实战场景图片叠加文字水印、商品图标右上角角标、视频封面叠加播放按钮、弹窗浮层、卡片悬浮文字。核心特点子组件不排队、不分行统一居中堆叠可单独设置每个子组件的对齐位置灵活实现悬浮覆盖效果。适配总结只要需要一层盖一层的层级UI直接用 Stack轻松实现悬浮、角标、水印效果。四、Flex 弹性布局自适应、自动挤、自动换行核心一句话Row 和 Column 的升级版支持自动换行、自动拉伸、自动均分剩余空间适配所有弹性排版场景。典型实战场景商品网格布局、热门标签流、自适应按钮组、多元素均分排版、屏幕适配自适应页面。核心优势支持水平/垂直双向排列切换内容超出容器可自动换行不会挤压溢出可设置子组件自动占满剩余空间、均分宽度高度适配不同屏幕尺寸兼容性极强适配总结简单横纵排列用 Row/Column复杂自适应、换行、均分布局一律用 Flex。五、RelativeContainer 相对布局自由锚点定位核心一句话不靠横竖排队、不靠层叠覆盖通过锚点规则实现组件相对定位谁靠谁、谁对齐谁自由控制。典型实战场景聊天气泡布局、个人中心复杂排版、异形页面、组件不规则定位、多组件相互依附的复杂UI。核心特点通过设置锚点关系可实现「A组件在B组件下方/右侧/居中」「组件贴边、居中、依附定位」自由度远超线性布局。适配总结常规排版布局实现不了的复杂、不规则、相互依附UI用 RelativeContainer 精准搞定。六、Swiper 轮播布局左右滑动翻页核心一句话支持左右滑动切换页面/图片自带轮播指示器小圆点可自动轮播、手动滑动。典型实战场景APP首页Banner广告、启动引导页、图片轮播展示、资讯滑动切换页面。核心能力支持自动播放、循环轮播、指示器显示/隐藏、滑动手势控制、切换动画自定义。适配总结所有滑动轮播场景Swiper 是专属最优解开箱即用无需自定义滑动逻辑。七、Tabs 标签切换布局选项卡页面切换核心一句话点击顶部/底部选项卡快速切换对应内容页面实现多页面快速切换效果。典型实战场景APP底部导航首页/分类/购物车/我的、顶部标签页推荐/热门/最新、分类选项卡切换。核心能力自带标签栏内容区联动点击标签自动切换页面支持自定义标签样式、选中状态、布局位置。适配总结多页面分类切换、标签导航场景优先使用 Tabs结构清晰、交互流畅。布局快速选型对照表新手必存纵向列表、表单→ Column横向按钮、导航、图标行→ Row层级覆盖、悬浮角标、水印→ Stack自适应、换行、网格、标签流→ Flex复杂依附、不规则定位UI→ RelativeContainer图片/页面轮播滑动→ Swiper标签页、导航多页面切换→ Tabs最后总结鸿蒙ArkUI布局的核心精髓根据场景选布局不滥用复杂组件。基础横竖排版用 Row、Column自适应弹性布局用 Flex层级堆叠用 Stack复杂定位用 RelativeContainer轮播切换用 Swiper标签导航用 Tabs。掌握这七大布局足以应对99%的APP页面开发场景。
