大家好，我是潘 Sir，持续分享 IT 技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容、欢迎关注！
ArkUI 提供了各种布局组件用于界面布局，本文研究使用 Stack 组件实现层叠布局。
一、布局基础
1.1 概述
布局是指对页面组件进行排列和定位的过程，其目的是有效地组织和展示页面内容，会涉及到组件的大小、位置以及它们之间的相互关系等等。
1.2 盒子模型
在鸿蒙应用中，页面上的每个组件都可以看做是一个矩形的盒子，这个盒子包含了内容区域（content）、边框（border）、内边距（padding）和外边距（margin），各部分内容如下图所示
其中 margin、padding 和 border 均可使用同名的属性方法进行设置，各方法定义如下
margin(value: { top?:Length, right?:Length, bottom?:Length, left?:Length } | Length )
复制代码
说明：
Length=string | number | Resource
当参数类型为Length时，四个方向的边距同时生效
padding(value: { top?:Length, right?:Length, bottom?:Length, left?:Length } | Length )
复制代码
border(value: {width?:Length, color?:ResourceColor, radius?:Length, style?:BorderStyle })
复制代码
各属性含义如下
width属性表示边框宽度
color属性表示边框颜色
radius属性表示边框圆角半径
style属性表示边框样式，可通过BorderStyle这一枚举类型进行设置，可选的枚举值有
二、层叠布局 Stack
2.1 概述
层叠布局是指将多个组件沿垂直于屏幕的方向堆叠在一起，类似于图层的叠加。以下效果都可以通过层叠布局实现
层叠布局可通过 Stack 容器组件实现，其子元素会按照其添加顺序依次叠加在一起，后添加的子元素位于先添加的子元素之上。具体效果如下
Stack() { Row() .width(250) .height(250) .backgroundColor('#107B02') //绿色 .shadow({radius:50}) Row() .width(200) .height(200) .backgroundColor('#E66826') //橙色 .shadow({radius:50}) Row() .width(150) .height(150) .backgroundColor('#255FA7') //蓝色 .shadow({radius:50})}.width(300).height(300).backgroundColor('#E5E5E5') //灰色
复制代码
效果
示例代码
pages/component 目录下新建 stack 目录，新建 StackPage.ets 文件
@Entry@Componentstruct StackPage { build() { Column() { Stack() { Row() .width(250) .height(250) .backgroundColor('#107B02') //绿色 .shadow({radius:50})
Row() .width(200) .height(200) .backgroundColor('#E66826') //橙色 .shadow({radius:50}) Row() .width(150) .height(150) .backgroundColor('#255FA7') //蓝色 .shadow({radius:50}) } .width(300) .height(300) .backgroundColor('#E5E5E5')
}.width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
2.2 参数
Stack 组件的参数类型为{ alignContent?: Alignment }，alignContent用于设置子组件的对齐方式，该属性可通过枚举类型Alignment进行设置，可选的枚举值及其效果如下图所示
该参数的一个实际使用场景如下：
示例代码
拷贝 icon_v.png 和 img_avatar.png 文件到目录 resources/base/media 目录
pages/component/stack 目录，新建 AlignContentPage.ets 文件
@Entry@Componentstruct AlignmentContentPage { build() { Column() { Stack({alignContent:Alignment.BottomEnd}) { Image($r('app.media.img_avatar')) .width('100%') .height('100%') Image($r('app.media.icon_v')) .width(60) .height(60) } .width(200) .height(200)
}.width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
2.3 使用技巧
2.3.1 子组件 Z 轴控制
Stack 容器中子组件的层级除了可按照添加顺序决定，还能通过zIndex()进行手动的设置，zIndex的值越大，层级越高。
Stack() { Row() .width(150) .height(150) .backgroundColor('#255FA7') //蓝色 .shadow({ radius: 50 }) .zIndex(3)
Row() .width(200) .height(200) .backgroundColor('#E66826') //橙色 .shadow({ radius: 50 }) .zIndex(2) Row() .width(250) .height(250) .backgroundColor('#107B02') //绿色 .shadow({ radius: 50 }) .zIndex(1)
}.width(300).height(300).backgroundColor('#E5E5E5') //灰色
复制代码
效果
示例代码
pages/component/stack 目录，新建 ZIndexPage.ets 文件
@Entry@Componentstruct ZIndexPage { build() { Column() { Stack() { Row() .width(150) .height(150) .backgroundColor('#255FA7') //蓝色 .shadow({ radius: 50 }) .zIndex(3)
Row() .width(200) .height(200) .backgroundColor('#E66826') //橙色 .shadow({ radius: 50 }) .zIndex(2)
Row() .width(250) .height(250) .backgroundColor('#107B02') //绿色 .shadow({ radius: 50 }) .zIndex(1)
}.width(300) .height(300) .backgroundColor('#E5E5E5')
}.width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
2.3.2 子组件精确定位
Stack 容器的子组件可使用position()方法进行更精确的定位，该方法可设置子组件左上角相对于 Stack 容器左上角的偏移量，具体效果如下
代码：
Stack() { Image($r('app.media.img_avatar')) .width('100%') .height('100%') Image($r('app.media.icon_v')) .width(60) .height(60) .position({ x: 140, y: 140 })}.width(200).height(200)
复制代码
效果
示例代码
pages/component/stack 目录，新建 PositionPage.ets 文件
@Entry@Componentstruct PositionPage { build() { Column() { Stack() { Image($r('app.media.img_avatar')) .width('100%') .height('100%') Image($r('app.media.icon_v')) .width(60) .height(60) .position({ x: 140, y: 140 }) } .width(200) .height(200)
}.width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！
评论