HarmonyOS相对布局

RelativeContainer( ) 12+

1：概念

• 相对布局容器内部一定要有子组件才能显示，如果没子组件，该容器不占空间
• 容器内子组件区分水平方法和垂直方向

2：子组件方向

1. 水平方向：left，middle，right 对应容器的HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.end
2. 垂直方向：top，center，bottom 对应的容器的VerticalAlign.top, VerticalAlign.center, VerticalAlign.bottom

3：注意

1.  1. 参与相对布局的容器内组件，不设置id的组件可以显示，但是不能被其他子组件作为锚点，相对布局容器会为其拼接id，此id的规律无法被应用感知
    2. 容器id固定位 ‘__container__’   guideline（辅助线）和barrier（封装）
    3. id不能与组件重复， 重复的话按照组件 > guideline > barrier
   

4：代码

@Entry
@Component
struct Test04 {
  @State message: string = 'Hello World';

  build() {
    Column(){
      RelativeContainer() {

        Row(){
        }
        .alignRules({
          top:{anchor:'__container__',align:VerticalAlign.Top},
          middle:{anchor:'__container__',align:HorizontalAlign.Center}
        })
        .id('row1')
        .backgroundColor('#ff3334')
        .width(100)
        .height(100)

        Row(){
        }
        .id('row2')
        .width(100)
        .height(100)
        .alignRules({
          center:{anchor:'__container__',align:VerticalAlign.Center},
          right:{anchor:'row1',align:HorizontalAlign.Start}
        })
        .backgroundColor('#ffcc00')

        Row(){
        }
        .id('row3')
        .alignRules({
          top:{anchor:'row1',align:VerticalAlign.Bottom},
          left:{anchor:'row1',align:HorizontalAlign.End},
          right:{anchor:'__container__',align:HorizontalAlign.End},
          bottom:{anchor:'row2',align:VerticalAlign.Bottom}
        })
        .backgroundColor('#ff9a66')

        Row(){
        }
        .alignRules({
          top:{anchor:'row3',align:VerticalAlign.Bottom},
          left:{anchor:'row2',align:HorizontalAlign.End},
          right:{anchor:'row3',align:HorizontalAlign.Start},
          bottom:{anchor:'__container__',align:VerticalAlign.Bottom}
        })
        .backgroundColor('#ff66ff')

        Image($r('app.media.app_icon'))
          .alignRules({
            top:{anchor:'row1',align:VerticalAlign.Bottom},
            left:{anchor:'row2',align:HorizontalAlign.End},
            right:{anchor:'row3',align:HorizontalAlign.Start},
            bottom:{anchor:'row4',align:VerticalAlign.Top}
          })

      }
      .width(300)
      .height(300)
      .borderWidth(1)
    }
    .margin({top:30})
    .height('100%')
    .width('100%')
  }
}

5：auto

1. 父组件RelativeContainer的宽高设置为auto

2. 由于父组件的长宽由子组件撑开，锚点设置尽量不用父组件

3. 样例

   •   RelativeContainer(){
               Row(){}.width(100).height(100)
               .id('row1')
               .backgroundColor(Color.Red)
               Row(){}.width(100).height(100)
               .backgroundColor(Color.Blue)
               .alignRules({
                 left:{ anchor:'row1', align:HorizontalAlign.End },
                 top: { anchor:'row1', align:VerticalAlign.Bottom }
               })
               .id('row2')
               Row(){}.width(100).height(100)
               .alignRules({
                 left: { anchor: 'row1', align:HorizontalAlign.Start },
                 top: { anchor: 'row2', align:VerticalAlign.Bottom }
               })
               .backgroundColor(Color.Green)
       
       
       
             }
             .width('auto')
             .height('auto')
             .border({
               width:1
             })
     

6：bias

• 对齐后如果需要额外偏移可以设置bias（也可以使用offset）

样例

      RelativeContainer(){
        Row(){}.width(100).height(100)
        .backgroundColor(Color.Red)
        .id('row1')
        .alignRules({
          left: { anchor: '__container__', align: HorizontalAlign.Start },
          right: { anchor: '__container__', align:HorizontalAlign.End },
          bottom:{ anchor: '__container__', align:VerticalAlign.Bottom },
          top: { anchor: '__container__', align:VerticalAlign.Top },
          bias: { vertical:0,horizontal:0.5 }

        })
      }
      .width(300)
      .height(300)
      .border({
        width:1
      })

bias:{vertical: 0, horizontal: 0.5}
// 垂直方向上偏移0，水平方向上偏移

7：guideLine

• 设置RelativeContainer容器的辅助线
• value：Array，数组中的每个项目即为一条辅助线
  • id：guideLind的id，必须是唯一的并且不可以与容器内组件同名
  • direction：指定guideLine的方向 水平 | 垂直 （默认值Axis.Vertical）
  • position：指定guideLine位置，默认值{ start: 0 }

样例

      RelativeContainer(){
        Row(){}.width(100).height(100)
        .backgroundColor(Color.Red)
        .id('row1')
        .alignRules({
          left: { anchor: 'guideLine1', align: HorizontalAlign.Start },
          top: { anchor: 'guideLine2', align:VerticalAlign.Top }
        })
      }
      .guideLine([
        {
          id:'guideLine1',
          direction:Axis.Vertical, //距离垂直轴方向的距离
          position:{
            start: 50
          }
        },
        {
          id:'guideLine2',
          direction:Axis.Horizontal, //距离水平轴方向的距离
          position:{
            start: 50
          }
        }
      ])
      .width(300)
      .height(300)
      .border({
        width:1
      })

8：barrier

• barrier ( value: Array )
• 设置RelativeContainer容器内的屏障，Array每一项目表示一个屏障
  • id：barrier的id必须唯一且不能与容器组件重名
  • direction：barrier的方向，BarrierDirection.LEFT
  • referencedId：指定生成barrier所依赖的组件

样例

      RelativeContainer(){
        Row(){}.width(100).height(100)
        .backgroundColor(Color.Red)
        .id('row1')

        Row(){}.width(100).height(100)
        .alignRules({
          left: { anchor:'row1', align:HorizontalAlign.End },
          top: { anchor: 'row1', align: VerticalAlign.Bottom }
        })
        .id('row2')
        .backgroundColor(Color.Green)

        Row().width(100).height(100)
          .alignRules({
            left: { anchor:'row1', align:HorizontalAlign.End },
            top: { anchor: 'row2', align:VerticalAlign.Bottom }
          })
          .backgroundColor(Color.Yellow)
          .id('row3')

        Row().width(100).height(100)
          .alignRules({
            top: { anchor: 'barrier1', align:VerticalAlign.Bottom },
            left: { anchor: 'barrier2', align:HorizontalAlign.End }
          })
          .backgroundColor(Color.Pink)

      }
      .width(300)
      .height(500)
      .border({
        width:1
      })
      .barrier([
        {
          id: 'barrier1',
          direction: BarrierDirection.BOTTOM,   // 该矩形的底边
          referencedId:['row1','row2','row3']  // 将row1，row2，row3封装在一个矩形中
        },
        {
          id: 'barrier2',
          direction: BarrierDirection.RIGHT,  // 该矩形的右边
          referencedId:['row1','row2']
        }
      ])