界面布局:层叠布局
大家好,我是潘Sir,持续分享IT技术,帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中,陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注!
ArkUI提供了各种布局组件用于界面布局,本文研究使用Stack组件实现层叠布局。
一、布局基础
1.1 概述
布局是指对页面组件进行排列和定位的过程,其目的是有效地组织和展示页面内容,会涉及到组件的大小、位置以及它们之间的相互关系等等。
1.2 盒子模型
在鸿蒙应用中,页面上的每个组件都可以看做是一个矩形的盒子,这个盒子包含了内容区域(content)、边框(border)、内边距(padding)和外边距(margin),各部分内容如下图所示
其中margin、padding和border均可使用同名的属性方法进行设置,各方法定义如下
- margin
margin(value: { top?:Length, right?:Length, bottom?:Length, left?:Length } | Length )
说明:
Length
=string | number | Resource
- 当参数类型为
Length
时,四个方向的边距同时生效
- padding
padding(value: { top?:Length, right?:Length, bottom?:Length, left?:Length } | Length )
- border
border(value: {width?:Length, color?:ResourceColor, radius?:Length, style?:BorderStyle })
各属性含义如下
-
- width
width
属性表示边框宽度
-
- color
color
属性表示边框颜色
-
- radius
radius
属性表示边框圆角半径
-
- style
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
@Component
struct 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
@Component
struct 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
@Component
struct 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
@Component
struct 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+编程、企业级项目实战等原创内容,防止迷路,欢迎关注!