当前位置： 首页 > article >正文

纯血鸿蒙ArkUI相对布局详解

article 2025/1/4 8:11:01

相对布局概要

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

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

相对布局示意图

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

基本概念

  • 锚点：通过锚点设置当前元素基于哪个元素确定位置。

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

设置依赖关系

锚点设置

锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上，可以设置left、middle、right的锚点。在竖直方向上，可以设置top、center、bottom的锚点。

为了明确定义锚点，必须为RelativeContainer及其子元素设置ID，用于指定锚点信息。ID默认为__container__，其余子元素的ID通过id属性设置。不设置id的组件能显示，但是不能被其他子组件作为锚点，相对布局容器会为其拼接id，此id的规律无法被应用感知。互相依赖，环形依赖时容器内子组件全部不绘制。同方向上两个以上位置设置锚点，但锚点位置逆序时此子组件大小为0，即不绘制。

说明

在使用锚点时要注意子元素的相对位置关系，避免出现错位或遮挡的情况。

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 }
}

// 通过Record类型数据设置布局参数
let Mleft: Record<string, number> = { 'left': 20 }
// 通过Record类型数据设置布局参数
let BWC: Record<string, number | string> = { 'width': 2, 'color': '#6699FF' }

@Entry
@Component
struct Index {
  build() {
    // 相对布局容器，默认id为 __container__
    RelativeContainer() {
      Row() {
        Text('row1').fontColor(Color.Yellow)
      }
      // 子组件在水平方向居中对齐
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor("#FF3333")
      // 设置相对布局参数
      .alignRules(AlignRus)
      // 组件id为row1
      .id("row1")

      Row() {
        Text('row2').fontColor(Color.White)
      }
      // 设置子组件在水平方向居中对齐
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor("#000000")
      // 设置相对布局参数
      .alignRules(AlignRue)
      // 组件id为row2
      .id("row2")
    }.width(300).height(300)
    // 设置外边距布局参数
    .margin(Mleft)
    // 设置边框布局参数
    .border(BWC)
  }
}

显示效果如下图所示：

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>> = {
  // 顶部相对于row1元素底部对齐
  'top': { 'anchor': 'row1', 'align': VerticalAlign.Bottom },
  // 左侧相对于row1元素左对齐
  'left': { 'anchor': 'row1', 'align': HorizontalAlign.Start }
}

// 通过Record类型数据设置布局参数
let Mleft: Record<string, number> = { 'left': 20 }
// 通过Record类型数据设置布局参数
let BWC: Record<string, number | string> = { 'width': 2, 'color': '#6699FF' }

@Entry
@Component
struct Index {
  build() {
    // 相对布局组件，组件id为 __container__
    RelativeContainer() {
      Row() {
        Text('row1').fontColor(Color.White)
      }
      // 子组件在水平方向居中对齐
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor("#FF3333")
      // 设置相对布局规则
      .alignRules(AlignRus)
      // 组件id为row1
      .id("row1")

      Row() {
        Text('row2').fontColor(Color.White)
      }
      // 子组件在水平方向居中对齐
      .justifyContent(FlexAlign.Center)
      .width(100)
      .height(100)
      .backgroundColor(Color.Black)
      // 设置相对布局规则
      .alignRules(RelConB)
      // 组件id为row2
      .id("row2")
    }.width(300).height(300)
    // 设置外边距参数
    .margin(Mleft)
    // 设置边框参数
    .border(BWC)
  }
}

显示效果如下图所示：

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

