HarmonyOS 使用RelativeContainer实现收货地址列表布局？

Question

如图，这种布局结构能否使用RelativeContainer实现

Answer 1

请参考以下示例：

@Entry
@Component
struct Index {
  build() {
    Flex() {
      RelativeContainer() {
        Row(){
          Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.SpaceAround,}){
            Text('北京市东城区').fontSize(15).textAlign(TextAlign.Start).backgroundColor(Color.Orange)
            Text('北京市东城区景山前街4号乾清宫').fontSize(20).fontWeight(400).textAlign(TextAlign.Start).backgroundColor(Color.Orange)
            Text('爱新觉罗弘历').fontSize(15).textAlign(TextAlign.Start).backgroundColor(Color.Orange)
          }

        }.width('98%').height(100)
        .backgroundColor("#FF3333")
        .id("row1")

        Row(){
          Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.SpaceAround,}){
            Text('北京市东城区').fontSize(15).textAlign(TextAlign.Start).backgroundColor(Color.Orange)
            Text('北京市东城区景山前街4号乾清宫').fontSize(20).fontWeight(400).textAlign(TextAlign.Start).backgroundColor(Color.Orange)
            Text('爱新觉罗弘历').fontSize(15).textAlign(TextAlign.Start).backgroundColor(Color.Orange)
          }

        }.width('98%').height(100)
        .backgroundColor("#FFCC00")
        .margin({top:10})
        .alignRules({
          left: {anchor: "row1", align: HorizontalAlign.Start},
          top: {anchor: "row1", align: VerticalAlign.Bottom}
        })
        .id("row2")

        Row(){
          Flex({direction:FlexDirection.Column,justifyContent:FlexAlign.SpaceAround,}){
            Text('北京市东城区').fontSize(15).textAlign(TextAlign.Start).backgroundColor(Color.Orange)
            Text('北京市东城区景山前街4号乾清宫').fontSize(20).fontWeight(400).textAlign(TextAlign.Start).backgroundColor(Color.Orange)
            Text('爱新觉罗弘历').fontSize(15).textAlign(TextAlign.Start).backgroundColor(Color.Orange)
          }

        }.width('98%').height(100)
        .backgroundColor("#FF6633")
        .margin({top:10})
        .alignRules({
          left: {anchor: "row1", align: HorizontalAlign.Start},
          top: {anchor: "row2", align: VerticalAlign.Bottom}
        })
        .id("row3")
      }
      .width("auto").height("auto")

    }
    .margin({left:10,right:10})
    .backgroundColor(Color.Blue)
    .height('100%')
  }
}