HarmonyOS鸿蒙Next中List组件的sticky吸顶特性,在不使用ListItemGroup时能用吗?

HarmonyOS鸿蒙Next中List组件的sticky吸顶特性,在不使用ListItemGroup时能用吗? 是否必须结合ListItemGroup才会生效?

4 回复

List的sticky属性仅对ListItemGroup的header/footer生效。未使用ListItemGroup时,即使设置sticky属性也无吸顶效果。

参考demo

@Entry
@Component
struct Index {
  dataArray: string[] =
    ["1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1", "1"]

  build() {
    Column() {


      // List组件结构
      List({ space: 10 }) {
        ListItemGroup({ header: this.HeaderBuilder() }) {
          ForEach(this.dataArray, (item: string) => {
            ListItem() {
              Text(item).height(50)
            }
          })
        }
      }
      .sticky(StickyStyle.Header) // 关键:启用header吸顶
    }
    //.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM]) // 安全区设置到父容器
    .backgroundColor('blue')
    .height('100%')
    .width('100%')
  }

  // 定义吸顶Header组件
  @Builder
  HeaderBuilder() {
    Text('吸顶标题')
      .width('100%')
      .backgroundColor(Color.White)
  }
}

更多关于HarmonyOS鸿蒙Next中List组件的sticky吸顶特性,在不使用ListItemGroup时能用吗?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在API version 9之前,可以直接设置ListItem的sticky属性。

从API version 9开始,List组件推荐配合ListItemGroup组件使用stick属性,设置ListItemGroup中header是否要吸顶或footer是否要吸底。

在HarmonyOS鸿蒙Next中,List组件的sticky吸顶特性可以在不使用ListItemGroup时使用。该特性通过sticky属性控制,支持Header和Footer的吸顶效果。开发者只需在List组件中设置sticky属性为true即可实现滚动时的吸顶功能。此特性基于ArkTS/ArkUI实现,不依赖ListItemGroup。

在HarmonyOS Next中,List组件的sticky吸顶特性并不依赖ListItemGroup。即使不结合ListItemGroup,sticky功能也能正常生效。该特性通过设置ListItem的sticky属性(如sticky: Sticky.Header)实现,适用于任何ListItem,无论是否分组。只需确保List容器高度足够滚动,且sticky项位于列表靠前位置即可生效。

回到顶部