【带你轻松学】ArkUI容器类组件-相对布局容器（RelativeContainer）

于 2024-09-26 21:10:07 发布
阅读量492 收藏 11
点赞数 18
分类专栏： HarmonyOS 移动开发 鸿蒙开发 文章标签： 鸿蒙 鸿蒙系统 ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_87677001/article/details/142578075
版权

往期知识点整理

ArkUI 开发框架提供了 RelativeContainer 组件实现相对布局的能力，该布局适用于复杂场景下多元素对齐的情况。该组件可以包含多个子组件，本节笔者简单介绍一下 RelativeContainer 的使用。

RelativeContainer定义介绍

interface RelativeContainerInterface {
    (): RelativeContainerAttribute;
}

declare class RelativeContainerAttribute extends CommonMethod<RelativeContainerAttribute> {
}

RelativeContainer 默认构造方法无需任何额外参数，也没有定义额外的属性方法，简单样例如下所示：

@Entry @Component struct ArkUIClubTest {

  build() {
    Column({space: 10}) {
      RelativeContainer() {
        Text("text1")
          .fontSize(25)
          .width(160)
          .height(150)
          .id("text1")  // 必须添加 id，否则不显示
          .textAlign(TextAlign.End)
          .backgroundColor("#ccaabb")

        Text("text2")
          .fontSize(25)
          .width(90)
          .id("text2")  // 必须添加 id，否则不显示
          .textAlign(TextAlign.Start)
          .backgroundColor("#bbccaa")

        Text("text3")
          .fontSize(25)
          .width(90)
          .margin({top: 50})
          // .id("text3")  // 注释掉id，组件不显示
          .textAlign(TextAlign.Start)
          .backgroundColor("#bbccaa")
      }
      .width("100%")
      .height(190)
      .backgroundColor(Color.Pink)

    }
    .width("100%")
    .height("100%")
    .backgroundColor("#aabbcc")
    .padding(10)
  }

}

样例运行结果如下图所示：

📢：由运行结果可知 RelativeContainer 在默认情况下，子组件是按照堆叠排列并沿着自身左上角对齐。

RelativeContainer对齐介绍

RelativeContainer 对子组件的对齐方式分为水平方向和竖直方向：

  • 设置水平方向对齐

    RelativeContainer 的子组件在水平方向对齐方式分为 left 、middle 和 right，分别说明如下：

    • left： 设置子组件在水平方向上 左边框 的对齐方式，可选值说明如下：

      • HorizontalAlign.Start： 设置子组件左边框相对锚点组件的左边框位置对齐。
      • HorizontalAlign.Center： 设置子组件左边框相对锚点组件的中间位置对齐。
      • HorizontalAlign.End： 设置子组件左边框相对锚点组件的右边框位置对齐。
        @Entry @Component struct ArkUIClubTest {

          build() {
            Column({space: 10}) {
              RelativeContainer() {
                Text("Start")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    left: {
                      anchor: "__container__",
                      align: HorizontalAlign.Start
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(70)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("Center")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    left: {
                      anchor: "__container__",
                      align: HorizontalAlign.Center
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(70)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("End")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    left: {
                      anchor: "__container__",
                      align: HorizontalAlign.End
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(70)
              .backgroundColor(Color.Pink)
            }
            .width("100%")
            .height("100%")
            .backgroundColor("#aabbcc")
            .padding({left: 50, top: 10, right: 50, bottom: 10})
          }

        }

样例运行结果如下图所示：

  • right： 设置子组件在水平方向上 右边框 的齐方式，可选值说明如下：
    • HorizontalAlign.Start： 设置子组件右边框相对锚点组件的左边框位置对齐。
    • HorizontalAlign.Center： 设置子组件右边框相对锚点组件的中间点位置对齐。
    • HorizontalAlign.End： 设置子组件右边框相对锚点组件的右边框位置对齐。
@Entry @Component struct ArkUIClubTest {

  build() {
    Column({space: 10}) {
      RelativeContainer() {
        Text("Start")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            right: {
              anchor: "__container__",
              align: HorizontalAlign.Start
            }
          })
          .id("test")
      }
      .width("100%")
      .height(70)
      .backgroundColor(Color.Pink)

      RelativeContainer() {
        Text("Center")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            right: {
              anchor: "__container__",
              align: HorizontalAlign.Center
            }
          })
          .id("test")
      }
      .width("100%")
      .height(70)
      .backgroundColor(Color.Pink)

      RelativeContainer() {
        Text("End")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            right: {
              anchor: "__container__",
              align: HorizontalAlign.End
            }
          })
          .id("test")
      }
      .width("100%")
      .height(70)
      .backgroundColor(Color.Pink)
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#aabbcc")
    .padding({left: 50, top: 10, right: 50, bottom: 10})
  }

}

