HarmonyOS应用开发学习笔记 UI布局学习 List(){}创建列表列表形式显示简单使用

木子102

于 2024-01-10 15:51:49 发布

阅读量1.5k

点赞数 17

分类专栏：鸿蒙HarmonOS 文章标签： harmonyos 学习笔记

本文链接：https://blog.youkuaiyun.com/qq_38355313/article/details/135503598

版权

本文详细介绍了在HarmonyOS中创建和管理列表（如List,ListItem,ForEach）的方法，包括列表内容的迭代、方向控制、间距设置、分隔线、滚动条、分组、粘性标题、快速返回顶部、滚动位置指示器和侧滑删除功能。同时提到了懒加载策略以优化性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

List 创建列表列表形式显示

官方文档：创建列表（List）

关键代码

List(){} 列表控件
ListItem() {} 子元素

例如
在这里插入图片描述

1、简单使用代码 List(){}

List() {
  ListItem() {
    Row() {
      Image($r('app.media.iconE'))
        .width(40)
        .height(40)
        .margin(10)

      Text('小明')
        .fontSize(20)
    }
  }

  ListItem() {
    Row() {
      Image($r('app.media.iconF'))
        .width(40)
        .height(40)
        .margin(10)

      Text('小红')
        .fontSize(20)
    }
  }
}

2、迭代列表内容 ForEach

import util from '@ohos.util';

class Contact {
  key: string = util.generateRandomUUID(true);
  name: string;
  icon: Resource;

  constructor(name: string, icon: Resource) {
    this.name = name;
    this.icon = icon;
  }
}

@Entry
@Component
struct SimpleContacts {
  private contacts = [
    new Contact('小明', $r("app.media.iconA")),
    new Contact('小红', $r("app.media.iconB")),
    ...
  ]

  build() {
    List() {
      ForEach(this.contacts, (item: Contact) => {
        ListItem() {
          Row() {
            Image(item.icon)
              .width(40)
              .