HarmonyOS 开发——相对布局 RelativeContainer

先来看下效果:

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

我们可以结合 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 的简单介绍。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值