怎样实现OpenHarmony列表组件

在 OpenHarmony（ArkTS / ArkUI） 中，列表通常使用 List + ListItem 组件来实现。下面从基础用法 → 常用属性 → 数据绑定 → 点击事件 → 进阶用法逐步说明。

一、最基础的列表实现

import { List, ListItem, Text } from '@ohos.arkui.advanced';

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

二、使用数据渲染列表（推荐）

1. 定义数据

interface ItemModel {
  id: number
  name: string
}

2. 使用 ForEach 渲染

@Entry
@Component
struct ListExample {
  private items: ItemModel[] = [
    { id: 1, name: '苹果' },
    { id: 2, name: '香蕉' },
    { id: 3, name: '橙子' }
  ]

  build() {
    List() {
      ForEach(this.items, (item: ItemModel) => {
        ListItem() {
          Text(item.name)
            .fontSize(18)
            .padding(10)
        }
      }, (item) => item.id.toString())
    }
  }
}

✅ 注意：ForEach 第三个参数是 keyGenerator，必须唯一。

三、列表常用属性

1. 滚动方向

List({ space: 10 }) {
  // items
}
.scrollDirection(Axis.Vertical) // 或 Axis.Horizontal

2. item 间距

List({ space: 12 })

3. 分割线

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

四、列表点击事件

ListItem() {
  Text(item.name)
}
.onClick(() => {
  console.info('点击了：' + item.name)
})

五、下拉刷新 / 上拉加载（进阶）

上拉加载更多

List() {
  ForEach(this.items, item => {
    ListItem() {
      Text(item.name)
    }
  })
}
.onReachEnd(() => {
  console.info('到达列表底部，加载更多')
})

⚠️ 下拉刷新 OpenHarmony 目前需使用 Refresh 组件（API 10+）

Refresh({ refreshing: this.isRefreshing }) {
  List() {
    // items
  }
}
.onRefreshing(() => {
  // 刷新逻辑
})

六、复杂列表项（图文）

ListItem() {
  Row() {
    Image($r('app.media.icon'))
      .width(40)
      .height(40)
    Text(item.name)
      .margin({ left: 10 })
  }
  .padding(10)
}

七、性能建议 ✅

• ✅ 使用 ForEach 而非手动写多个 ListItem
• ✅ 给 ForEach 设置稳定 key
• ✅ 长列表考虑 LazyForEach（万级以上数据）

八、示例总结

List({ space: 10 }) {
  ForEach(this.items, item => {
    ListItem() {
      Text(item.name)
    }
    .onClick(() => console.info(item.name))
  }, item => item.id.toString())
}
.divider({ strokeWidth: 1, color: '#EEE' })

如果你需要：

• ✅ 横向列表
• ✅ 分组列表（Section）
• ✅ LazyForEach 长列表
• ✅ 与状态管理（@State / @Link）结合

可以告诉我你的 OpenHarmony API 版本 + 使用场景，我可以直接给你完整 demo。