一、前言在鸿蒙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) } }五相对布局RelativeContainer1. 核心概念相对布局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 等进阶组件。
鸿蒙 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) } }五相对布局RelativeContainer1. 核心概念相对布局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 等进阶组件。
