OpenHarmony列表组件怎么吸顶

在 OpenHarmony（ArkUI） 中，实现**列表吸顶（Sticky Header）**通常有以下几种方式，取决于你使用的是 List 组件 还是 Scroll 容器。

一、List 组件原生吸顶（推荐）

✅ 使用 List + ListItemGroup

OpenHarmony 的 List 原生支持分组吸顶。

示例代码

List() {
  ListItemGroup({ header: this.Header('分组1') }) {
    ListItem() { Text(' item 1') }
    ListItem() { Text(' item 2') }
  }

  ListItemGroup({ header: this.Header('分组2') }) {
    ListItem() { Text(' item 3') }
    ListItem() { Text(' item 4') }
  }
}
.width('100%')
.height('100%')

Header 示例

@Builder
Header(title: string) {
  Text(title)
    .fontSize(18)
    .fontWeight(FontWeight.Bold)
    .backgroundColor('#f1f1f1')
    .width('100%')
    .height(50)
}

✅ 效果：
滚动时，当前分组的 Header 会吸顶，直到下一个分组顶上来。

二、单个组件吸顶（Scroll + sticky）

如果你用的是 Scroll 而不是 List，可以手动实现吸顶。

方式：监听滚动偏移

@State offsetY: number = 0

Scroll() {
  Column() {
    Text('吸顶标题')
      .position({ y: this.offsetY })
      .backgroundColor('#fff')
      .width('100%')

    ForEach([1,2,3,4,5], (item) => {
      Text('内容 ' + item)
        .height(100)
    })
  }
}
.onScroll((x, y) => {
  this.offsetY = Math.max(0, y)
})

⚠️ 这种方式不够优雅，适合简单场景。

三、Tabs + List 实现吸顶（常见业务）

如果是 顶部 Tab 吸顶 + 列表滚动：

Column() {
  Tabs() {
    TabContent() {
      List() { ... }
    }
  }
  .barPosition(BarPosition.Start)
}

Tabs 默认吸顶，适合新闻、商城类页面。

四、注意事项（坑点）

1. 只有 ListItemGroup 的 header 才能吸顶
2. 普通 ListItem 不能吸顶
3. API 版本要求：
   • OpenHarmony 3.2+
   • ArkUI eTS 支持完整

五、总结

如果你能告诉我：

• OpenHarmony 版本
• 是 List 还是 Scroll
• 吸顶的是分组头还是搜索框

我可以给你更精确的代码。