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

浩宇软件开发

已于 2024-08-09 10:47:55 修改

阅读量1.9k

点赞数 9

分类专栏： HarmonyOS NEXT鸿蒙开发文章标签： harmonyos ui 华为

于 2024-07-26 11:16:57 首次发布

本文链接：https://blog.csdn.net/jky_yihuangxing/article/details/140710459

版权

HarmonyOS NEXT鸿蒙开发专栏收录该内容

9 篇文章 3 订阅

订阅专栏

文章目录

1. 涉及到的技术点

RelativeContainer相对布局使用

2. 概述

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

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

3. 基本概念

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

3.设置依赖关系

锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上，可以设置left、middle、right的锚点。在竖直方向上，可以设置top、center、bottom的锚点。
为了明确定义锚点，必须为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%')
  }
}