DevEco Studio鸿蒙中布局代码具体步骤
布局
一、鸿蒙 ArkTS 基础布局总述
在 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)
2. 水平布局 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("按钮") }
}
解决：将其中一个布局作为根容器，把另一个布局嵌套进内部。
组件超出屏幕显示不全
给根布局添加width("100%")铺满屏幕宽度，搭配padding控制边距，避免内容贴边。
四、总结
五种布局各有专属使用场景，开发页面时优先选择Column、Row完成基础排版；遇到叠加效果使用Stack；自适应多组件换行使用Flex；需要精准不规则定位时使用RelativeContainer。所有页面必须严格遵守单一根布局规则，通过嵌套组合完成全部 UI 开发。