当前位置：首页 > news >正文

鸿蒙ArkUI采用声明式布局体系，所有页面都遵循「一个根布局，根布局内可嵌套多层子布局」的规则，下面为你逐个讲解常用布局：

news 2026/7/2 20:44:26

垂直布局`Column`

`Column`是最常用的垂直排列容器，所有子元素会沿着垂直方向从上到下依次排列，可以通过属性控制对齐方式和元素间距，非常适合做页面的根容器、表单列表排列。

属性‌：

space
：设置所有子元素之间的统一间距
justifyContent
：控制子元素在‌垂直方向‌的对齐方式，常用值：Start（顶部对齐，默认）、Center（居中对齐）、End（底部对齐）、SpaceBetween（均匀分布，首尾不留空）、SpaceAround（均匀分布，首尾留半空）
alignItems
：控制子元素在‌水平方向‌的对齐方式，常用值：Start（左对齐）、Center（居中对齐）、End（右对齐）

代码示例：

@Entry @Component struct VerticalDemo { build() { Column({ space: 10 }) { Text("第一条内容") .fontSize(20) .width('100%') .backgroundColor('#f0f0f0') Text("第二条内容") .fontSize(20) .width('100%') .backgroundColor('#e0e0e0') Text("第三条内容") .fontSize(20) .width('100%') .backgroundColor('#f0f0f0') } .width('100%') .padding(15) .alignItems(HorizontalAlign.Start) } }

垂直布局示例代码运行效果图：

水平布局`Row`

Row是水平排列容器，所有子元素会沿着水平方向从左到右依次排列，适合做顶部导航栏、按钮组、横向表单项目排列。

属性‌：

space
：设置所有子元素之间的统一水平间距
justifyContent
：控制子元素在‌水平方向‌的对齐方式，取值和Column一致
alignItems
：控制子元素在‌垂直方向‌的对齐方式，常用值：Top（顶部对齐）、Center（居中对齐）、Bottom（底部对齐）

代码示例：

@Entry @Component struct HorizontalDemo { build() { Row({ space: 12 }) { // 水平排列，元素间距12vp Button("首页") Button("分类") Button("我的") } .width('100%') .height(50) .backgroundColor('#fff') .justifyContent(FlexAlign.Center) // 水平居中排列 .alignItems(VerticalAlign.Center) // 垂直居中对齐 } }

水平布局对齐方式示例效果图

相对布局`RelativeContainer`

相对布局是自由度极高的布局方式，允许子组件‌基于父容器，或者其他子组件设置对齐规则‌来确定位置，非常适合实现复杂的不规则页面布局，是鸿蒙开发中处理复杂界面的核心布局。

用法‌：

给每个需要定位的子组件设置唯一id
通过alignRules配置对齐规则：可以设置left（左边缘对齐）、right（右边缘对齐）、top（上边缘对齐）、bottom（下边缘对齐），规则内容为anchor: '组件id'表示对齐到对应组件的对应边缘

代码示例：

@Entry @Component struct RelativeDemo { build() { RelativeContainer() { // 床1：靠左上角 Text("1号床") .size({width: 100, height: 100}) .backgroundColor(Color.Pink) .alignRules({ left: {anchor: '__container__', align: RelativeAlign.Left}, top: {anchor: '__container__', align: RelativeAlign.Top} }) .id("bed1") // 床2：床1的右侧，顶部和床1对齐 Text("2号床") .size({width: 100, height: 100}) .backgroundColor(Color.Blue) .alignRules({ left: {anchor: 'bed1', align: RelativeAlign.Right}, top: {anchor: 'bed1', align: RelativeAlign.Top} }) .id("bed2") } .size({width: '100%', height: 400}) .padding(10) } }

（__container__代表根容器自身，代表对齐到父容器）

相对布局宿舍床位示例运行效果图

层叠布局`Stack`

Stack是层叠容器，子组件会按照代码顺序‌依次堆叠‌，后面写的组件会覆盖在前面的组件上方，非常适合实现「图片上飘文字」、「卡片角标」、「悬浮按钮」这类需要叠加元素的场景。

属性‌：

alignContent
：设置所有子元素整体的对齐方式
支持给子元素单独设置position，做绝对定位

代码示例：

@Entry @Component struct StackDemo { build() { Stack({ alignContent: Alignment.BottomEnd }) { // 底层：卡片内容 Column() { Text("课程卡片") .fontSize(18) } .width('90%') .height(200) .backgroundColor(Color.White) .borderRadius(12) // 上层：悬浮按钮，叠在右下角 Button("+") .width(40) .height(40) .borderRadius(20) .margin({ right: 10, bottom: 10 }) } .width('100%') .height(250) .padding(10) } }

层叠布局悬浮按钮示例运行效果图

5. 弹性布局`Flex`

Flex是流式弹性布局，相比Row/Column更灵活，支持设置换行，自动分配子元素空间，非常适合实现标签流、不规则网格、响应式排列这类场景。

属性‌：

direction
：设置主轴方向（水平还是垂直排列）
wrap
：设置是否换行，FlexWrap.Wrap代表自动换行，超出主轴宽度自动切到下一行，实现流式布局
justifyContent
、alignItems：和Row/Column类似，控制主轴和交叉轴的对齐方式

代码示例：

@Entry @Component struct FlexDemo { build() { Flex({ wrap: FlexWrap.Wrap, space: { mainAxis: 10, crossAxis: 10 } }) { // 多个标签自动换行 Text("鸿蒙开发") .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor('#e0f0ff') .borderRadius(16) Text("ArkTS") .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor('#e0f0ff') .borderRadius(16) Text("布局学习") .padding({ left: 12, right: 12, top: 6, bottom: 6 }) .backgroundColor('#e0f0ff') .borderRadius(16) // 更多标签... } .padding(15) } }