鸿蒙ArkTS List组件实战：基础用法+性能优化（极简干货）

前端技术

63人浏览 · 2026-05-05 17:48:51

前端技术 · 2026-05-05 17:48:51 发布

在鸿蒙ArkTS开发中，List组件是高频核心组件，几乎所有需要展示多条数据的场景（如商品列表、消息列表、设置项）都离不开它。本文摒弃冗余理论，聚焦实战，涵盖List基础渲染、数据绑定、常见交互及性能优化，适配有ArkTS基础的开发者，代码可直接复制复用。

一、核心逻辑

通过状态变量（@State/@Link）实现数据与UI联动，数据变化自动刷新列表；
长列表可通过合理控制数据源规模、优化列表项渲染，避免一次性渲染所有项导致卡顿；
支持横向/纵向滚动、下拉刷新、上拉加载等常用交互。

二、实战场景（3个核心用法）

2.1 基础纵向列表（短列表，≤50项）

适用于数据量少的场景（如设置列表），用ForEach绑定数据，简洁高效。

2.2 横向列表（如轮播、横向菜单）

通过设置scrollDirection切换滚动方向，适配横向展示需求。

2.3 长列表优化（≥100项）

长列表可通过控制数据源分批加载、简化列表项布局，实现“轻量化渲染”，降低内存占用、提升流畅度，这是项目开发中必用的优化手段。

三、完整实战代码

@Entry
@Component
struct ListPracticePage {
  // 1. 模拟数据源（短列表+长列表）
  @State shortList: { id: number, title: string }[] = [
    { id: 1, title: "设置1" },
    { id: 2, title: "设置2" },
    { id: 3, title: "设置3" }
  ];

  // 2. 模拟长列表数据源（100条，用ForEach渲染，优化加载逻辑）
  private longList = Array.from({ length: 100 }, (_, i) => ({
    id: i + 1,
    title: `列表项 ${i + 1}`
  }));

  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%");
  }
}