1. 涉及到的技术点
- RelativeContainer相对布局使用
2. 概述
在应用的开发过程中,经常需要设计复杂界面,此时涉及到多个相同或不同组件之间的嵌套。如果布局组件嵌套深度过深,或者嵌套组件数过多,会带来额外的开销。如果在布局的方式上进行优化,就可以有效的提升性能,减少时间开销。
RelativeContainer为采用相对布局的容器,支持容器内部的子元素设置相对位置关系,适用于界面复杂场景的情况,对多个子组件进行对齐和排列。子元素支持指定兄弟元素作为锚点,也支持指定父容器作为锚点,基于锚点做相对位置布局。下图是一个RelativeContainer的概念图,图中的虚线表示位置的依赖关系。
3. 基本概念
- 锚点:通过锚点设置当前元素基于哪个元素确定位置。
- 对齐方式:通过对齐方式,设置当前元素是基于锚点的上中下对齐,还是基于锚点的左中右对齐。
3.设置依赖关系
- 锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上,可以设置left、middle、right的锚点。在竖直方向上,可以设置top、center、bottom的锚点。
- 为了明确定义锚点,必须为RelativeContainer及其子元素设置ID,用于指定锚点信息。ID默认为“container”,其余子元素的ID通过id属性设置。未设置ID的子元素在RelativeContainer中不会显示。互相依赖,环形依赖时容器内子组件全部不绘制。同方向上两个以上位置设置锚点,但锚点位置逆序时此子组件大小为0,即不绘制。
4. 官方使用指南
5. demo实现猫眼app启动页
@Entry
@Component
struct Index {
build() {
//使用相对布局容易实现,不需要嵌套
RelativeContainer() {
Row() {
Text('3s | 跳转').fontColor('#fff')
}
.justifyContent(FlexAlign.Center)
.height(40).width(80).backgroundColor('#e22418')
.borderRadius(20)
//锚点设置 用于指定锚点信息。ID默认为“__container__”
.alignRules({
right:{
anchor: '__container__',
align: HorizontalAlign.End
},
top:{
anchor: '__container__',
align:VerticalAlign.Top
}
})
//子组件经过相对位置对齐后,位置可能还不是目标位置,开发者可根据需要进行额外偏移设置offset
.offset({
x:-20,
y:10
})
Image($r('app.media.img_logo'))
.height(89)
.alignRules({
top: {
anchor: '__container__',
align: VerticalAlign.Center
},
left: {
anchor: '__container__',
align: HorizontalAlign.Center
}
})//由于logo占据了宽度和高度,要居中,还要偏移宽度和高度的一半,才是正居中位置
.offset({
x: -44,
y: -44
})
.borderRadius(40)
}
.width('100%')
.height('100%')
}
}
6. 运行效果图
7. 其它控件官方学习指南
- 线性布局 (Row/Column): https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-linear-V5
- 显示图片 (Image):https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-graphics-display-V5
- 文本显示 (Text/Span):https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-common-components-text-display-V5