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

一、引言

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

二、列表List

1、发现问题(Bug)

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

java 复制代码
[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)代码

ts 复制代码
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数据资源的形式来输出数据。本篇博客为了代码展示方便,就通过注解的手段,进行了强制转换。

相关推荐
Georgewu2 小时前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos
塞尔维亚大汉2 小时前
鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc 进程通讯内容
harmonyos·源码阅读
Georgewu2 小时前
【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页
harmonyos
ajassi20004 小时前
开源 Arkts 鸿蒙应用 开发(六)数据持久--文件和首选项存储
linux·开源·harmonyos
塞尔维亚大汉5 小时前
鸿蒙内核源码分析(共享内存) | 进程间最快通讯方式
harmonyos·源码阅读
生如夏花℡8 小时前
HarmonyOS学习记录4
学习·华为·harmonyos
xq95279 小时前
编程之路2025年中总结,勇往直前 再战江湖
harmonyos
枫叶丹49 小时前
【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置
华为·harmonyos·deveco studio·harmonyos next
乌萨奇也要立志学C++10 小时前
【C++详解】STL-list模拟实现(深度剖析list迭代器,类模板未实例化取嵌套类型问题)
c++·list
前端世界21 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos