输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心
全部文档版本说明工具设计指南与API参考开发与测试上架分发与运营问题处理与运维最佳实践行业解决方案
问题处理与运维
您当前正在浏览新版开发者文档中心，目录分类和层级有所调整。点击左侧当前文档分类名称前的“☰”图标，可切换文档分类。 了解新版目录
问题处理与运维开发与测试问题应用框架开发UI框架组件使用如何监听ListItemGroup的Header吸顶状态

如何监听ListItemGroup的Header吸顶状态

更新时间: 2026-06-26 07:47
复制页面
本文导读

问题现象

是否有API能够返回当前ListItemGroup的Header吸顶的状态？

背景知识

  • ListItemGroup：用来展示列表item分组，宽度默认充满List组件，必须配合List组件来使用。
  • onAreaChange：组件区域变化时触发该回调。组件区域变化事件指组件显示的尺寸、位置等发生变化时触发的事件。

解决方案

原理说明：

  1. sticky属性设置：通过.sticky(StickyStyle.Header)启用列表的头部吸顶特性。
  2. 组件区域变化监听：在自定义Header组件中，使用onAreaChange事件监听组件位置变化。
  3. 坐标判断逻辑：通过判断事件参数中的oldValue.position.y === 0 && newValue.position.y === 0时表示未吸顶。
收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct StickyHeaderExample {
  4.   private arr: number[] = [0, 1];
  5. 

  6.   @Builder
  7.   CustomHeader() {
  8.     Text('分组标题')
  9.       .height(50)
  10.       .width('100%')
  11.       .backgroundColor(Color.Gray)
  12.       .onAreaChange((oldValue: Area, newValue: Area) => {
  13.         if (oldValue.position.y === 0 && newValue.position.y === 0) {
  14.           console.info('没吸顶');
  15.         } else {
  16.           console.info(`吸顶了 ${oldValue.position.y}`);
  17.         }
  18.       });
  19.   }
  20. 

  21.   build() {
  22.     Column() {
  23.       List({ space: 10 }) {
  24.         ForEach(this.arr, (item: number) => {
  25.           ListItem() {
  26.             Text(item.toString())
  27.               .width('100%')
  28.               .height(50)
  29.               .fontSize(16)
  30.               .textAlign(TextAlign.Center)
  31.               .borderRadius(10)
  32.               .backgroundColor(0xFFFFFF);
  33.           };
  34.         }, (item: string) => item);
  35.         ListItemGroup({
  36.           header: this.CustomHeader,
  37.           space: 10
  38.         }) {
  39.           ForEach(Array.from({ length: 20 }), (item: void, index: number) => {
  40.             ListItem() {
  41.               Text(`列表项 ${index}`)
  42.                 .height(80)
  43.                 .width('100%')
  44.                 .backgroundColor('#FFF');
  45.             };
  46.           });
  47.         };
  48.       }
  49.       .sticky(StickyStyle.Header)
  50.       .width('100%')
  51.       .height('100%');
  52.     };
  53.   }
  54. }
如何实现滑块移动并跟随滑块进度显示不同的内容UI
分栏模式下，页面切换无响应
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明