先来看下效果:
我们现在要实现上面这种布局效果,背景图略过。视图主要分为上下两部分纵向排列,上部分是一张图片,下部分横向排列两个按钮。
我们可以结合 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 的简单介绍。