文章目录1. 核心依赖与前提1.1 组件约束1.2 适用版本2. 完整标准代码3. ListItem 创建与使用详解3.1 基础创建语法核心3.2 必须依赖的父容器3.3 结合 LazyForEach 批量创建高性能方案3.4 数据适配器ListDataSource作用4. ListItem 常用样式配置核心属性说明5. 运行效果总结ListItem是列表布局的基础单元组件必须嵌套在List容器中使用用于展示列表中的单行内容支持文本、图标、自定义布局、点击交互等场景是应用开发中高频使用的基础组件。1. 核心依赖与前提1.1 组件约束ListItem只能作为List的直接子组件不可独立使用配合LazyForEach实现大数据列表的懒加载优化依赖IDataSource接口实现数据驱动列表渲染。1.2 适用版本HarmonyOS 6 / API 14及以上2. 完整标准代码// xxx.ets // 1. 定义数据适配器实现IDataSource接口 export class ListDataSource implements IDataSource { private list: number[] []; constructor(list: number[]) { this.list list; } // 获取列表总数据量 totalCount(): number { return this.list.length; } // 根据索引获取对应数据 getData(index: number): number { return this.list[index]; } // 注册数据变化监听 registerDataChangeListener(listener: DataChangeListener): void { } // 注销数据变化监听 unregisterDataChangeListener(listener: DataChangeListener): void { } } // 2. 页面组件List ListItem 标准使用 Entry Component struct ListItemExample { // 初始化数据源 private arr: ListDataSource new ListDataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]); build() { Column() { // List容器配置间距20默认起始索引0 List({ space: 20, initialIndex: 0 }) { // 懒加载遍历数据渲染ListItem LazyForEach(this.arr, (item: number) { // 核心创建标准ListItem ListItem() { Text( item) .width(100%) .height(100) .fontSize(16) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(0xFFFFFF) } }, (item: string) item) }.width(90%) .scrollBar(BarState.Off) // 隐藏滚动条 }.width(100%).height(100%).backgroundColor(0xDCDCDC).padding({ top: 5 }) } }运行效果如图3. ListItem 创建与使用详解3.1 基础创建语法核心ListItem采用闭包语法创建内部可包裹任意子组件Text/Image/Row/Column等ListItem() { // 列表项内容子组件 Text(列表项内容) }这是ListItem最基础的创建方式也是官方文档推荐的标准写法。3.2 必须依赖的父容器ListItem无法单独渲染必须放在List组件内部List() { // 可创建多个ListItem ListItem() { Text(项1) } ListItem() { Text(项2) } }3.3 结合 LazyForEach 批量创建高性能方案在长列表场景中使用LazyForEachIDataSource实现按需渲染避免性能损耗这是鸿蒙开发的最佳实践遍历数据源this.arr为每一条数据自动创建一个ListItem第三个参数为唯一标识优化渲染性能LazyForEach(this.arr, (item: number) { ListItem() { // 自定义列表项内容 } }, (item: string) item)3.4 数据适配器ListDataSource作用实现IDataSource接口为ListItem提供标准化数据totalCount()返回列表总项数决定ListItem的创建数量getData(index)根据索引返回对应数据绑定到ListItem监听方法用于数据更新时刷新列表基础场景可空实现4. ListItem 常用样式配置基于官方文档ListItem支持丰富的样式定制可直接在组件后链式调用属性示例ListItem() { Text( item) } .width(100%) // 宽度 .height(100) // 高度 .backgroundColor(0xFFFFFF) // 背景色 .borderRadius(10) // 圆角 .padding(10) // 内边距 .onClick(() { // 点击事件 console.log(点击列表项 item) })核心属性说明属性作用width/height设置列表项宽高backgroundColor设置背景颜色borderRadius设置圆角padding/margin设置内/外边距onClick列表项点击交互scrollBar配置列表滚动条List属性5. 运行效果页面展示灰色背景容器渲染10个白色圆角ListItem垂直排列间距20px每个列表项居中显示数字 0~9隐藏列表滚动条界面简洁美观。总结ListItem是HarmonyOS列表布局的核心基础组件标准创建流程为实现IDataSource数据适配器在List容器中使用LazyForEach遍历数据通过ListItem(){}闭包创建列表项如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力
HarmonyOS6 ArkTS 创建ListItem
文章目录1. 核心依赖与前提1.1 组件约束1.2 适用版本2. 完整标准代码3. ListItem 创建与使用详解3.1 基础创建语法核心3.2 必须依赖的父容器3.3 结合 LazyForEach 批量创建高性能方案3.4 数据适配器ListDataSource作用4. ListItem 常用样式配置核心属性说明5. 运行效果总结ListItem是列表布局的基础单元组件必须嵌套在List容器中使用用于展示列表中的单行内容支持文本、图标、自定义布局、点击交互等场景是应用开发中高频使用的基础组件。1. 核心依赖与前提1.1 组件约束ListItem只能作为List的直接子组件不可独立使用配合LazyForEach实现大数据列表的懒加载优化依赖IDataSource接口实现数据驱动列表渲染。1.2 适用版本HarmonyOS 6 / API 14及以上2. 完整标准代码// xxx.ets // 1. 定义数据适配器实现IDataSource接口 export class ListDataSource implements IDataSource { private list: number[] []; constructor(list: number[]) { this.list list; } // 获取列表总数据量 totalCount(): number { return this.list.length; } // 根据索引获取对应数据 getData(index: number): number { return this.list[index]; } // 注册数据变化监听 registerDataChangeListener(listener: DataChangeListener): void { } // 注销数据变化监听 unregisterDataChangeListener(listener: DataChangeListener): void { } } // 2. 页面组件List ListItem 标准使用 Entry Component struct ListItemExample { // 初始化数据源 private arr: ListDataSource new ListDataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]); build() { Column() { // List容器配置间距20默认起始索引0 List({ space: 20, initialIndex: 0 }) { // 懒加载遍历数据渲染ListItem LazyForEach(this.arr, (item: number) { // 核心创建标准ListItem ListItem() { Text( item) .width(100%) .height(100) .fontSize(16) .textAlign(TextAlign.Center) .borderRadius(10) .backgroundColor(0xFFFFFF) } }, (item: string) item) }.width(90%) .scrollBar(BarState.Off) // 隐藏滚动条 }.width(100%).height(100%).backgroundColor(0xDCDCDC).padding({ top: 5 }) } }运行效果如图3. ListItem 创建与使用详解3.1 基础创建语法核心ListItem采用闭包语法创建内部可包裹任意子组件Text/Image/Row/Column等ListItem() { // 列表项内容子组件 Text(列表项内容) }这是ListItem最基础的创建方式也是官方文档推荐的标准写法。3.2 必须依赖的父容器ListItem无法单独渲染必须放在List组件内部List() { // 可创建多个ListItem ListItem() { Text(项1) } ListItem() { Text(项2) } }3.3 结合 LazyForEach 批量创建高性能方案在长列表场景中使用LazyForEachIDataSource实现按需渲染避免性能损耗这是鸿蒙开发的最佳实践遍历数据源this.arr为每一条数据自动创建一个ListItem第三个参数为唯一标识优化渲染性能LazyForEach(this.arr, (item: number) { ListItem() { // 自定义列表项内容 } }, (item: string) item)3.4 数据适配器ListDataSource作用实现IDataSource接口为ListItem提供标准化数据totalCount()返回列表总项数决定ListItem的创建数量getData(index)根据索引返回对应数据绑定到ListItem监听方法用于数据更新时刷新列表基础场景可空实现4. ListItem 常用样式配置基于官方文档ListItem支持丰富的样式定制可直接在组件后链式调用属性示例ListItem() { Text( item) } .width(100%) // 宽度 .height(100) // 高度 .backgroundColor(0xFFFFFF) // 背景色 .borderRadius(10) // 圆角 .padding(10) // 内边距 .onClick(() { // 点击事件 console.log(点击列表项 item) })核心属性说明属性作用width/height设置列表项宽高backgroundColor设置背景颜色borderRadius设置圆角padding/margin设置内/外边距onClick列表项点击交互scrollBar配置列表滚动条List属性5. 运行效果页面展示灰色背景容器渲染10个白色圆角ListItem垂直排列间距20px每个列表项居中显示数字 0~9隐藏列表滚动条界面简洁美观。总结ListItem是HarmonyOS列表布局的核心基础组件标准创建流程为实现IDataSource数据适配器在List容器中使用LazyForEach遍历数据通过ListItem(){}闭包创建列表项如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力
