OpenHarmony列表组件怎么排序

在 OpenHarmony（ArkUI）里，“列表组件”通常指 List + ForEach 的写法。排序本质上不是 List 组件本身的功能，而是对数据源进行排序，List 只是按数据顺序渲染。

下面按常见场景给你说明。

一、最常用：对数据源排序（推荐）

1️⃣ 数字 / 字符串排序

@Component
struct MyList {
  @State data: number[] = [3, 1, 2, 5, 4]

  build() {
    List() {
      ForEach(this.data, (item: number) => {
        ListItem() {
          Text(item.toString())
        }
      })
    }
  }

  aboutToAppear() {
    // 升序
    this.data.sort((a, b) => a - b)
  }
}

2️⃣ 对象数组排序（最常见）

interface User {
  name: string
  age: number
}

@Component
struct UserList {
  @State users: User[] = [
    { name: 'Tom', age: 20 },
    { name: 'Jack', age: 18 },
    { name: 'Lucy', age: 25 }
  ]

  build() {
    List() {
      ForEach(this.users, (user: User) => {
        ListItem() {
          Text(`${user.name} - ${user.age}`)
        }
      })
    }
  }

  sortByAge() {
    this.users.sort((a, b) => a.age - b.age)
  }
}

二、点击按钮动态排序

Button('按年龄排序')
  .onClick(() => {
    this.users.sort((a, b) => a.age - b.age)
  })

✅ 因为 users 是 @State，排序后会自动刷新 List

三、降序 / 升序切换

@State asc: boolean = true

toggleSort() {
  this.asc = !this.asc
  this.users.sort((a, b) =>
    this.asc ? a.age - b.age : b.age - a.age
  )
}

四、字符串排序（中文 / 英文）

this.users.sort((a, b) =>
  a.name.localeCompare(b.name)
)

五、不要做的事 ❌

❌ 不要试图让 List 组件自己排序
❌ 不要在 ForEach 里写排序逻辑
✅ 永远先排数据，再渲染

六、进阶（大数据 / 性能）

• 数据量大：使用 @Observed + ObjectLink
• 复杂排序：封装 sortUtil
• 搜索 + 排序：先 filter 再 sort

如果你用的是 ArkTS / eTS / 声明式 UI / 元服务，或者想要下拉刷新排序 / 分组排序，可以告诉我具体场景，我给你写完整示例。