HarmonyOS 相对布局（RelativeContainer）

时间：2024-10-26 08:01:40

1. HarmonyOS 相对布局（RelativeContainer）

  文档中心:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-layout-development-relative-layout-V5
  RelativeContainer为采用相对布局的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。下图是一个RelativeContainer的概念图，图中的虚线表示位置的依赖关系。
在这里插入图片描述

import { TitleBar } from '../../components/common/TitleBar'
import { router } from '@kit.ArkUI'
import { RouterParams } from 'zzslib'

//子组件相对父组件位置
let sonRule1: Record<string,
Record<string, string | VerticalAlign | HorizontalAlign>> = {
  'top': {
    'anchor': '__container__',
    'align': VerticalAlign.Top
  },
  'left': {
    'anchor': '__container__',
    'align': HorizontalAlign.Start
  }
}
let sonRule2: Record<string,
Record<string, string | VerticalAlign | HorizontalAlign>> = {
  'top': {
    'anchor': '__container__',
    'align': VerticalAlign.Top
  },
  'right': {
    'anchor': '__container__',
    'align': HorizontalAlign.End
  }
}
let sonRule3: Record<string,
Record<string, string | VerticalAlign | HorizontalAlign>> = {
  'bottom': {
    'anchor': '__container__',
    'align': VerticalAlign.Bottom
  },
  'right': {
    'anchor': '__container__',
    'align': HorizontalAlign.End
  },
}

//父组件样式
@Extend(RelativeContainer)
function extendFather() {
  .width(300)
  .height(300)
  .margin({ 'left': 20 })
  .border({
    'width': 2,
    'color': '#6699FF'
  })
}

//子组件样式
@Extend(Row)
function extendSon() {
  .justifyContent(FlexAlign.Center)
  .width(100)
  .height(100)
  .backgroundColor("#FF3333")
}

//子组件样式
@Extend(Row)
function extendSon3() {
  .width('100%')
  .padding({top:10,bottom:10})
  .justifyContent(FlexAlign.Center)
  .backgroundColor("#FF66FF")
}

@Entry
@Component
struct RelativePage {
  @State pageTitle: string = "RelativeContainer"

  aboutToAppear() {
    try {
      this.pageTitle = (router.getParams() as RouterParams).title
    } catch (e) {
    }
  }

  build() {
    Column() {
      TitleBar({ pageTitle: $pageTitle })
      Text('相对布局 (RelativeContainer)')
      RelativeContainer() {
        Row() {
          Text('son1')
        }
        .id("row1")
        .alignRules(sonRule1)
        .extendSon()

        Row() {
          Text('son2')
        }
        .id("row2")
        .alignRules(sonRule2)
        .extendSon()

        Row() {
          Text('son3')
        }
        .id("row3")
        .alignRules(sonRule3)
        .extendSon3()

      }
      .id("father_id")
      .extendFather()
    }
  }
}

1.1. 相对布局示意图

在这里插入图片描述
  子元素并不完全是上图中的依赖关系。比如，Item4可以以Item2为依赖锚点，也可以以RelativeContainer父容器为依赖锚点。

1.2. 基本概念

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

1.3. 锚点设置

  锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上，可以设置left、middle、right的锚点。在竖直方向上，可以设置top、center、bottom的锚点。为了明确定义锚点，必须为RelativeContainer及其子元素设置ID，用于指定锚点信息。ID默认为“container”，其余子元素的ID通过id属性设置。未设置ID的子元素在RelativeContainer中不会显示。
  说明：在使用锚点时要注意子元素的相对位置关系，避免出现错位或遮挡的情况。

1.3.1. RelativeContainer父组件为锚点，__container__代表父容器的ID。

let AlignRus:Record<string,Record<string,string|VerticalAlign|HorizontalAlign>> = {
  'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
  'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }
}
let AlignRue:Record<string,Record<string,string|VerticalAlign|HorizontalAlign>> = {
  'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
  'right': { 'anchor': '__container__', 'align': HorizontalAlign.End }
}
let Mleft:Record<string,number> = { 'left': 20 }
let BWC:Record<string,number|string> = { 'width': 2, 'color': '#6699FF' }
RelativeContainer() {
  Row().width(100).height(100)
    .backgroundColor("#FF3333")
    .alignRules(AlignRus)
    .id("row1")
 
  Row().width(100).height(100)
    .backgroundColor("#FFCC00")
    .alignRules(AlignRue)
    .id("row2")
}.width(300).height(300)
.margin(Mleft)
.border(BWC)

在这里插入图片描述

1.3.2. 以兄弟元素为锚点。

