【鸿蒙(HarmonyOS)】List列表、ArkUI资源组数据类型

一、引言

  • 描述: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()方法不可调用

【鸿蒙(HarmonyOS)】List列表、ArkUI资源组数据类型_第1张图片

2、完善代码

(1)效果

【鸿蒙(HarmonyOS)】List列表、ArkUI资源组数据类型_第2张图片

(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,我以为数据类型和一些大众语言是一样的,没想到还是有所差异。于是就去翻了官方文档,具体的数据类型有如下几种:

类型 名称
boolean 布尔型
color 颜色
float 浮点型
intarray 整型数组
integer 整型
pattern 样式
plural 复数形式
strarray 字符串数组
string 字符串

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

【鸿蒙(HarmonyOS)】List列表、ArkUI资源组数据类型_第3张图片

你可能感兴趣的:(HarmonyOS,list,鸿蒙,harmonyos)