鸿蒙的 ListItem 组件
在鸿蒙 Next 开发中，ListItem 组件是构建列表界面的核心组件之一。它用于展示列表中的具体项，通常与 List 组件配合使用，以实现丰富的列表布局和交互效果。本文将详细介绍 ListItem 组件的用法和一些常见场景。
一、ListItem 组件的基本用法
（一）简单列表项
ListItem 是 List 组件中的子组件，用于定义列表中的每一项。以下是一个简单的 ListItem 示例：
@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 可以包含更复杂的布局，例如图标和文本。以下是一个带图标和文本的列表项示例：
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 配合使用，以实现分组效果。以下是一个分组列表项的示例：
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 也可以用于水平滚动列表。以下是一个水平滚动列表的示例：
@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 可以与动态数据结合使用，例如从网络加载数据并显示在列表中。以下是一个动态加载数据的示例：
@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 组件。
如果你有任何问题或需要进一步讨论，欢迎随时交流！