let AlignRus:Record<string,Record<string,string|VerticalAlign|HorizontalAlign>> = {
  'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
  'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }
}
let RelConB:Record<string,Record<string,string|VerticalAlign|HorizontalAlign>> = {
  'top': { 'anchor': 'row1', 'align': VerticalAlign.Bottom },
  'left' : { 'anchor': 'row1', 'align': HorizontalAlign.Start }
}
let Mleft:Record<string,number> = { 'left': 20 }
let BWC:Record<string,number|string> = { 'width': 2, 'color': '#6699FF' }
RelativeContainer() {
  Row().width(100).height(100)
    .backgroundColor("#FF3333")
    .alignRules(AlignRus)
    .id("row1")
 
  Row().width(100).height(100)
    .backgroundColor("#FFCC00")
    .alignRules(RelConB)
    .id("row2")
}.width(300).height(300)
.margin(Mleft)
.border(BWC)

在这里插入图片描述

1.3.3. 子组件锚点可以任意选择，但需注意不要相互依赖。

子组件锚点可以任意选择，但需注意不要相互依赖。

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Row(){Text('row1')}.justifyContent(FlexAlign.Center).width(100).height(100)
          .backgroundColor('#ff3339ff')
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            left: {anchor: "__container__", align: HorizontalAlign.Start}
          })
          .id("row1")
 
        Row(){Text('row2')}.justifyContent(FlexAlign.Center).width(100)
          .backgroundColor('#ff298e1e')
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            right: {anchor: "__container__", align: HorizontalAlign.End},
            bottom: {anchor: "row1", align: VerticalAlign.Center},
          })
          .id("row2")
 
        Row(){Text('row3')}.justifyContent(FlexAlign.Center).height(100)
          .backgroundColor('#ffff6a33')
          .alignRules({
            top: {anchor: "row1", align: VerticalAlign.Bottom},
            left: {anchor: "row1", align: HorizontalAlign.Start},
            right: {anchor: "row2", align: HorizontalAlign.Start}
          })
          .id("row3")
 
        Row(){Text('row4')}.justifyContent(FlexAlign.Center)
          .backgroundColor('#ffff33fd')
          .alignRules({
            top: {anchor: "row3", align: VerticalAlign.Bottom},
            left: {anchor: "row1", align: HorizontalAlign.Center},
            right: {anchor: "row2", align: HorizontalAlign.End},
            bottom: {anchor: "__container__", align: VerticalAlign.Bottom}
          })
          .id("row4")
      }
      .width(300).height(300)
      .margin({left: 50})
      .border({width:2, color: "#6699FF"})
    }
    .height('100%')
  }
}

在这里插入图片描述

1.4. 设置相对于锚点的对齐位置

  设置了锚点之后，可以通过align设置相对于锚点的对齐位置。
  在水平方向上，对齐位置可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。
在这里插入图片描述
  在竖直方向上，对齐位置可以设置为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom。
在这里插入图片描述

1.4.1. 子组件位置偏移

  子组件经过相对位置对齐后，位置可能还不是目标位置，开发者可根据需要进行额外偏移设置offset。

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Row(){Text('row1')}.justifyContent(FlexAlign.Center).width(100).height(100)
          .backgroundColor("#FF3333")
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            left: {anchor: "__container__", align: HorizontalAlign.Start}
          })
          .id("row1")
 
        Row(){Text('row2')}.justifyContent(FlexAlign.Center).width(100)
          .backgroundColor("#FFCC00")
          .alignRules({
            top: {anchor: "__container__", align: VerticalAlign.Top},
            right: {anchor: "__container__", align: HorizontalAlign.End},
            bottom: {anchor: "row1", align: VerticalAlign.Center},
          })
          .offset({
            x:-40,
            y:-20
          })
          .id("row2")
 
        Row(){Text('row3')}.justifyContent(FlexAlign.Center).height(100)
          .backgroundColor("#FF6633")
          .alignRules({
            top: {anchor: "row1", align: VerticalAlign.Bottom},
            left: {anchor: "row1", align: HorizontalAlign.End},
            right: {anchor: "row2", align: HorizontalAlign.Start}
          })
          .offset({
            x:-10,
            y:-20
          })
          .id("row3")
 
        Row(){Text('row4')}.justifyContent(FlexAlign.Center)
          .backgroundColor("#FF9966")
          .alignRules({
            top: {anchor: "row3", align: VerticalAlign.Bottom},
            bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
            left: {anchor: "__container__", align: HorizontalAlign.Start},
            right: {anchor: "row1", align: HorizontalAlign.End}
          })
          .offset({
            x:-10,
            y:-30
          })
          .id("row4")
 
        Row(){Text('row5')}.justifyContent(FlexAlign.Center)
          .backgroundColor("#FF66FF")
          .alignRules({
            top: {anchor: "row3", align: VerticalAlign.Bottom},
            bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
            left: {anchor: "row2", align: HorizontalAlign.Start},
            right: {anchor: "row2", align: HorizontalAlign.End}
          })
          .offset({
            x:10,
            y:20
          })
          .id("row5")
 
        Row(){Text('row6')}.justifyContent(FlexAlign.Center)
          .backgroundColor

相关文章