样例运行结果如下图所示：

  • 设置竖直方向对齐

RelativeContainer 的子组件在竖直方向对齐配置分为：top、center 和 bottom，分别说明如下：

  • top： 设置子组件在竖直方向上 上边框 的对齐方式，可选值说明如下：

    • VerticalAlign.Top： 设置子组件上边框相对锚点组件的上边框位置对齐。
    • VerticalAlign.Center： 设置子组件上边框相对锚点组件的中间点位置对齐。
    • VerticalAlign.Bottom： 设置子组件上边框相对锚点组件的下边框位置对齐。
@Entry @Component struct ArkUIClubTest {

  build() {
    Column({space: 10}) {
      RelativeContainer() {
        Text("Top")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            top: {
              anchor: "__container__",
              align: VerticalAlign.Top
            }
          })
          .id("test")
      }
      .width("100%")
      .height(90)
      .backgroundColor(Color.Pink)

      RelativeContainer() {
        Text("Center")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            top: {
              anchor: "__container__",
              align: VerticalAlign.Center
            }
          })
          .id("test")
      }
      .width("100%")
      .height(90)
      .backgroundColor(Color.Pink)

      RelativeContainer() {
        Text("Bottom")
          .fontSize(25)
          .width(120)
          .height(40)
          .backgroundColor("#bbccaa")
          .alignRules({
            top: {
              anchor: "__container__",
              align: VerticalAlign.Bottom
            }
          })
          .id("test")
      }
      .width("100%")
      .height(90)
      .backgroundColor(Color.Pink)
    }
    .width("100%")
    .height("100%")
    .backgroundColor("#aabbcc")
    .padding({left: 50, top: 10, right: 50, bottom: 10})
  }

}

