【HarmonyOS Arkts笔记】Arkts ForEach循环使用_arkts 遍历 对象数组

说明

ForEach循环数组对象时 要指定对象的唯一标识 例如 id，否则只会显示第一个

@State tabsList: object[] = [
    { name: '砍价活动', id: 1, icon: 'https://php-b2c.likeshop.cn/uploads/images/2022062414322367e6a5479.png' },
    { name: '拼团活动', id: 2, icon: 'https://php-b2c.likeshop.cn/uploads/images/20220624143223798a31616.png' },
    { name: '限时秒杀', id: 3, icon: 'https://php-b2c.likeshop.cn/uploads/images/202206241432233bf9e9321.png' },
    { name: '热销榜单', id: 4, icon: 'https://php-b2c.likeshop.cn/uploads/images/20220624143223839e33279.png' },
  ]
1
2
3
4
5
6

/*金刚区*/
      Grid() {
        ForEach(this.tabsList, (item: any) => {
          GridItem() {
            Column() {
              Image(item.icon)
                .width(30)
                .height(30)
              Text(item.name)
                .margin({ top: 10 })
                .fontSize(12)
            }
          }
          // 必须加上对象的唯一标识  例如 id
        }, item => item.id)
      }
      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
      .rowsTemplate('1fr 1fr')
      .columnsGap(10)
      .rowsGap(10)
      .backgroundColor(0xFAEEE0)
      .height(200)
      .borderRadius(10)
      .margin({ top: 10 })
      .padding(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