鸿蒙HarmonyOS NEXT开发，实现app启动页UI（一）

文章目录

1. 涉及到的技术点

1. RelativeContainer相对布局使用

2. 概述

在应用的开发过程中，经常需要设计复杂界面，此时涉及到多个相同或不同组件之间的嵌套。如果布局组件嵌套深度过深，或者嵌套组件数过多，会带来额外的开销。如果在布局的方式上进行优化，就可以有效的提升性能，减少时间开销。

RelativeContainer为采用相对布局的容器，支持容器内部的子元素设置相对位置关系，适用于界面复杂场景的情况，对多个子组件进行对齐和排列。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。下图是一个RelativeContainer的概念图，图中的虚线表示位置的依赖关系。

3. 基本概念

1. 锚点：通过锚点设置当前元素基于哪个元素确定位置。
2. 对齐方式：通过对齐方式，设置当前元素是基于锚点的上中下对齐，还是基于锚点的左中右对齐。

3.设置依赖关系

1. 锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上，可以设置left、middle、right的锚点。在竖直方向上，可以设置top、center、bottom的锚点。
2. 为了明确定义锚点，必须为RelativeContainer及其子元素设置ID，用于指定锚点信息。ID默认为“container”，其余子元素的ID通过id属性设置。未设置ID的子元素在RelativeContainer中不会显示。互相依赖，环形依赖时容器内子组件全部不绘制。同方向上两个以上位置设置锚点，但锚点位置逆序时此子组件大小为0，即不绘制。

4. 官方使用指南

官网地址：相对布局 (RelativeContainer)

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. 其它控件官方学习指南

1. 线性布局 (Row/Column)： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-linear-V5
2. 显示图片 (Image)：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-graphics-display-V5
3. 文本显示 (Text/Span)：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-common-components-text-display-V5