ArkUI容器类组件-相对布局容器(RelativeContainer)

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

RelativeContainer定义介绍

interface RelativeContainerInterface {
    (): RelativeContainerAttribute;
}

declare class RelativeContainerAttribute extends CommonMethod {
}

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)
  }
}
阅读全文
下载说明:
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.1024c.cn/archives/21211,转载请注明出处。
0

评论0

显示验证码
没有账号?注册  忘记密码?