I.はじめに
- 説明: リスト リストはモバイル デバイスで最も一般的です。たとえば、アドレス帳、テキスト メッセージ、チャット ソフトウェアなど、すべてに彼の存在が含まれています。
- 難易度: 簡単
- 知識ポイント:
- 1. リストコンポーネントの使用
- 2.ArkUI リソース グループのデータ型を理解する
2. リストリスト
1. 問題（バグ）を見つける
HarmonyOS の公式例に従って、最初にコピーしてプロジェクトで実行しましたが、システムに問題が発生し、コンソールに次のログが表示されました。
[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)
これらのログを注意深く解釈した結果、キー 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'
})
}
}
3.ArkUI リソース グループのデータ型
最初に HarmonyOS を使い始めたとき、データ型はいくつかの一般的な言語のものと同じだと思いましたが、違いがあるとは予想していませんでした。そこで公式ドキュメントを調べてみたところ、具体的なデータ型は次のとおりです。
| タイプ | 名前 |
|---|---|
| ブール値 | ブール値 |
| 色 | 色 |
| 浮く | 浮動小数点 |
| インアレイ | 整数配列 |
| 整数 | 整数 |
| パターン | スタイル |
| 複数 | 複数形 |
| ストラアレイ | 文字列配列 |
| 弦 | 弦 |
公式推奨は、データを JSON データ リソースの形式で出力することです。このブログではコード表示の便宜上、アノテーションを使用して強制変換を行っています。
