前言

在 ArkTS 页面开发中，布局容器是页面排版的核心，日常开发最常用Stack层叠、Flex弹性、RelativeContainer相对三种布局，本文结合实操案例梳理用法。

一、Stack 层叠布局（堆叠布局）

1. 布局原理

子组件自上而下层层叠加，后定义的组件覆盖在先定义组件之上，默认所有子组件在容器正中间对齐，多用于图片加文字、弹窗、浮标场景。

2. 核心属性

alignContent(Alignment.xxx)：统一修改内部所有子元素对齐位置 可选值：Alignment.Center(默认居中)、Alignment.TopStart(左上)、Alignment.BottomEnd(右下)

二、Flex 弹性布局（高频首选）

1. 布局原理

灵活控制子元素横向 / 纵向排列、自动换行、均分间距，是开发按钮组、宫格、流式卡片首选。

• FlexDirection.Row：横向从左向右排布（默认）
• FlexDirection.Column：纵向从上向下排布（等效 Column）

2. 常用属性

1. wrap(FlexWrap.Wrap)：子元素超出容器宽度时自动换行
2. justifyContent(FlexAlign.xxx)：主轴对齐：居中 / 两端分散对齐

三、RelativeContainer 相对布局

1. 布局原理

组件互相作为参照物定位，不用固定坐标，适配多尺寸屏幕； ⚠️ 强制规则：每一个子组件必须添加.id (' 标识 ')，通过alignRules绑定锚点； __container__关键字 = 代表 RelativeContainer 父容器本身。

四、Swiper 轮播组件

1. 作用

首页广告轮播，手指左右滑动切换内容，支持自动播放、循环、底部圆点指示器。

2. 常用属性

• autoPlay(true)：自动轮播
• interval(3000)：3 秒切换一次（单位 ms）
• loop(true)：无限循环
• indicator(true)：开启底部小圆点

  五、Tabs 标签导航

  1. 作用

  APP 底部菜单栏，点击标签切换页面，barPosition(BarPosition.End)设置标签在底部。

• Tabs：外层容器
• TabContent：单个页面内容
• .tabBar('文字')：导航栏文字