样例运行结果如下图所示：

    • center： 设置子组件在竖直方向上 中间点 的对齐方式，可选值说明如下：

      • VerticalAlign.Top： 设置子组件中间点相对锚点组件的上边框位置对齐。
      • VerticalAlign.Center： 设置子组件中间点相对锚点组件的中间点位置对齐。
      • VerticalAlign.Bottom： 设置子组件中间点相对锚点组件的下边框位置对齐。
        @Entry @Component struct ArkUIClubTest {

          build() {
            Column({space: 10}) {
              RelativeContainer() {
                Text("Top")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    center: {
                      anchor: "__container__",
                      align: VerticalAlign.Top
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("Center")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    center: {
                      anchor: "__container__",
                      align: VerticalAlign.Center
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("Bottom")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    center: {
                      anchor: "__container__",
                      align: VerticalAlign.Bottom
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)
            }
            .width("100%")
            .height("100%")
            .backgroundColor("#aabbcc")
            .padding({left: 50, top: 50, right: 50, bottom: 10})
          }

        }
  • bottom： 设置子组件在竖直方向上 下边框 的对齐方式，可选值说明如下：
    • VerticalAlign.Top： 设置子组件下边框相对锚点组件的上边框位置对齐。
    • VerticalAlign.Center： 设置子组件下边框相对锚点组件的中间点位置对齐。
    • VerticalAlign.Bottom： 设置子组件下边框相对锚点组件的下边框位置对齐。
        @Entry @Component struct ArkUIClubTest {

          build() {
            Column({space: 10}) {
              RelativeContainer() {
                Text("Top")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    bottom: {
                      anchor: "__container__",
                      align: VerticalAlign.Top
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("Center")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    bottom: {
                      anchor: "__container__",
                      align: VerticalAlign.Center
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)

              RelativeContainer() {
                Text("Bottom")
                  .fontSize(25)
                  .width(120)
                  .height(40)
                  .backgroundColor("#bbccaa")
                  .alignRules({
                    bottom: {
                      anchor: "__container__",
                      align: VerticalAlign.Bottom
                    }
                  })
                  .id("test")
              }
              .width("100%")
              .height(90)
              .backgroundColor(Color.Pink)
            }
            .width("100%")
            .height("100%")
            .backgroundColor("#aabbcc")
            .padding({left: 50, top: 50, right: 50, bottom: 10})
          }

        }

📢：注意事项：

  • 子组件可以将容器或者其他子组件设为锚点：
    • 参与相对布局的容器内组件必须设置id，不设置id的组件不显示，容器id固定为 __container__。
    • 此子组件某一方向上的三个位置可以将容器或其他子组件的同方向三个位置为锚点，同方向上两个以上位置设置锚点以后会跳过第三个。
    • 前端页面设置的子组件尺寸大小不会受到相对布局规则的影响。子组件某个方向上设置两个或以上alignRules时不建议设置此方向尺寸大小。
    • 对齐后需要额外偏移可设置offset。
  • 特殊情况
    • 互相依赖，环形依赖时容器内子组件全部不绘制。
    • 同方向上两个以上位置设置锚点但锚点位置逆序时此子组件大小为0，即不绘制。

完整样例

@Entry @Component struct ArkUIClubTest {

  build() {
    Column() {
      RelativeContainer() {
        Row()
          .width(100)
          .height(100)
          .backgroundColor("#FF3333")
          .alignRules({
            top: {
              anchor: "__container__",
              align: VerticalAlign.Top
            },
            left: {
              anchor: "__container__",
              align: HorizontalAlign.Start
            }
          })
          .id("row1")

        Row()
          .width(100)
          .height(100)
          .backgroundColor("#FFCC00")
          .alignRules({
            top: {
              anchor: "__container__",
              align: VerticalAlign.Top
            },
            right: {
              anchor: "__container__",
              align: HorizontalAlign.End
            }
          })
          .id("row2")

        Row().height(100)
          .backgroundColor("#FF6633")
          .alignRules({
            top: {
              anchor: "row1",
              align: VerticalAlign.Bottom
            },
            left: {
              anchor: "row1",
              align: HorizontalAlign.End
            },
            right: {
              anchor: "row2",
              align: HorizontalAlign.Start
            }
          })
          .id("row3")

        Row()
          .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
            }
          })
          .id("row4")

        Row()
          .backgroundColor("#FF66FF")
          .alignRules({
            top: {
              anchor: "row3",
              align: VerticalAlign.Bottom
            },
            bottom: {
              anchor: "__container__",
              align: VerticalAlign.Bottom
            },
            left: {
              anchor: "row2",
              align: HorizontalAlign.Start
            },
            right: {
              anchor: "__container__",
              align: HorizontalAlign.End
            }
          })
          .id("row5")
      }
      .width(300)
      .height(300)
      .border({ width: 3, color: "#6699FF" })
    }
    .height('100%')
    .width("100%")
    .padding(10)
  }
}

我是你叶
关注
专栏目录
element中el-container容器与div布局区分详解
10-15
在Element UI框架中，`el-container` 是一个用于布局的组件，它提供了更方便的方式来构建页面的基本结构。相比普通的HTML `div` 元素，`el-container` 提供了更强大的布局管理功能，特别是对于复杂页面布局的需求。...
相对布局（RelativeContainer）
01-16 1858
为采用相对布局的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。下图是一个RelativeContainer的概念图，图中的虚线表示位置的依赖关系。图1相对布局示意图子元素并不完全是上图中的依赖关系。比如，Item4可以以Item2为依赖锚点，也可以以RelativeContainer父容器为依赖锚点。
第十二讲_ArkUI相对布局（RelativeContainer）
wenqi1992的博客
01-23 913
介绍ArkUI相对布局RelativeContainer容器组件
HarmonyOS鸿蒙学习笔记（25）相对布局 RelativeContainer详细说明
最新发布
菜鸟博客
05-30 1794
RelativeContainer相对布局使用指南
鸿蒙HarmonyOS实战-ArkUI组件（RelativeContainer）
单口相声Jay
03-28 1008
ArkUI组件中的RelativeContainer是一个相对定位的容器，可以用来将子组件按照相对位置布局。在RelativeContainer中，每个子组件都可以设置相对于父容器或其他组件的位置和大小。可以通过设置相对位置、偏移量、宽度和高度来实现布局。相对位置可以设置为左侧、上方、右侧和下方。偏移量可以设置为相对位置的偏移值，例如向右偏移10像素或向下偏移5像素。宽度和高度可以设置为相对值或绝对值。使用RelativeContainer时，要注意避免组件重叠或越出容器边界的情况。
OpenHarmony实战开发-相对布局 (RelativeContainer)
m0_70749039的博客
04-26 827
在应用的开发过程中，经常需要设计复杂界面，此时涉及到多个相同或不同组件之间的嵌套。如果布局组件嵌套深度过深，或者嵌套组件数过多，会带来额外的开销。如果在布局的方式上进行优化，就可以有效的提升性能，减少时间开销。请参考优化布局时间了解RelativeContainer相对于List，在布局时间上的性能提升。
组件化核心技术-从容器化到组件化
11-04
组件化核心技术是现代软件开发中的重要概念，它与容器化和插件化密切相关，共同构成了高效、灵活的应用架构。本文将深入探讨这三个概念及其演进过程的核心要点。 首先，我们来理解“容器化”。容器化是一种虚拟化...
Docker容器技术-Docker核心组件.pptx
06-09
Docker容器技术
React为 Vue 引入容器组件和展示组件的教程详解
08-27
React 为 Vue 引入容器组件和展示组件的教程详解 React 的容器组件和展示组件概念在 Vue 中的应用是一种非常有用的设计模式。这种模式可以帮助我们更好地组织组件，提高代码的可复用性和维护性。 为什么要使用容器...
最小的容器查询Web组件-JavaScript开发
05-26
cq最小的容器查询Web组件作者：斯科特·杰尔（Scott Jehl）此cq定制元素启用了非常简单的“最小宽度”容器查询，使您可以根据其自身的呈现宽度（而不是视口宽度）调整CSS。 示例：...
Re-Flex:可调整大小的Flex布局容器组件，用于高级React Web应用程序
05-02
Re-F | ex是我创建的基于React flex的布局组件库，因为在那里发现的所有组件都不能满足我的要求。 它旨在以简单的方式解决需要可调整大小的布局的高级React Web应用程序的需求。 这是一个基本的演示： import ...
Spring容器添加组件方式实现
08-25
Spring容器添加组件方式实现 Spring容器添加组件方式实现是指在Spring框架中将组件添加到容器中的方法，这里主要介绍了两种方式，即使用xml配置文件和使用SpringBoot注解的方式。 使用xml配置文件 在Spring框架中...
ArkUI组件库示例App 包括基础组件、容器组件、弹窗组件，可以在预览器或真机中，实时预览组件接口、属性调整的效果
01-08
本示例App是 ArkUI 组件库的一个全面展示，它涵盖了基础组件、容器组件以及弹窗组件，旨在帮助开发者了解并熟练运用这些组件。 基础组件是构建用户界面的基本元素，例如按钮（Button）、文本（Text）、图像（Image...
学习ExtJS 访问容器对象
11-30
它们提供了一种方式来布局、显示和管理应用程序中的多个组件。本篇文章将深入探讨如何在ExtJS中访问容器对象及其属性，以及在实际应用中的示例。 一、属性 1. `ownerCt`：这是一个非常重要的属性，它表示当前组件...
【愚公系列】2023年12月 HarmonyOS教学课程 008-ArkUI组件（RelativeContainer）
热门推荐
时光隧道
12-02 6万+
ArkUI组件中的RelativeContainer是一个相对定位的容器，可以用来将子组件按照相对位置布局。在RelativeContainer中，每个子组件都可以设置相对于父容器或其他组件的位置和大小。可以通过设置相对位置、偏移量、宽度和高度来实现布局。相对位置可以设置为左侧、上方、右侧和下方。偏移量可以设置为相对位置的偏移值，例如向右偏移10像素或向下偏移5像素。宽度和高度可以设置为相对值或绝对值。使用RelativeContainer时，要注意避免组件重叠或越出容器边界的情况。
【鸿蒙（HarmonyOS）】ArkUI构建布局（线性布局Row/Column、层叠布局Stack、弹性布局Flex、相对布局RelativeContainer）
守夜人
09-15 3970
描述：构建布局是UI界面开发的基础，如何使界面看起来优雅简洁？编辑程序时不迷路？都离不开一个好的布局思路和习惯。 难度：简单 任务： 1、认识线性布局Row/Column、层叠布局Stack、弹性布局Flex、相对布局RelativeContainer。 2、拿生活中的一些发布的软件进行练手。
鸿蒙Harmony-相对布局（RelativeContainer）详解
袁震的博客
01-14 2665
成年人的世界，从来没有容易二字，想要什么，就得凭自己的努力去拿，遇到事情就得自己生生的硬抗，希望你即使再辛苦，但还是会选择这滚烫的人生，加油陌生的朋友们
Java AWT详解：组件、容器与布局管理
3. 布局管理器(Layouts)：布局管理器负责在容器中自动排列和调整组件的位置和大小。Java AWT提供了多种布局管理器，如FlowLayout、GridLayout、BorderLayout和GridBagLayout，以满足不同类型的窗口布局需求。 尽管...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值