Hi there Quick question when `LazyColumn` has `stickyHeader` kotlinlang #compose

@Composable
    fun ScrollToItem(paddingValues: PaddingValues) {

        val listState = rememberLazyListState()
        val coroutineScope = rememberCoroutineScope()

        val items = (0..20).map { "Item $it" }

        Box(modifier = Modifier.padding(paddingValues)) {

            LazyColumn(modifier = Modifier.fillMaxSize(), state = listState) {

                stickyHeader {
                    Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End) {
                        Button(onClick = {
                            coroutineScope.launch {
                                listState.animateScrollToItem(11)
                            }
                        }) {
                            Text("Scroll to item 11")
                        }
                    }
                }


                items(items) {

                    Row(modifier = Modifier.fillMaxWidth().height(100.dp).background(Color.Yellow)) {

                        Text(text = "Lazy Column item ${it}")

                    }
                }

}}

efemoney

10/29/2023, 7:24 PM

LazyList works as expected.

stickyHeader

is an item just like every other item… the only difference is that its sticky 🙂

Sher Sanginov

10/29/2023, 7:26 PM

to achieve above behavior in recording with stickyHeader, do i have to calculate the visible height of item above and set some sort of offset to make sure my desired item goes to the very top? or is there an easier way to achieve this?

basically i want my item 11 be positioned right under the stickyHeader. dont want to see content of item 10

efemoney

10/29/2023, 7:48 PM

With the sticky header you have one more item in the lazy list so just offset your position by +1 eg

animateScrollToItem(12)

instead of 11

Sher Sanginov

10/29/2023, 7:57 PM

works. thank you

also had to set negative scrollOffset in

animateScrollToItem(12, -100)

make sure my item is fully visible; otherwise stickyHeader hides top of it

👍 1

3 Views