在鸿蒙ArkTS开发中List组件是高频核心组件几乎所有需要展示多条数据的场景如商品列表、消息列表、设置项都离不开它。本文摒弃冗余理论聚焦实战涵盖List基础渲染、数据绑定、常见交互及性能优化适配有ArkTS基础的开发者代码可直接复制复用。一、核心逻辑通过状态变量State/Link实现数据与UI联动数据变化自动刷新列表长列表可通过合理控制数据源规模、优化列表项渲染避免一次性渲染所有项导致卡顿支持横向/纵向滚动、下拉刷新、上拉加载等常用交互。二、实战场景3个核心用法2.1 基础纵向列表短列表≤50项适用于数据量少的场景如设置列表用ForEach绑定数据简洁高效。2.2 横向列表如轮播、横向菜单通过设置scrollDirection切换滚动方向适配横向展示需求。2.3 长列表优化≥100项长列表可通过控制数据源分批加载、简化列表项布局实现“轻量化渲染”降低内存占用、提升流畅度这是项目开发中必用的优化手段。三、完整实战代码EntryComponentstruct ListPracticePage{// 1. 模拟数据源短列表长列表StateshortList:{id:number,title:string}[][{id:1,title:设置1},{id:2,title:设置2},{id:3,title:设置3}];// 2. 模拟长列表数据源100条用ForEach渲染优化加载逻辑privatelongListArray.from({length:100},(_,i)({id:i1,title:列表项${i1}}));build(){Column(){// 基础纵向短列表Text(基础纵向列表).fontSize(16).margin(10);List({space:8}){// space列表项间距ForEach(this.shortList,(item){ListItem(){Text(item.title).fontSize(14).padding(12).width(100%).backgroundColor(#f5f5f5);}},(item)item.id.toString());// 唯一Key必传优化渲染}.width(100%).height(150).backgroundColor(#fff);// 横向列表Text(横向列表).fontSize(16).margin(10);List({space:8}){ForEach(this.shortList,(item){ListItem(){Text(item.title).fontSize(14).padding(12).width(120).backgroundColor(#f5f5f5).textAlign(TextAlign.Center);}},(item)item.id.toString());}.width(100%).height(80).scrollDirection(ScrollDirection.Horizontal)// 横向滚动.backgroundColor(#fff);// 长列表ForEach实现优化加载逻辑Text(长列表ForEach优化).fontSize(16).margin(10);List({space:8}){ForEach(this.longList,(item){ListItem(){Text(item.title).fontSize(14).padding(12).width(100%).backgroundColor(#f5f5f5);}},(item)item.id.toString());}.width(100%).flexGrow(1).backgroundColor(#fff);}.padding(10).width(100%).height(100%);}}四、避坑重点Key必传ForEach的第三个参数Key生成器必须是唯一值如id禁止用数组索引否则会导致渲染异常、性能变差 专属服务【关于我】CSDN 技术分享者专注[各种技术]分享已帮助10000开发者【能帮你】 技术答疑 学习规划 项目指导** 添加微信最下方的微信名片备注CSDN