OpenHarmony列表组件如何分组

在 OpenHarmony（ArkUI） 中，“列表分组”通常有两种常见实现方式，取决于你使用的是 ArkTS 声明式开发（推荐） 还是 JS/FA 模型。

下面以 ArkTS（API 9+） 为主说明。

一、使用 List +ListItemGroup 实现分组（推荐）

OpenHarmony 原生支持 分组列表，通过 ListItemGroup 来实现。

示例：带分组标题的列表

@Entry
@Component
struct GroupListExample {
  build() {
    List() {
      ListItemGroup({ header: this.groupHeader('分组一') }) {
        ListItem() {
          Text('item 1-1')
        }
        ListItem() {
          Text('item 1-2')
        }
      }

      ListItemGroup({ header: this.groupHeader('分组二') }) {
        ListItem() {
          Text('item 2-1')
        }
        ListItem() {
          Text('item 2-2')
        }
      }
    }
    .width('100%')
    .height('100%')
  }

  @Builder
  groupHeader(title: string) {
    Text(title)
      .fontSize(20)
      .fontWeight(FontWeight.Bold)
      .padding(10)
      .backgroundColor('#f1f1f1')
      .width('100%')
  }
}

特点

• ListItemGroup 是原生分组容器
• header 可自定义（Builder）
• 支持吸顶（部分版本/设备）

二、数据驱动的分组列表（常见业务场景）

实际开发中，数据通常是结构化的：

interface Group {
  title: string
  items: string[]
}

示例

@Entry
@Component
struct DataGroupList {
  private groups: Group[] = [
    { title: '水果', items: ['苹果', '香蕉'] },
    { title: '蔬菜', items: ['西红柿', '黄瓜'] }
  ]

  build() {
    List() {
      ForEach(this.groups, (group: Group) => {
        ListItemGroup({ header: this.header(group.title) }) {
          ForEach(group.items, (item: string) => {
            ListItem() {
              Text(item)
                .padding(10)
            }
          })
        }
      })
    }
  }

  @Builder
  header(title: string) {
    Text(title)
      .fontSize(18)
      .fontWeight(FontWeight.Bold)
      .padding(10)
  }
}

三、不使用 ListItemGroup（逻辑分组）

如果你不想用 ListItemGroup，也可以：

• 在 ForEach 中手动插入“分组标题 Item”
• 通过 ListItem 的样式区分

但不推荐，因为：

• 无法实现原生分组行为
• 吸顶、复用支持差

四、常见注意点

✅ 推荐使用

• List
• ListItemGroup
• ForEach

⚠️ 注意

• ListItemGroup 必须放在 List 中
• header 不是必填，但建议加
• 数据量大时优先使用 LazyForEach

五、如果你用的是 JS / FA 模型

在 JS 中通常通过：

• list + section（部分版本）
• 或手动渲染“分组标题 + 子列表”

可以告诉我你使用的 OpenHarmony 版本 / API 等级 / 开发语言（ArkTS / JS），我可以给你更精准的示例。