鸿蒙ArkUI之相对布局容器（RelativeContainer）实战之狼人杀布局，详细介绍相对布局容器的用法，附上代码，以及效果图

在鸿蒙应用开发中，若是遇到布局相对复杂的场景，往往需要嵌套许多层组件，去还原UI图的效果，若是能够掌握相对布局容器的使用，对于复杂的布局场景，可直接减少组件嵌套，且随心所欲完成复杂场景的布局。

官方地址：

RelativeContainer-行列与堆叠-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

 关键属性

RelativeContainer能够帮我们随心所欲完成布局的关键在于，子组件可以通过alignRules这个属性去设置和什么什么组件对齐，通过锚点，去向某一个组件对齐，比如，父组件RelativeContainer()组件，它的锚点必须是：__container__,其他的组件可以通过设置id（接收字符串自定义）的方式来锁定锚点，下面这些参数，就是alignRules属性接收的参数。

名称	类型	描述
left	{ anchor: string, align: HorizontalAlign }	设置左对齐参数。 - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。 元服务API： 从API version 11开始，该接口支持在元服务中使用。
right	{ anchor: string, align: HorizontalAlign }	设置右对齐参数。 - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。 元服务API： 从API version 11开始，该接口支持在元服务中使用。
middle	{ anchor: string, align: HorizontalAlign }	设置横向居中对齐方式的参数。 - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。 元服务API： 从API version 11开始，该接口支持在元服务中使用。
top	{ anchor: string, align: VerticalAlign }	设置顶部对齐的参数。 - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。 元服务API： 从API version 11开始，该接口支持在元服务中使用。
bottom	{ anchor: string, align: VerticalAlign }	设置底部对齐的参数。 - anchor：设置作为锚点的组件的id值。 - align：设置相对于锚点组件的对齐方式。 元服务API： 从API version 11开始，该接口支持在元服务中使用。
center	{ anchor: string, align: VerticalAlign }	设置纵向居中对齐方式的参数。 元服务API： 从API version 11开始，该接口支持在元服务中使用。

 用法

下面代码块所示：在RelativeContainer中有一个子组件，它的alignRules设置了顶部对齐RelativeContainer容器的顶部，左边对齐RelativeContainer的左边，为啥是RelativeContainer，因为，对齐的锚点是__contanier__,它就代表RelativeContainer容器，像其他子组件若是要向这个子组件对齐，就可以通过，这个组件绑定的id（img1）作为锚点，设置对齐方式

  RelativeContainer() {Column({ space: 2 }) {Image($r('app.media.nvwu')).height(40).width(40).borderRadius(20)Text('女巫').fontWeight(700).fontSize(12)}.id('img1').alignRules({top: { anchor: '__container__', align: VerticalAlign.Top }, left: { anchor: '__container__', align: HorizontalAlign.Start }}).margin({ top: 80, left: 15 })}

 像下面这个代码块，img2这个组件，就是相对img1，和RelativeContainer设置的对齐方式

 RelativeContainer() {Text('狼人杀').fontSize(20).fontWeight(700).alignRules({middle: { anchor: '__container__', align: HorizontalAlign.Center }}).margin({ top: 20 })Column({ space: 2 }) {Image($r('app.media.nvwu')).height(40).width(40).borderRadius(20)Text('女巫').fontWeight(700).fontSize(12)}.id('img1').alignRules({top: { anchor: '__container__', align: VerticalAlign.Top }, left: { anchor: '__container__', align: HorizontalAlign.Start }}).margin({ top: 80, left: 15 })Column({ space: 2 }) {Image($r('app.media.langren')).height(40).width(40).borderRadius(20)Text('狼人').fontWeight(700).fontSize(12)}.id('img2').alignRules({top: { anchor: 'img1', align: VerticalAlign.Bottom }, left: { anchor: '__container__', align: HorizontalAlign.Start }}).margin({ top: 20, left: 15 })}

注意点

加了组件，就必须给它设置对齐方式否则，组件将默认堆积在容器的左上角，组件margin的方向，也会跟着对齐方式的方向走，比如img2的上边，是对着img1的下边，img2的margin（{top:10}） 就会对着img1的下边走10vp

完整代码

