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)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.