鸿蒙的 ListItem 组件

在鸿蒙 Next 开发中，ListItem 组件是构建列表界面的核心组件之一。它用于展示列表中的具体项，通常与 List 组件配合使用，以实现丰富的列表布局和交互效果。本文将详细介绍 ListItem 组件的用法和一些常见场景。

一、`ListItem` 组件的基本用法

（一）简单列表项

ListItem 是 List 组件中的子组件，用于定义列表中的每一项。以下是一个简单的 ListItem 示例：

typescript 复制代码

@Entry
@Component
struct SimpleList {
  @State list: string[] = ["Item 1", "Item 2", "Item 3", "Item 4"];

  build() {
    Column() {
      List() {
        ForEach(this.list, (item: string) => {
          ListItem() {
            Text(item)
              .fontSize(18)
              .textAlign(TextAlign.Center)
          }
        }, (item: string) => item)
      }
      .width("100%")
      .height("100%")
    }
  }
}

在上述代码中，List 组件包含多个 ListItem，每个 ListItem 显示一个字符串。

（二）带图标和文本的列表项

ListItem 可以包含更复杂的布局，例如图标和文本。以下是一个带图标和文本的列表项示例：

typescript 复制代码

interface UserListInterface {
  title: string;
  img: string;
}

@Entry
@Component
struct ListWithIcons {
  @State list: UserListInterface[] = [
    {
      title: "服务",
      img: "https://www.itying.com/images/listimg/icon/01.jpg"
    },
    {
      title: "收藏",
      img: "https://www.itying.com/images/listimg/icon/02.jpg"
    },
    {
      title: "朋友圈",
      img: "https://www.itying.com/images/listimg/icon/03.jpg"
    }
  ];

  build() {
    Column() {
      List() {
        ForEach(this.list, (item: UserListInterface) => {
          ListItem() {
            Row() {
              Image(item.img)
                .width(28)
                .height(28)
                .objectFit(ImageFit.Cover)
              Text(item.title)
                .fontSize(16)
                .padding({ left: 10 })
            }
            .width("100%")
            .height("50vp")
            .padding({ top: 10, bottom: 10 })
          }
        }, (item: UserListInterface) => item.title)
      }
      .width("100%")
      .height("100%")
    }
  }
}

在上述代码中，每个 ListItem 包含一个图标和一个文本标签。

（三）分组列表项

ListItem 也可以与 ListItemGroup 配合使用，以实现分组效果。以下是一个分组列表项的示例：

typescript 复制代码

interface ItemType {
  title: string;
  projects: string[];
}

@Entry
@Component
struct GroupedList {
  @State timetableListItemGroup: ItemType[] = [
    {
      title: "星期一",
      projects: ["语文", "数学"]
    },
    {
      title: "星期二",
      projects: ["语文", "数学"]
    }
  ];

  build() {
    Column() {
      List() {
        ForEach(this.timetableListItemGroup, (item: ItemType) => {
          ListItemGroup() {
            ForEach(item.projects, (project: string) => {
              ListItem() {
                Text(project)
                  .width("100%")
                  .height("30")
                  .fontSize(20)
                  .textAlign(TextAlign.Center)
              }
            }, (project: string) => project)
          }
          .borderRadius(10)
          .divider({ strokeWidth: 1, color: 0xDCDCDC })
          .margin({ bottom: 10 })
          .border({ width: 1, color: "blue" })
        })
      }
    }
    .margin({ left: 10, top: 10, right: 10 })
  }
}

在上述代码中，ListItemGroup 用于分组，每个组包含多个 ListItem。

二、`ListItem` 的高级用法

（一）水平滚动列表

ListItem 也可以用于水平滚动列表。以下是一个水平滚动列表的示例：

typescript 复制代码

@Entry
@Component
struct HorizontalList {
  @State list: string[] = ["Item 1", "Item 2", "Item 3", "Item 4"];

  build() {
    Column() {
      List({ listDirection: Axis.Horizontal }) {
        ForEach(this.list, (item: string) => {
          ListItem() {
            Column() {
              Text(item)
                .width("100%")
                .height("100%")
                .fontSize(18)
                .textAlign(TextAlign.Center)
            }
            .width(100)
            .height(100)
            .backgroundColor(Color.Red)
          }
        }, (item: string) => item)
      }
      .width("100%")
      .height(100)
    }
  }
}

在上述代码中，List 的 listDirection 属性设置为 Axis.Horizontal，以实现水平滚动。

（二）动态加载数据

ListItem 可以与动态数据结合使用，例如从网络加载数据并显示在列表中。以下是一个动态加载数据的示例：

typescript 复制代码

@Entry
@Component
struct DynamicList {
  @State list: string[] = [];

  aboutToAppear() {
    this.fetchData();
  }

  async fetchData() {
    // 模拟从网络加载数据
    await new Promise((resolve) => setTimeout(resolve, 1000));
    this.list = ["Item 1", "Item 2", "Item 3", "Item 4"];
  }

  build() {
    Column() {
      List() {
        ForEach(this.list, (item: string) => {
          ListItem() {
            Text(item)
              .fontSize(18)
              .textAlign(TextAlign.Center)
          }
        }, (item: string) => item)
      }
      .width("100%")
      .height("100%")
    }
  }
}

在上述代码中，aboutToAppear 生命周期方法用于在组件加载时调用 fetchData 方法，动态加载数据。

三、总结

ListItem 是鸿蒙 Next 中用于构建列表界面的核心组件。通过与 List 组件配合，可以实现丰富的列表布局和交互效果。本文介绍了 ListItem 的基本用法，包括简单列表项、带图标和文本的列表项、分组列表项、水平滚动列表以及动态加载数据的示例。希望这些内容能帮助你更好地理解和使用 ListItem 组件。

如果你有任何问题或需要进一步讨论，欢迎随时交流！

鸿蒙的 ListItem 组件