布局介绍概述

一、布局概述

ArkUI 布局系统完整概述
ArkUI 是鸿蒙（HarmonyOS/OpenHarmony）声明式 UI 开发框架，其布局系统是界面开发的核心，负责控制组件的排列方式、对齐规则、尺寸大小、间距与跨设备适配。
ArkUI 布局基于弹性 Flex 模型设计，轻量化、易上手、全设备适配（手机 / 平板 / 穿戴 / 智慧屏），是鸿蒙应用开发的必备基础。

二、基础布局

这是 ArkUI 最常用的布局容器，按使用频率排序：

1. Column 垂直布局

作用：子组件从上到下垂直排列（最常用基础布局）

ets

Column() { Text("顶部文本") Button("垂直按钮") Text("底部文本") } .width('100%') // 宽度占满父容器 .height('100%') .justifyContent(FlexAlign.Center) // 垂直居中

2. Row 水平布局

作用：子组件从左到右水平排列（最常用基础布局）

ets

Row() { Text("左侧文本") Button("水平按钮") Text("右侧文本") } .width('100%') .justifyContent(FlexAlign.SpaceBetween) // 两端对齐

3. Flex 弹性布局

作用：通用弹性容器，可自由切换水平 / 垂直方向，适配复杂布局

ets

Flex({ direction: FlexDirection.Row }) { // Row=水平 Column=垂直 Text("弹性组件1") Text("弹性组件2") }

4. Stack 层叠布局

作用：子组件叠加层叠显示（用于悬浮按钮、背景图 + 文字、弹窗）

ets

Stack() { Image($r('app.media.bg')) // 底层背景 Text("悬浮文字") // 上层文字 Button("悬浮按钮") // 顶层按钮 }

5. RelativeContainer 相对布局

作用：子组件根据相对位置排列（左、右、上、下、居中）

三、常用扩展布局

适用于长列表、宫格等场景：

1. List：滚动列表布局（商品列表、消息列表）
2. Grid：网格宫格布局（相册、功能菜单）
3. Tabs：标签页布局（底部导航、顶部切换）

四、核心通用布局属性

所有布局容器都支持以下属性，控制对齐、间距、尺寸：

1. 对齐方式

• justifyContent：主轴对齐（垂直 / 水平居中、两端对齐）
• alignItems：交叉轴对齐

2. 间距与边距

• space：子组件之间的间距
• padding：容器内边距
• margin：容器外边距

3. 尺寸适配

• 固定尺寸：width(100)、height(50)
• 百分比：width('50%')（适配不同屏幕）
• 弹性拉伸：flexGrow(1)（自动占满剩余空间）

五、总结

1、Column + Row是 ArkUI 最核心的布局，支撑绝大多数界面开发；

2、布局通过属性控制对齐、间距、尺寸，语法简洁直观；

3、支持层叠、列表、网格等扩展布局，满足全场景需求；

4、声明式语法 + 弹性适配，是鸿蒙跨设备开发的核心优势。