当前位置：首页 > news >正文

鸿蒙原生开发手记：徒步迹 - 路线列表页与@LazyForEach

news 2026/7/17 0:23:21

鸿蒙原生开发手记：徒步迹 - 路线列表页与@LazyForEach

使用 @LazyForEach 实现高性能长列表

一、前言

路线列表是用户浏览路线的入口。当路线数据量大时，使用 @LazyForEach 进行懒加载可以显著提升性能。

二、@LazyForEach 基础

2.1 原理

@LazyForEach 只渲染可见区域的列表项，离屏的列表项会被回收，大幅减少内存占用。

2.2 使用步骤

// 1. 定义数据源（实现 IDataSource 接口） class RouteDataSource implements IDataSource { private data: HikingRoute[] = []; totalCount(): number { return this.data.length; } getData(index: number): HikingRoute { return this.data[index]; } registerDataChangeListener(listener: DataChangeListener): void {} unregisterDataChangeListener(listener: DataChangeListener): void {} } // 2. 创建数据源实例 @State private dataSource: RouteDataSource = new RouteDataSource(); // 3. 在 @LazyForEach 中使用 @LazyForEach(this.dataSource, (item: HikingRoute) => { ListItem() { RouteCard({ route: item }); } }, (item: HikingRoute) => item.id.toString());

三、完整路线列表实现

// 数据源 class RouteDataSource extends ArrayList<HikingRoute> { // 实现 IDataSource 接口的方法... } @Entry @Component struct RouteListPage { @State private dataSource: RouteDataSource = new RouteDataSource(); @State private currentPage: number = 1; private listScroller: Scroller = new Scroller(); aboutToAppear(): void { this.loadRoutes(); } build() { Column() { // 顶部导航 Row() { Text('路线列表') .fontSize(18) .fontWeight(FontWeight.Bold) .layoutWeight(1) .textAlign(TextAlign.Center); } .width('100%') .padding(16); // 搜索框 SearchBar(); // 懒加载列表 List() { LazyForEach(this.dataSource, (route: HikingRoute) => { ListItem() { RouteCard({ route: route, onClick: () => { router.pushUrl({ url: 'pages/RouteDetailPage', params: { routeId: route.id }, }); }, }); } }, (route: HikingRoute) => route.id.toString()); } .width('100%') .layoutWeight(1) .onReachEnd(() => { // 触底加载更多 this.loadMore(); }); } .width('100%') .height('100%') .backgroundColor('#F5F5F5'); } async loadRoutes(): Promise<void> { const response = await apiService.getRoutes(this.currentPage, 10); // 添加到数据源... } loadMore(): void { this.currentPage++; this.loadRoutes(); } }