在 HarmonyOS ArkTS 开发中，布局容器是页面 UI 排版的核心载体，所有文本、图片、按钮等组件都必须放置在布局容器内进行有序排列。系统提供 5 类常用基础布局，分别为：垂直布局、水平布局、相对布局、层叠布局、弹性布局。

通用核心布局规则

单页面唯一根布局规则：任意页面的build()函数中，只能存在一个顶层根布局容器，不允许并列多个根布局；
布局嵌套规则：可在根布局容器内部，无限嵌套其他任意布局容器，通过多层嵌套组合实现复杂页面排版；
布局通用属性：所有布局容器均支持width、height、padding、margin、justifyContent、alignItems等通用样式控制组件对齐、间距与尺寸。

二、五大布局详细介绍

1. 垂直布局 Column

组件标识：Column()

排列规则：内部所有子组件 ** 沿垂直方向（从上至下）** 依次排列。

适用场景：

页面正文图文上下排版（如学校简介、详情介绍页面）；

表单输入框纵向排列；

列表、轮播 + 文字组合页面。

核心对齐属性：

.justifyContent(FlexAlign.Center)：垂直居中；

.alignItems(ItemAlign.Center)：水平居中；

最简示例代码：

ets

Column(){

  Text("第一行文字")

  Text("第二行文字")

}

.width("100%")

.padding(15)

. 水平布局 Row

组件标识：Row()

排列规则：内部所有子组件 ** 沿水平方向（从左至右）** 依次排列。

适用场景：

顶部导航栏、底部标签栏；

按钮组、横向功能选项；

图片 + 文字横向组合卡片。

核心对齐属性：

.justifyContent(FlexAlign.SpaceEvenly)：组件均匀平分横向空间；

.alignItems(ItemAlign.Center)：垂直居中；

最简示例代码：

ets

Row(){

  Text("按钮1")

  Text("按钮2")

  Text("按钮3")

}

.width("100%")

3. 相对布局 RelativeContainer

组件标识：RelativeContainer()

排列规则：不固定排布方向，通过给每个子组件设置 ID、锚点关系，控制组件相对位置（左、右、上、下、居中）。

适用场景：复杂精准定位页面，例如登录页 logo、输入框、按钮错落排版，不规则卡片布局。

特点：自由度最高，适合无法用 Row/Column 简单实现的不规则界面。

4. 层叠布局 Stack

组件标识：Stack()

排列规则：所有子组件在同一坐标位置层层堆叠，代码后书写的组件会覆盖在先写组件上方。

适用场景：

轮播图底部小圆点指示器；

图片上方叠加文字水印 / 标题；

弹窗浮层、遮罩层；

最简示例代码（图片叠加文字）：

ets

Stack(){

  Image($r("app.media.school"))

    .width("100%")

    .height(180)

  Text("校园风光")

    .fontSize(22)

    .fontColor(Color.White)

}

5. 弹性布局 Flex

组件标识：Flex()

排列规则：可自由切换水平 / 垂直主轴方向，支持子组件自动换行、自动均分剩余空间，兼具 Row 与 Column 能力，是自适应页面首选布局。

核心控制属性：

.direction(FlexDirection.Row)：水平排列；

.direction(FlexDirection.Column)：垂直排列；

.wrap(FlexWrap.Wrap)：子组件自动换行；

适用场景：多设备自适应页面、多标签自动换行、商品网格布局。

三、布局开发常见易错点

报错：多个根布局

错误写法：

ets

build(){

  Column(){ Text("内容") }

  Row(){ Text("按钮") }

}

、总结

五种布局各有专属使用场景，开发页面时优先选择Column、Row完成基础排版；遇到叠加效果使用Stack；自适应多组件换行使用Flex；需要精准不规则定位时使用RelativeContainer。所有页面必须严格遵守单一根布局规则，通过嵌套组合完成全部 UI 开发。