OpenHarmony列表组件怎么用

在 OpenHarmony（ArkUI） 中，“列表组件”通常指 List + ListItem（声明式开发，ArkTS），这是最常用的列表实现方式。下面从基础用法 → 常用属性 → 示例 → 常见场景给你讲清楚。

一、最基础的 List 用法

@Entry
@Component
struct ListExample {
  build() {
    List() {
      ListItem() {
        Text('Item 1')
      }
      ListItem() {
        Text('Item 2')
      }
      ListItem() {
        Text('Item 3')
      }
    }
  }
}

✅ List：列表容器
✅ ListItem：列表中的每一项

二、使用数据渲染列表（常见）

1️⃣ 使用数组 forEach

@Entry
@Component
struct ListExample {
  private data: string[] = ['苹果', '香蕉', '橙子']

  build() {
    List() {
      ForEach(this.data, (item: string) => {
        ListItem() {
          Text(item)
            .fontSize(20)
            .padding(10)
        }
      })
    }
  }
}

三、List 常用属性

1️⃣ 列表方向（横向 / 纵向）

List() {
  // ListItem...
}
.listDirection(Axis.Horizontal) // 横向列表

默认是 纵向（Axis.Vertical）

2️⃣ 分割线

List() {
  // ListItem...
}
.divider({
  strokeWidth: 1,
  color: '#EEEEEE',
  startMargin: 10,
  endMargin: 10
})

3️⃣ 滚动相关

List() {
  // ListItem...
}
.scrollBar(BarState.Auto)
.edgeEffect(EdgeEffect.Spring)

四、ListItem 常用配置

ListItem() {
  Text('内容')
}
.onClick(() => {
  console.log('点击了')
})

五、常见实战示例

✅ 带图标的列表

ListItem() {
  Row() {
    Image($r('app.media.icon'))
      .width(30)
      .height(30)
    Text('设置')
      .margin({ left: 10 })
  }
  .padding(10)
}

✅ 点击跳转到详情（简化）

ListItem() {
  Text(item)
}
.onClick(() => {
  // router.pushUrl(...)
})

六、懒加载（长列表推荐）

OpenHarmony 推荐 LazyForEach 用于大数据列表

List() {
  LazyForEach(this.dataSource, (item: string) => {
    ListItem() {
      Text(item)
    }
  })
}

（需要配合 IDataSource 使用，适合几百条以上数据）

七、和 Scroll 的区别

八、小结

✅ 列表 = List + ListItem
✅ 数据列表用 ForEach / LazyForEach
✅ 支持横竖、分割线、点击事件
✅ 长列表用懒加载

如果你愿意，我可以：

• 给你 完整 Demo 项目结构
• 教你 List + 下拉刷新 / 上拉加载
• 对比 eTS / JS / 旧版写法

你现在是 OpenHarmony 几？ ArkTS 还是 JS？