@Entry
@Component
struct Index {
  build() {
    Row() {
      // 相对布局组件
      RelativeContainer() {
        Row() {
          Text('row1').fontColor(Color.Yellow)
        }
        .justifyContent(FlexAlign.Center)
        .width(100)
        .height(100)
        .backgroundColor('#ff3339ff')
        .alignRules({
          // 相对布局规则：顶部相对于父组件垂直方向顶部对齐
          top: { anchor: "__container__", align: VerticalAlign.Top },
          // 左侧相对于父组件水平方向左对齐
          left: { anchor: "__container__", align: HorizontalAlign.Start }
        })
        // 组件id为row1
        .id("row1")

        Row() {
          Text('row2').fontColor(Color.Yellow)
        }
        .justifyContent(FlexAlign.Center)
        .width(100)
        .backgroundColor('#ff298e1e')
        .alignRules({
          // 相对布局规则：顶部相对于父组件垂直方向顶部对齐
          top: { anchor: "__container__", align: VerticalAlign.Top },
          // 右侧相对于父组件在水平方向右对齐
          right: { anchor: "__container__", align: HorizontalAlign.End },
          // 底部相对与row1元素，垂直方向居中对齐，即该组件的底部对齐row1的中间
          bottom: { anchor: "row1", align: VerticalAlign.Center },
        })
        // 组件id为row2
        .id("row2")

        Row() {
          Text('row3')
        }
        .justifyContent(FlexAlign.Center)
        .height(100)
        .backgroundColor('#ffff6a33')
        .alignRules({
          // 设置相对布局规则：顶部相对于row1底部对齐
          top: { anchor: "row1", align: VerticalAlign.Bottom },
          // 左侧相对于row1左对齐
          left: { anchor: "row1", align: HorizontalAlign.Start },
          // 右侧相对于row2左侧对齐
          right: { anchor: "row2", align: HorizontalAlign.Start }
        })
        // 组件id为row3
        .id("row3")

        Row() {
          Text('row4')
        }.justifyContent(FlexAlign.Center)
        .backgroundColor('#ffff33fd')
        .alignRules({
          // 设置相对布局规则：
          // 顶部对齐row3的底部
          top: { anchor: "row3", align: VerticalAlign.Bottom },
          // 左侧对齐row1的中间
          left: { anchor: "row1", align: HorizontalAlign.Center },
          // 右侧对齐row2的右边
          right: { anchor: "row2", align: HorizontalAlign.End },
          // 底部对齐容器的底部
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
        })
        // 组件id为row4
        .id("row4")
      }
      .width(300).height(300)
      .margin({ left: 50 })
      .border({ width: 2, color: "#6699FF" })
    }
    .height('100%')
  }
}

显示的效果如下图所示：

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

设置了锚点之后，可以通过align设置相对于锚点的对齐位置。

在水平方向上，对齐位置可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。

下图中的黑线表示锚点：

在竖直方向上，对齐位置可以设置为VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom。

下图中的黑线表示锚点：

子组件位置偏移

子组件经过相对位置对齐后，位置可能还不是目标位置，开发者可根据需要进行额外偏移设置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
        .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 },
          // 底部与row1的垂直方向中间对齐
          bottom: { anchor: "row1", align: VerticalAlign.Center },
        })
        // 在原本的位置，x轴左移40vp，y轴上移20vp
        .offset({ x: -40, y: -20 })
        .id("row2")

        Row() {
          Text('row3')
        }
        .justifyContent(FlexAlign.Center)
        .height(100)
        .backgroundColor("#FF6633")
        .alignRules({
          // 相对布局规则：
          // 顶部与row1的底部对齐
          top: { anchor: "row1", align: VerticalAlign.Bottom },
          // 左侧与row1的右侧对齐
          left: { anchor: "row1", align: HorizontalAlign.End },
          // 右侧与row2的左边对齐
          right: { anchor: "row2", align: HorizontalAlign.Start }
        })
        // 在原本的位置，x轴方向左移10vp，y轴方向上移20vp
        .offset({ x: -10, y: -20 })
        .id("row3")

        Row() {
          Text('row4')
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor("#FF9966")
        .alignRules({
          // 相对布局规则：
          // 顶部与row3的底部对齐
          top: { anchor: "row3", align: VerticalAlign.Bottom },
          // 底部与容器的底部对齐
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          // 左边与容器的左边对齐
          left: { anchor: "__container__", align: HorizontalAlign.Start },
          // 右边与row1的右边对齐
          right: { anchor: "row1", align: HorizontalAlign.End }
        })
        // 在原本的位置，x轴方向左移10vp，y轴方向上移30vp
        .offset({ x: -10, y: -30 })
        .id("row4")

        Row() {
          Text('row5')
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor("#FF66FF")
        .alignRules({
          // 相对布局规则：
          // 顶部与row3的底部对齐
          top: { anchor: "row3", align: VerticalAlign.Bottom },
          // 底部与容器的底部对齐
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          // 左边与row2的左边对齐
          left: { anchor: "row2", align: HorizontalAlign.Start },
          // 右边与row2的右边对齐
          right: { anchor: "row2", align: HorizontalAlign.End }
        })
        // 在原本的位置，x轴方向右移10vp，y轴方向下移20vp
        .offset({ x: 10, y: 20 })
        .id("row5")

        Row() {
          Text('row6')
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor('#ff33ffb5')
        .alignRules({
          // 相对布局规则：
          // 顶部与row3的底部对齐
          top: { anchor: "row3", align: VerticalAlign.Bottom },
          // 底部与row4的底部对齐
          bottom: { anchor: "row4", align: VerticalAlign.Bottom },
          // 左边与row3的左边对齐
          left: { anchor: "row3", align: HorizontalAlign.Start },
          // 右边与row3的右边对齐
          right: { anchor: "row3", align: HorizontalAlign.End }
        })
        // 在原本的位置，x轴方向左移15vp，y轴方向下移10vp
        .offset({ x: -15, y: 10 })
        .backgroundImagePosition(Alignment.Bottom)
        .backgroundImageSize(ImageSize.Cover)
        // 组件id
        .id("row6")
      }.width(300).height(300).margin({ left: 50 })
      .border({ width: 2, color: "#6699FF" })
    }.height('100%')
  }
}

