HarmonyOS 容器和控件的布局问题

参考示例如下：

class CardItem {
  image: string | Resource = ''
  name: string = ''
  num: string = ''
  desc: string = ''

  constructor(image: string | Resource, name: string, num: string, desc: string) {
    this.image = image;
    this.name = name;
    this.num = num
    this.desc = desc
  }
}

@Entry
@Component
struct ItemPage {
  @State message: string = 'Hello World';
  cardItems: CardItem[] = [
  // TODO 需要替换图片
    new CardItem($r('app.media.zp'), '普通卡', '888888888888', '不超过6个字'),
    new CardItem($r('app.media.zp'), '学生卡', '666666666666', '不超过6个字'),
    new CardItem($r('app.media.zp'), '公交卡', '7777777777777', '不超过6个字'),
  ]

  @Builder
  cardItem(item: CardItem) {
    Column() {
      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
        Row({ space: 5 }) {
          // TODO 需要替换图片
          Image($r('app.media.qb')).size({ width: 20, height: 20 })
          Text(item.name).fontColor(Color.White)
        }

        Text(item.desc).fontColor(Color.White)
      }

      Column() {
        Text(item.num).fontColor(Color.White)
      }
    }
    .backgroundImage(item.image)
    .backgroundImageSize(ImageSize.Cover)
    .borderRadius(10)
    .padding(10)
    .margin({ bottom: 20 })
  }

  build() {
    Column({ space: 10 }) {
      Row() {
        Text('实体卡')
        Row() {
          // TODO 需要替换图片
          Image($r('app.media.add')).size({ width: 20, height: 20 })
          Text('添加卡片')
        }
      }.width('100%').justifyContent(FlexAlign.SpaceBetween)

      List() {
        ForEach(this.cardItems, (item: CardItem) => {
          this.cardItem(item)
        })
      }
    }
    .margin(10)
  }
}