下面是一个简单的布局，给RelativeContainer的一级子组件都加上了id，也调整了对齐方式，img1到img4的左边，相对RelativeContainer的左边对齐，img5到img8的右边相对于RelativeContainer的右边对齐，img1的顶部相对于RelativeContainer的顶部对齐，img2到img4的顶部相对于前一个img的底部对齐，img5的顶部相对于RelativeContainer的顶部对齐，img6到img8的顶部相对于前一个img的底部对齐。

@Preview
@Component
export struct RelativeContainerCase {build() {NavDestination() {Column({ space: 20 }) {RelativeContainer() {Text('狼人杀').fontSize(20).fontWeight(700).alignRules({middle: { anchor: '__container__', align: HorizontalAlign.Center }}).margin({ top: 20 })Column({ space: 2 }) {Image($r('app.media.nvwu')).height(40).width(40).borderRadius(20)Text('女巫').fontWeight(700).fontSize(12)}.id('img1').alignRules({top: { anchor: '__container__', align: VerticalAlign.Top }, left: { anchor: '__container__', align: HorizontalAlign.Start }}).margin({ top: 80, left: 15 })Column({ space: 2 }) {Image($r('app.media.langren')).height(40).width(40).borderRadius(20)Text('狼人').fontWeight(700).fontSize(12)}.id('img2').alignRules({top: { anchor: 'img1', align: VerticalAlign.Bottom }, left: { anchor: '__container__', align: HorizontalAlign.Start }}).margin({ top: 20, left: 15 })Column({ space: 2 }) {Image($r('app.media.lieren')).height(40).width(40).borderRadius(20)Text('猎人').fontWeight(700).fontSize(12)}.id('img3').alignRules({top: { anchor: 'img2', align: VerticalAlign.Bottom }, left: { anchor: '__container__', align: HorizontalAlign.Start }}).margin({ top: 20, left: 15 })Column({ space: 2 }) {Image($r("app.media.pingmin")).height(40).width(40).borderRadius(20)Text('平民').fontWeight(700).fontSize(12)}.id('img4').alignRules({top: { anchor: 'img3', align: VerticalAlign.Bottom }, left: { anchor: '__container__', align: HorizontalAlign.Start }}).margin({ top: 20, left: 15 })Column({ space: 2 }) {Image($r('app.media.yvyanjia')).height(40).width(40).borderRadius(20)Text('预言家').fontWeight(700).fontSize(12)}.id('img5').alignRules({top: { anchor: '__container__', align: VerticalAlign.Top }, right: { anchor: '__container__', align: HorizontalAlign.End }}).margin({ top: 80, right: 15 })Column({ space: 2 }) {Image($r('app.media.pingmin')).height(40).width(40).borderRadius(20)Text('平民').fontWeight(700).fontSize(12)}.id('img6').alignRules({top: { anchor: 'img5', align: VerticalAlign.Bottom }, right: { anchor: '__container__', align: HorizontalAlign.End }}).margin({ top: 20, right: 15 })Column({ space: 2 }) {Image($r('app.media.langren')).height(40).width(40).borderRadius(20)Text('狼人').fontWeight(700).fontSize(12)}.id('img7').alignRules({top: { anchor: 'img6', align: VerticalAlign.Bottom }, right: { anchor: '__container__', align: HorizontalAlign.End }}).margin({ top: 20, right: 15 })Column({ space: 2 }) {Image($r('app.media.langren')).height(40).width(40).borderRadius(20)Text('狼人').fontWeight(700).fontSize(12)}.id('img8').alignRules({top: { anchor: 'img7', align: VerticalAlign.Bottom }, right: { anchor: '__container__', align: HorizontalAlign.End }}).margin({ top: 20, right: 15 })}.borderRadius(10).backgroundColor('#ccc')}.justifyContent(FlexAlign.Center).height('100%').width('100%')}.height('100%').width('100%').title('展示RelativeContainer')}
}@Builder
function RelativeContainerCaseBuilder() {RelativeContainerCase()
}

使用RelativeContainer的好处

对于这种布局，可以使用线性布局来展示，比如：两个Column，或者四个Row，那么用RelativeContainer的好处在哪？

如果使用线性布局，就会多出是组件的嵌套，影响渲染的性能，使用RelativeContainer，可以直接将组件树拍平，提升渲染性能，对于更加复杂的场景，使用RelativeContainer更是可以做到随心所欲布局，只要对照UI设计稿，把控好距离，设置id，我的组件想放那块就放哪块，不需要像线性布局那样考虑如何嵌套才能达到UI效果

 效果展示