显示效果如下图所示：

多种组件的对齐布局

Row、Column、Flex、Stack等多种布局组件，可按照RelativeContainer组件规则进行对其排布。

@Entry
@Component
struct Index {
  @State value: number = 0

  build() {
    Row() {
      // 相对布局组件
      RelativeContainer() {
        Row()
          .width(100)
          .height(100)
          .backgroundColor('#ff33ffcc')
          .alignRules({
            // 相对布局规则：
            // 顶部与容器的顶部对齐
            top: { anchor: "__container__", align: VerticalAlign.Top },
            // 左侧与容器的左侧对齐
            left: { anchor: "__container__", align: HorizontalAlign.Start }
          })
          .id("row1")
        Column()
          .width('50%')
          .height(30)
          .backgroundColor(0xAFEEEE)
          .alignRules({
            // 相对布局规则：
            // 顶部与容器的顶部对齐
            top: { anchor: "__container__", align: VerticalAlign.Top },
            // 左边与容器的中间对齐
            left: { anchor: "__container__", align: HorizontalAlign.Center }
          })
          // 组件id
          .id("row2")
        Flex({ direction: FlexDirection.Row }) {
          Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
          Text('2').width('20%').height(50).backgroundColor(0xD2B48C)
          Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
          Text('4').width('20%').height(50).backgroundColor(0xD2B48C)
        }
        .padding(10)
        .backgroundColor('#ffedafaf')
        .alignRules({
          // 相对布局规则：
          // 顶部与row2的底部对齐
          top: { anchor: "row2", align: VerticalAlign.Bottom },
          // 左边与容器的左边对齐
          left: { anchor: "__container__", align: HorizontalAlign.Start },
          // 底部与容器的垂直中间对齐
          bottom: { anchor: "__container__", align: VerticalAlign.Center },
          // 右边与row2的水平中线对齐
          right: { anchor: "row2", align: HorizontalAlign.Center }
        })
        .id("row3")

        // 层叠布局
        Stack({ alignContent: Alignment.Bottom }) {
          Text('First child, show in bottom')
            .width('90%').height('100%').backgroundColor(0xd2cab3)
            // 文本顶部对齐
            .align(Alignment.Top)
          Text('Second child, show in top')
            .width('70%').height('60%').backgroundColor(0xc1cbac)
            // 文本顶部对齐
            .align(Alignment.Top)
        }
        .margin({ top: 5 })
        .alignRules({
          // 相对布局规则：
          // 顶部与row3的底部对齐
          top: { anchor: "row3", align: VerticalAlign.Bottom },
          // 左边与容器的左边对齐
          left: { anchor: "__container__", align: HorizontalAlign.Start },
          // 底部与容器的底部对齐
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          // 右侧与row3的右边对齐
          right: { anchor: "row3", align: HorizontalAlign.End }
        })
        .id("row4")
      }.width(300).height(300).margin({ left: 50 })
      .border({ width: 2, color: "#6699FF" })
    }.height('100%')
  }
}

显示效果如下图所示：

组件尺寸

子组件尺寸大小不会受到相对布局规则的影响。若子组件某个方向上设置两个或以上alignRules时最好不设置此方向尺寸大小，否则对齐规则确定的组件尺寸与开发者设置的尺寸可能产生冲突。

