OpenHarmony列表组件如何绑定

在 OpenHarmony（ArkUI） 里，“列表组件”通常指 List + ListItem，数据绑定一般通过 状态变量 + ForEach 来实现。下面按常见场景给你说明。

一、最基础的列表绑定（静态 / 少量数据）

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

这种方式没有数据绑定，适合写死内容。

二、动态数据绑定（推荐方式 ✅）

1️⃣ 定义数据模型

interface ItemModel {
  id: number
  name: string
}

2️⃣ 使用 @State 定义数据源

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

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

✅ 关键点：

• List 只能放 ListItem
• ForEach 负责数据 → UI 的绑定
• 第三个参数是 唯一 key（非常重要）

三、点击列表项（事件绑定）

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

四、数据变化自动刷新（核心优势）

this.items.push({ id: 4, name: '西瓜' })

只要 items 是 @State，列表会自动更新。

五、复杂列表项绑定（自定义组件）

@Component
struct ItemView {
  item: ItemModel

  build() {
    Text(this.item.name)
      .fontSize(20)
  }
}

使用：

ForEach(this.items, (item) => {
  ListItem() {
    ItemView({ item: item })
  }
}, item => item.id.toString())

六、常见错误 ❌

❌ 直接在 List 里写循环
❌ ForEach 没有 key
❌ 用普通变量而不是 @State

七、总结一句话

OpenHarmony 列表绑定 = List + ListItem + ForEach + @State

如果你用的是 eTS / ArkTS / API 9 / API 10 或 声明式 UI / 类 Web 范式，我也可以给你对应版本示例。