鸿蒙next List 使用一 基本用法

import util from '@ohos.util';

class Contact {
  key: string = util.generateRandomUUID(true);
  name: string;
  icon: Resource;

  constructor(name: string, icon: Resource) {
    this.name = name;
    this.icon = icon;
  }
}

@Entry
@Component
struct SimpleContacts {
  private contacts: Array<object> = [
    new Contact('小明1', $r("app.media.car_icon2")),
    new Contact('小红2', $r("app.media.car_icon2")),
    new Contact('小明3', $r("app.media.car_icon2")),
    new Contact('小红4', $r("app.media.car_icon2")),
    new Contact('小明5', $r("app.media.car_icon2")),
    new Contact('小红6', $r("app.media.car_icon2")),
    new Contact('小明7', $r("app.media.car_icon2")),
    new Contact('小红8', $r("app.media.car_icon2")),
    new Contact('小明9', $r("app.media.car_icon2")),
    new Contact('小红10', $r("app.media.car_icon2")),
    new Contact('小明11', $r("app.media.car_icon2")),
    new Contact('小红12', $r("app.media.car_icon2")),
    new Contact('小明13', $r("app.media.car_icon2")),
    new Contact('小红14', $r("app.media.car_icon2")),
    new Contact('小明15', $r("app.media.car_icon2")),
    new Contact('小红16', $r("app.media.car_icon2")),
    new Contact('小明17', $r("app.media.car_icon2")),
    new Contact('小红18', $r("app.media.car_icon2")),
  ]

  build() {
    List() {
      ForEach(this.contacts, (item: Contact) => {
        ListItem() {
          Row() {
            Image(item.icon)
              .width(40)
              .height(40)
              .margin(10)
            Text(item.name).fontSize(20)
          }
          .width('100%')
          .justifyContent(FlexAlign.Start)
        }
        //这路的可以必须唯一 不然渲染会有问题
      }, (item: Contact) => JSON.stringify(item))
    }
    .width('100%')
  }
}

ForEach 会一次性加载所有的元素 所以只适用于元素较少的时候