Hi there Quick question. when `LazyColumn` has `st...
# compose
s
Hi there Quick question. when
LazyColumn
has
stickyHeader
and we call
animateScrollToItem
to scroll to given item, the given item doesn't become the first visible item in the screen (See recording). But without
stickyHeader
, it works as expected and my item becomes
firstVisibleItem
Is this expected or a bug?
without stickyHeader, works as expected. Note: i am just using box to overlap button instead of stickyHeader
My code:
Copy code
@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}")

                    }
                }

}}
e
LazyList works as expected.
stickyHeader
is an item just like every other item… the only difference is that its sticky 🙂
s
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
e
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
s
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
202 Views