一、引言

描述：List列表在移动端设备中最为常见。比如：通讯录、短信、聊天软件等都，都拥有他的身影。
难度：简单
知识点：
1、列表组件的使用
2、认识ArkUI资源组数据类型

二、列表List

1、发现问题（Bug）

根据HarmonyOS官方给出一个样例，我先copy到了我的项目上运行，但在我的系统上却出现了问题，控制台爆了以下日志。

[phone]08-14 16:15:37.636   972 17976 E 03900/Ace: [Engine Log]Lifetime: 0.000000s
[phone]08-14 16:15:37.636   972 17976 E 03900/Ace: [Engine Log]Js-Engine: ark
[phone]08-14 16:15:37.636   972 17976 E 03900/Ace: [Engine Log]page: pages/Index.js
[phone]08-14 16:15:37.636   972 17976 E 03900/Ace: [Engine Log]Error message: is not callable
[phone]08-14 16:15:37.636   972 17976 E 03900/Ace: [Engine Log]Stacktrace:
[phone]08-14 16:15:37.636   972 17976 E 03900/Ace: [Engine Log]    at Contact (\ets\pages\Index.ets:19:9)
[phone]08-14 16:15:37.636   972 17976 E 03900/Ace: [Engine Log]    at SimpleContacts (\ets\pages\Index.ets:13:2)
[phone]08-14 16:15:37.636   972 17976 E 03900/Ace: [Engine Log]    at anonymous (webpack/startup:2:1)
[phone]08-14 16:15:37.636   972 17976 E 03900/Ace: [Engine Log]    at anonymous (./pages/Index.js:95:11)
[phone]08-14 16:15:37.636   972 17976 E 03900/Ace: [Engine Log]    at func_main_0 (\ets\pages\Index.ets:1:1)

认真去解读这些日志，发现问题出现在了 key: string = util.generateRandomUUID(true); generateRandomUUID()方法不可调用

在这里插入图片描述

2、完善代码

（1）效果

在这里插入图片描述

（2）代码

class Contact {
  // @ts-ignore
  id: integer;
  name: string;
  // @ts-ignore
  sex: integer;

  // @ts-ignore
  constructor(id:integer, name: string, sex: integer) {
    this.id = id;
    this.name = name;
    this.sex = sex;
  }
}

@Entry
@Component
struct SimpleContacts {
  private contacts = [
    new Contact(1000, '小明', 1),
    new Contact(1001, '小红', 2),
    new Contact(1002, '小歪', 3),
    new Contact(1003, '大红', 2),
  ]

  build() {
    List() {
      ForEach(this.contacts, (item: Contact) => {
        ListItem() {
          Row() {
            if (item.sex == 1) {
              Image($r('app.media.nan'))
                .width(40)
                .height(40)
                .margin(10)
            } else if (item.sex == 2) {
              Image($r('app.media.nv'))
                .width(40)
                .height(40)
                .margin(10)
            } else {
              Image($r('app.media.wai'))
                .width(40)
                .height(40)
                .margin(10)
            }
            Text(item.name).fontSize(20)
          }
          .width('100%')
          .justifyContent(FlexAlign.Start)
        }
      }, item => item.name)
    }.width('100%')
    .backgroundColor('#ffbfbfbf')
    .borderRadius(10)
    .divider({
      strokeWidth: 1,
      startMargin: 60,
      endMargin: 60,
      color: '#ffe9f0f0'
    })
  }
}