HarmonyOS 开发——相对布局 RelativeContainer_harmonyos相对布局-优快云博客

先来看下效果：

我们现在要实现上面这种布局效果，背景图略过。视图主要分为上下两部分纵向排列，上部分是一张图片，下部分横向排列两个按钮。

我们可以结合 Column 和 Row容器实现上面效果，但是今天主要讲下 RelativeContainer 相对布局容器，这有点类似于IOS开发中的布局约束概念，实现方式都是以某个元素为锚点进行相对布局。

对于图片组件：相对于 RelativeContainer 在中心位置且垂直方向上有一定的偏移量。

对于左侧按钮组件，相对于图片水平方向上左侧对齐，具有一定间隔。

对于右侧按钮组件，相对于图片水平方向上右侧对齐，具有一定间隔。

首先我们先排列好以上组件，代码如下：

RelativeContainer() {
  Image($r('app.media.1'))
    .width('100%')
    .height('100%')
  Image($r('app.media.test'))
    .objectFit(ImageFit.Cover)
    .alignRules({
      center: {anchor: "__container__", align: VerticalAlign.Center},
      middle: { anchor: "__container__", align: HorizontalAlign.Center }
    })
    .id('image')
    .height('60%')
    .borderStyle(BorderStyle.Dashed)
    .borderColor('#ffecbfbf')
    .borderWidth(2)
    .borderRadius(10)
    .margin(30)
  Button({ buttonStyle: ButtonStyleMode.NORMAL })
    .width(80)
    .height(80)
    .backgroundImage($r('app.media.left'))
    .backgroundImageSize(ImageSize.Cover)
    .alignRules({
      top: { anchor: 'image', align: VerticalAlign.Bottom },
      left: { anchor: 'image', align: HorizontalAlign.Start }
    })
    .id('left')
  Button({ buttonStyle: ButtonStyleMode.NORMAL })
    .width(80)
    .height(80)
    .backgroundImage($r('app.media.right'))
    .backgroundImageSize(ImageSize.Cover)
    .alignRules({
      top: { anchor: 'left', align: VerticalAlign.Top },
      right: { anchor: 'image', align: HorizontalAlign.End }
    })
    .id('right')
}
.height('100%')
.width('100%')

预览效果如图：

需要补充下：为了明确定义锚点，必须为 RelativeContainer 及其子元素设置 ID，用于指定锚点信息。ID 默认为“container”，其余子元素的 ID 通过 id 属性设置。未设置 ID 的子元素在 RelativeContainer 中不会显示。互相依赖，环形依赖时容器内子组件全部不绘制。同方向上两个以上位置设置锚点，但锚点位置逆序时此子组件大小为 0，即不绘制。

然后我们对图片组件设置偏移如

.offset({ x: 0, y: -50 })

即可实现我们想要的效果。

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

关于对齐位置，依照文档中所给示例图，可以比较直观的感受。

对于组件的尺寸，若子组件某个方向上设置两个或以上 alignRules 时最好不设置此方向尺寸大小，否则对齐规则确定的组件尺寸与开发者设置的尺寸可能产生冲突。比如某个组件在垂直方向设置了 top 和 bottom 约束，那么在实际的开发过程中就不要再次设置该组件的高度。正确示例代码如下：

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)
  .backgroundColor("#FFCC00")
  .alignRules({
    top: {anchor: "__container__", align: VerticalAlign.Top},
    right: {anchor: "__container__", align: HorizontalAlign.End},
    bottom: {anchor: "row1", align: VerticalAlign.Center},
  })
  .id("row2")

以上就是对 RelativeContainer 的简单介绍。