一、引言

• 描述：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'
    })
  }
}

三、ArkUI资源组数据类型

最开始使用HarmonyOS，我以为数据类型和一些大众语言是一样的，没想到还是有所差异。于是就去翻了官方文档，具体的数据类型有如下几种：

官方给予的建议是通过JSON数据资源的形式来输出数据。本篇博客为了代码展示方便，就通过注解的手段，进行了强制转换。