Revision history [back]

To update a sticky header in LazyColumn while scrolling, you can use the LazyColumn's onScroll callback. The onScroll callback provides information about the scroll position, including the offset in pixels and the first visible item position.

You can use this information to determine when the sticky header should be updated. For example, you can set a threshold value such that if the offset is greater than the threshold, you update the sticky header with the appropriate text or content.

Here's an example of how you can update the sticky header in a LazyColumn:

val items = listOf("Item 1", "Item 2", "Item 3", "Item 4")

var stickyHeader: String? = null

LazyColumn(
    modifier = Modifier.fillMaxSize(),
    contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    state = lazyListState,
    onScroll = { scrollState ->
        val firstVisibleItem = lazyListState.firstVisibleItemIndex
        if (firstVisibleItem == 0 && scrollState.firstVisibleItemScrollOffset > 0) {
            stickyHeader = items[firstVisibleItem]
        } else {
            stickyHeader = null
        }
    }
) {
    items(items) { item ->
        Text(item)
    }
    if (stickyHeader != null) {
        val modifier = Modifier
            .fillMaxWidth()
            .background(Color.White)
            .padding(vertical = 8.dp)
            .stickyHeader {
                Text(
                    text = stickyHeader!!,
                    fontWeight = FontWeight.Bold,
                    fontSize = 16.sp,
                )
            }
        Spacer(modifier = modifier)
    }
}

In this example, we set the onScroll callback to update the stickyHeader variable whenever the first visible item changes. If the first visible item is the first item (index 0) and the offset is greater than 0, we update the stickyHeader variable with the appropriate text. Otherwise, we set it to null.

We then use this stickyHeader variable to conditionally render a Spacer with a stickyHeader modifier. The stickyHeader modifier sets the background color, padding, and content of the sticky header. We pass in the Text component with the stickyHeader!! text to render the updated header text.

Note that in this example, we've hard-coded the items array for simplicity, but in practice, you would likely want to pass in a dynamic list of items.