DEV Community

HarmonyOS
HarmonyOS

Posted on

How to Listen to the Header Sticky State of ListItemGroup

#harmonyos #listitemgroup #stickyheader #onareachangeevent

Read the original article：How to Listen to the Header Sticky State of ListItemGroup

Context

This section explains how to monitor the sticky state of a ListItemGroup’s Header in HarmonyOS development, addressing the need to detect when a list header becomes fixed at the top of the view.

Description

Is there an API that can return the current sticky state of the Header of ListItemGroup?

  • ListItemGroup: Used to display grouped list items. Its width defaults to filling the List component and must be used in conjunction with the List component.
  • onAreaChange: Triggered when the component area changes. Component area change events refer to events triggered when the displayed size, position, etc. of the component change.

Solution

  1. Sticky Property Setting: Enable the header sticky feature of the list through .sticky(StickyStyle.Header).

  2. Component Area Change Listening: In the custom Header component, use the onAreaChangeevent to listen for component position changes.

  3. Coordinate Judgment Logic: When oldValue.position.y === 0 && newValue.position.y === 0 in the event parameters, it indicates that the header is not sticky.

@Entry
@Component
struct StickyHeaderExample {
  private arr: number[] = [0, 1]

  @Builder
  CustomHeader() {
    Text('Group Title')
      .height(50)
      .width('100%')
      .backgroundColor(Color.Gray)
      .onAreaChange((oldValue: Area, newValue: Area) => {
        if (oldValue.position.y === 0 && newValue.position.y === 0) {
          console.info('Not ceiling-mounted')
        } else {
          console.info('Ceiling-mounted', oldValue.position.y)
        }
      })
  }

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Text('' + item)
              .width('100%')
              .height(50)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .borderRadius(10)
              .fontColor(Color.Black)
              .backgroundColor(0xFFFFFF)
          }
        }, (item: string) => item)
        ListItemGroup({
          header: this.CustomHeader,
          space: 10
        }) {
          ForEach(Array.from({ length: 20 }), (item: void, index: number) => {
            ListItem() {
              Text(`List item ${index}`)
                .height(80)
                .width('100%')
                .fontColor(Color.Black)
                .backgroundColor('#FFF')
            }
          })
        }
      }
      .sticky(StickyStyle.Header)
      .width('100%')
      .height('100%')
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

The running result is as follows:

10-07 19:39:50.978   28482-28482   A03d00/JSAPP                    com.exp...lication  I     Not ceiling-mounted
10-07 19:39:50.994   28482-28482   A03d00/JSAPP                    com.exp...lication  I     Ceiling-mounted 0
10-07 19:39:51.010   28482-28482   A03d00/JSAPP                    com.exp...lication  I     Ceiling-mounted 0.6119232177734375
10-07 19:39:51.270   28482-28482   A03d00/JSAPP                    com.exp...lication  I     Ceiling-mounted 6
10-07 19:39:51.285   28482-28482   A03d00/JSAPP                    com.exp...lication  I     Ceiling-mounted 11.039993286132813
10-07 19:39:51.300   28482-28482   A03d00/JSAPP                    com.exp...lication  I     Ceiling-mounted 16.710006713867188
Enter fullscreen mode Exit fullscreen mode

Code Running Effect Diagram:

img.gif

Constraints and Limitations

This example supports API Version 19 Release and above.

This example supports HarmonyOS 5.1. 1 Release SDK and above.

This example requires DevEco Studio 5.1.1 Release or above for compilation and execution.

Key Takeaways

  • The sticky state of ListItemGroupHeader can be monitored using the onAreaChange event
  • Thesticky(StickyStyle.Header) property is required to enable header sticky functionality
  • Header sticky state is determined by checking if position.y remains at 0 in the onAreaChangecallback

Reference Link

Written by Taskhyn Maksim

Top comments (0)