鸿蒙的 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 组件。
如果你有任何问题或需要进一步讨论，欢迎随时交流！