鸿蒙 ArkUI 布局全面入门：五大核心布局从概念到实战代码
·
一、前言
在鸿蒙（HarmonyOS）应用开发中，ArkUI（方舟 UI） 是官方主推的声明式 UI 框架，凭借简洁的语法、高效的渲染能力，成为构建鸿蒙界面的核心工具。而布局作为 UI 开发的基石，决定了页面组件的排列、对齐与展示效果，掌握主流布局组件是入门 ArkUI 的必经之路。
本文结合官方基础知识点与实战案例，从零讲解 ArkUI 三大基础装饰器、五大常用布局（Column、Row、Stack、Flex、相对布局），搭配完整可运行代码，适合鸿蒙开发新手系统学习、实操练习。
二、ArkUI 三大核心装饰器（布局前置基础）
在编写任何布局代码前，必须先了解 ArkUI 规定的三大基础装饰器，这是所有自定义组件和页面的准入规则，缺一不可：
2. 核心常用属性
和Column属性逻辑一致，仅排列方向不同：
案例采用Stack + Row + Column 多层嵌套，模拟 APP 个人主页经典样式，是开发中高频组合用法：
2. 完整实战案例（头像 + VIP 角标 嵌套
- @Entry页面入口装饰器，用于标记当前自定义组件为独立页面，被该装饰器修饰的组件可以直接在模拟器 / 设备上运行，一个页面有且仅有一个入口组件。
- @Component自定义 UI 组件装饰器，用于定义可复用的界面结构体，所有 UI 布局、组件都需要依托该装饰器创建。
- @build组件构建方法，所有 UI 布局、子组件都必须编写在
build()方法内部，是界面渲染的核心入口。@Entry @Component struct 自定义组件名 { // 1. 数据定义区域（ArkTS 变量、状态数据） 变量名: 类型 = 初始值 // 2. UI布局渲染区域（所有布局写在此处） build() { // 布局容器 + 子组件 } }三、五大核心布局详解 + 实战代码
（一）Column 垂直线性布局
1. 核心概念
Column是垂直布局容器，子组件默认从上到下依次排列。 - 主轴：垂直方向（上下）
- 交叉轴：水平方向（左右）
- 个人信息页、表单、列表、竖向文本展示等绝大多数竖向页面适用场景
2. 核心常用属性
作用 space 统一设置子组件间距（官方推荐，替代 margin，界面更整洁） justifyContent 主轴（垂直）对齐：居顶、居中、居底、均分 alignItems 交叉轴（水平）对齐：左对齐、居中、右对齐 width / height 容器尺寸， 100%代表铺满全屏backgroundColor 容器背景色 padding 容器内边 
3. 完整实战案例（个人信息页面）
@Entry @Component struct ColumnPersonPage { build() { // 垂直布局，子组件间距18 Column({ space: 18 }) { Text("个人信息中心") .fontSize(30) .fontWeight(FontWeight.Bold) .margin({ bottom: 10 }) Text("姓名:张三").fontSize(22) Text("专业:移动应用开发").fontSize(22) Text("年级:2025级").fontSize(22) Text("学号:2025001001").fontSize(22) } // 容器铺满全屏 .width('100%') .height('100%') // 主轴垂直居中 .justifyContent(FlexAlign.Center) // 交叉轴水平居中 .alignItems(HorizontalAlign.Center) .backgroundColor(0xFFFFFF) .padding(30) } }（二）Row 水平线性布局
1. 核心概念
Row是水平布局容器，子组件默认从左到右依次排列。 - 主轴：水平方向（左右）
- 交叉轴：垂直方向（上下）
- 适用场景：导航栏、按钮组、图标 + 文字、横向功能模块等Huawei Developer。
space：子组件横向间距justifyContent：主轴（水平）对齐（左、中、右）alignItems：交叉轴（垂直）对齐（上、中、下）@Entry @Component struct RowAlignDemo { build() { // 外层垂直布局，分组展示不同对齐效果 Column({ space: 30 }) { // 1. 左对齐按钮组 Row({ space: 20 }) { Button("左1").width(80).height(35) Button("左2").width(80).height(35) } .width('100%') .justifyContent(FlexAlign.Start) // 2. 居中对齐按钮组 Row({ space: 20 }) { Button("中1").width(80).height(35) Button("中2").width(80).height(35) } .width('100%') .justifyContent(FlexAlign.Center) // 3. 右对齐按钮组 Row({ space: 20 }) { Button("右1").width(80).height(35) Button("右2").width(80).height(35) } .width('100%') .justifyContent(FlexAlign.End) } .width('100%') .height('100%') .padding(20) } }（三）Stack 层叠布局
1. 核心概念
Stack是层叠布局容器，子组件默认居中叠加渲染，后编写的组件会覆盖先编写的组件，无固定横竖排列规则。- 核心特点：组件叠加、悬浮覆盖
- 适用场景：头像角标、图片水印、Banner 海报、悬浮按钮、弹窗提示、图文叠加等。
@Entry
@Component
struct StackNestDemo {
build() {
Column({ space: 30 }) {
Text("个人主页")
.fontSize(30)
.fontWeight(FontWeight.Bold)
// 水平布局：左侧头像 + 右侧个人介绍
Row({ space: 20 }) {
// 层叠布局：圆形头像 + VIP角标
Stack() {
// 底层：圆形头像图片
Image($r('app.media.start_icon'))
.width(100)
.height(100)
.borderRadius(50)
// 上层：VIP标签（覆盖在图片上）
Text("VIP")
.fontSize(14)
.fontColor(Color.White)
.backgroundColor(0xFF3333)
.padding(4)
.borderRadius(6)
}
// 右侧文本信息（垂直排列）
Column({ space: 10 }) {
Text("鸿蒙开发者")
.fontSize(22)
.fontWeight(FontWeight.Medium)
Text("专注鸿蒙应用开发实训")
.fontSize(18)
.fontColor(Color.Gray)
}
}
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)
.alignItems(HorizontalAlign.Center)
.backgroundColor(0xFFFFFF)
}
}
（四）Flex 弹性布局
1. 核心概念
Flex 弹性布局是线性布局的升级版，支持自适应屏幕、子组件超出容器自动换行，适配不同尺寸鸿蒙设备，是复杂流式布局的首选。
- 核心优势：自动换行、比例分配空间、灵活对齐
- 适用场景：标签云、功能标签组、流式按钮、自适应菜单等。
2. 核心常用属性
wrap: FlexWrap.Wrap：开启自动换行（核心属性）space：子组件统一间距justifyContent：主轴对齐方式@Entry @Component struct FlexBaseDemo { build() { // 弹性布局：自动换行 + 子组件间距12 Flex({ wrap: FlexWrap.Wrap, space: 12 }) { Text("鸿蒙基础") .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(0xE8F4FF) .borderRadius(20) .fontSize(16) Text("ArkTS语法") .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(0xE8F4FF) .borderRadius(20) .fontSize(16) Text("ArkUI布局") .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(0xE8F4FF) .borderRadius(20) .fontSize(16) Text("组件开发") .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(0xE8F4FF) .borderRadius(20) .fontSize(16) Text("页面跳转") .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(0xE8F4FF) .borderRadius(20) .fontSize(16) Text("数据存储") .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor(0xE8F4FF) .borderRadius(20) .fontSize(16) } .width('100%') .padding(20) } }（五）相对布局（RelativeContainer）
1. 核心概念
相对布局（
RelativeContainer）是自由度极高的布局，不限制固定排列方向，通过锚点规则（alignRules） 让子组件参照其他组件的位置进行定位，适合需要精确定位、不规则布局的页面。- 核心逻辑：给组件设置唯一
id，其他组件通过anchor锚定目标组件，再设置上下左右对齐规则。 - 适用场景：复杂自定义页面、不规则控件布局、精准定位元素。
@Entry @Component struct RelativeLayoutDemo { build() { RelativeContainer() { // 基准按钮（锚点参照组件） Button("基准按钮") .id('buttonid1') .width(120) .height(40) .position({ x: 50, y: 50 }) // 图片组件：参照基准按钮，位于按钮下方，左对齐 Image($r('app.media.first')) .width('97%') .id('image1') .alignRules({ top: { anchor: 'buttonid1', align: VerticalAlign.Bottom }, left: { anchor: 'buttonid1', align: HorizontalAlign.Start } }) .margin({ top: 30 }) } .width('100%') .height('100%') } }四、拓展布局预告
除以上五大基础布局外，ArkUI 还提供两大高频进阶布局，后续可深入学习：
- 轮播图（Swiper）：用于首页 Banner、图片轮播、引导页，支持自动轮播、手势滑动。
- Tabs 标签页：主流 APP 顶部 / 底部标签栏，实现页面快速切换（首页、分类、我的等模块）。
五、布局选型总结（新手速记）
布局组件 排列方式 核心场景 优先级 Column 垂直从上到下 表单、列表、竖向文本 最高（基础首选） Row 水平从左到右 按钮组、导航、横向模块 最高（基础首选） Stack 层叠覆盖 头像角标、水印、悬浮按钮 中（叠加场景专用） Flex 自适应 + 自动换行 标签组、流式布局、多设备适配 中（流式布局首选） RelativeContainer 相对锚点定位 不规则页面、精准定位 低（复杂布局使用） 开发小技巧：实际项目中多布局嵌套是常态（Column + Row、Stack + Row），优先使用
space设置间距，减少margin滥用，让代码更规范、维护更简单。六、最后
ArkUI 布局是鸿蒙 UI 开发的地基，新手建议先吃透
Column和Row两大线性布局，再逐步掌握Stack层叠、Flex弹性布局，最后学习相对布局、轮播、Tabs 等进阶组件。
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)