@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 },
          // 底部与row1的水平中线对齐
          bottom: { anchor: "row1", align: VerticalAlign.Center },
        })
        .id("row2")

        Row() {
          Text('row3')
        }
        .justifyContent(FlexAlign.Center)
        .height(100) // 没有设置宽度
        .backgroundColor("#FF6633")
        .alignRules({
          // 相对布局规则：
          // 顶部与row1的底部对齐
          top: { anchor: "row1", align: VerticalAlign.Bottom },
          // 左边与row1的右边对齐
          left: { anchor: "row1", align: HorizontalAlign.End },
          // 右边与row2的左边对齐
          right: { anchor: "row2", align: HorizontalAlign.Start }
        })
        .id("row3")

        Row() {
          Text('row4')
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor("#FF9966")
        // 没有设置高度和宽度
        .alignRules({
          // 相对布局规则：
          // 顶部与row3的底部对齐
          top: { anchor: "row3", align: VerticalAlign.Bottom },
          // 底部与容器的底部对齐
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          // 左边与容器的左边对齐
          left: { anchor: "__container__", align: HorizontalAlign.Start },
          // 右边与row1的右边对齐
          right: { anchor: "row1", align: HorizontalAlign.End }
        })
        .id("row4")

        Row() {
          Text('row5')
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor("#FF66FF")
        // 没有设置高度和宽度
        .alignRules({
          // 相对布局规则：
          // 顶部与row3的底部对齐
          top: { anchor: "row3", align: VerticalAlign.Bottom },
          // 底部与容器的底部对齐
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          // 左边与row2的左边对齐
          left: { anchor: "row2", align: HorizontalAlign.Start },
          // 右边与row2的右边对齐
          right: { anchor: "row2", align: HorizontalAlign.End }
        })
        .id("row5")

        Row() {
          Text('row6')
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor('#ff33ffb5')
        // 没有设置高度和宽度
        .alignRules({
          // 相对布局规则：
          // 顶部与row3的底部对齐
          top: { anchor: "row3", align: VerticalAlign.Bottom },
          // 底部与row4的底部对齐
          bottom: { anchor: "row4", align: VerticalAlign.Bottom },
          // 左边与row3的左边对齐
          left: { anchor: "row3", align: HorizontalAlign.Start },
          // 右边与row3的右边对齐
          right: { anchor: "row3", align: HorizontalAlign.End }
        })
        .id("row6")
        .backgroundImagePosition(Alignment.Bottom)
        .backgroundImageSize(ImageSize.Cover)
      }.width(300).height(300).margin({ left: 50 })
      .border({ width: 2, color: "#6699FF" })
    }.height('100%')
  }
}

显示效果如下图所示：


http://www.kler.cn/a/460516.html

相关文章：

  • CentOS — 压缩解压
  • 黑马JavaWeb开发跟学(十五).Maven高级
  • java Redisson 实现限流每秒/分钟/小时限制N个
  • C# 标准数字格式字符串
  • 数字化供应链创新解决方案在零售行业的应用研究——以开源AI智能名片S2B2C商城小程序为例
  • Python-Pdf转Markdown
  • 简易内存池（中）
  • Kubernetes: NetworkPolicy 的实践应用
  • 航顺芯片推出HK32A040方案，赋能汽车矩阵大灯安全与智能化升级
  • Linux postgresql-15部署文档
  • 音频进阶学习九——离散时间傅里叶变换DTFT
  • 华为仓颉编程语言的函数与结构类型分析
  • Midjourney技术浅析（五）：图像细节处理
  • 【大模型实战篇】GLM-Zero模型初代版本的尝鲜
  • SSM-Spring-IOC/DI对应的配置开发
  • 【Win】感觉“ctypes.WinDLL(“user32“)“跟“ctypes.windll.user32“看起来很像呀，它们之间有什么区别呢？
  • UL-SCH 处理函数
  • 关于今天发现的一个bug
  • 深入解析Android JNI：以Visualizer为例
  • Ragas自动化评测整体后端流程
  • 平凡的2024回顾
  • 【每日学点鸿蒙知识】广告ID、NFC手机充值、CSS支持语法、PC与模拟器交互、SO热更新等
  • 前端实现PDF预览的几种选择（pdfjs-dist、react-pdf、pdf-viewer）
  • 嵌入式科普(25)Home Assistant米家集成意味着IOT的核心是智能设备
  • 形象地理解UE4中的数据结构 TLinkedListBase
  • [极客大挑战 2019]LoveSQL 1解题思路