鸿蒙Next中如何实现listitem置顶

在鸿蒙Next开发中，如何实现List组件的某个item置顶功能？目前使用ListContainer展示数据时，需要将特定条件的条目固定在列表顶部（如最新消息或重要通知），但直接调整数据源顺序会导致滚动时位置错乱。请问是否有内置方法或推荐方案实现置顶效果？最好能保持原有滚动流畅性且不影响其他item的交互。

2 回复

在鸿蒙Next中，让ListItem置顶？简单！用ListContainer的scrollTo方法，把目标项索引设为0，嗖一下就飞上去了！记得加个动画，优雅得像德芙一样丝滑~

更多关于鸿蒙Next中如何实现listitem置顶的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，可以通过修改List组件的sticky属性或使用ListItemGroup的stickyHeader功能实现置顶效果。以下是具体实现方法：

方法一：使用sticky属性（推荐）

// 在List组件中设置sticky属性
@Entry
@Component
struct StickyListExample {
  private arr: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

  build() {
    List({ space: 20 }) {
      ForEach(this.arr, (item: number) => {
        ListItem() {
          Text(`Item ${item}`)
            .fontSize(20)
            .textAlign(TextAlign.Center)
            .backgroundColor(Color.Orange)
            .width('100%')
            .height(50)
        }
        // 设置第一个item为置顶
        .sticky(item === 1 ? Sticky.Header : Sticky.None)
      }, (item: number) => item.toString())
    }
    .width('100%')
    .height('100%')
  }
}

方法二：使用ListItemGroup的stickyHeader

@Entry
@Component
struct GroupStickyExample {
  build() {
    List() {
      ListItemGroup({ header: this.GroupHeader('置顶项') }) {
        ListItem() {
          Text('置顶内容1')
            .width('100%')
            .height(60)
            .backgroundColor(Color.Blue)
            .textAlign(TextAlign.Center)
        }
        
        ListItem() {
          Text('置顶内容2')
            .width('100%')
            .height(60)
            .backgroundColor(Color.Green)
            .textAlign(TextAlign.Center)
        }
      }
      .stickyHeader(true) // 启用置顶

      // 其他普通列表项
      ForEach([1, 2, 3, 4, 5], (item: number) => {
        ListItem() {
          Text(`普通项 ${item}`)
            .width('100%')
            .height(50)
        }
      })
    }
  }

  @Builder GroupHeader(title: string) {
    Text(title)
      .width('100%')
      .height(50)
      .backgroundColor(Color.Gray)
      .textAlign(TextAlign.Center)
  }
}

关键参数说明：

  • sticky: Sticky.Header - 设置为Header类型置顶
  • stickyHeader(true) - 启用分组头部置顶
  • 置顶项在滚动时会保持在列表顶部

选择方法一适用于单个列表项置顶，方法二适用于分组置顶场景。

回到顶部