RelativeContainer 盒子定位

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

  build() {
    // RelativeContainer() {
    //       Column(){
    //         Text('text1')
    //       }.width(300).height(300).backgroundColor(Color.Brown)
    //
    //       Column(){
    //         Text('text2')
    //       }.width(200).height(200).backgroundColor(Color.Orange)
    //       Column(){
    //         Text('text3')
    //       }.width(100).height(100).backgroundColor(Color.Pink)
    // }
    // .height('50%').width('100%').border({width:1,color:Color.Red})


    Column(){
      RelativeContainer() {
        Row(){
          Text('text1').fontColor(Color.White)
        }.width(100).height(100).backgroundColor(Color.Brown)
        .alignRules({
          top: {anchor: "__container__", align: VerticalAlign.Top},
          left: {anchor: "__container__", align: HorizontalAlign.Start}
        }).justifyContent(FlexAlign.Center).id("row1")

        Column(){
          Text('text2').fontColor(Color.White)
        }.width(100).height(100).backgroundColor(Color.Orange)
        .alignRules({
          top: {anchor: "__container__", align: VerticalAlign.Top},
          right: {anchor: "__container__", align: HorizontalAlign.End}
        }).justifyContent(FlexAlign.Center).id("row2")

        Column(){
          Text('text3').fontColor(Color.White)
        }.width(100).height(100).backgroundColor(Color.Pink)
        .alignRules({
          bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
          left: {anchor: "__container__", align: HorizontalAlign.Start}
        }).justifyContent(FlexAlign.Center).id("row3")


        Column(){
          Text('text4').fontColor(Color.White)
        }.width(100).height(100).backgroundColor(Color.Black)
        .alignRules({
          bottom: {anchor: "__container__", align: VerticalAlign.Bottom},
          right: {anchor: "__container__", align: HorizontalAlign.End}
        }).justifyContent(FlexAlign.Center).id("row4").offset({x:20,y: 20})

        Column(){
          Text('text5').fontColor(Color.White)
        }.width(100).height(100).backgroundColor(Color.Gray)
        .alignRules({
          center: {anchor: "row1", align: VerticalAlign.Center},
          middle: {anchor: "__container__", align: HorizontalAlign.Center}
        }).justifyContent(FlexAlign.Center).id("row5")

      }
      .height(300).width(300).border({width:1,color:Color.Red})

    }.height('100%').width('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)


  }
}