how to scroll to the center of a LazyRow item?

659 Views Asked by At

The LazyRow LazyListState has the method animateScrollToItem which scrolls to the end of a list item

I want to scroll to the center of the listItem.

I can do that by passing a scrollOffset to the animateScrollToItem, something like listItem.width / 2 , but I was not able to figure out the width of the listItem I want to scroll.

The LazyListState provides the val visibleItemsInfo: List<LazyListItemInfo> list and I can do something like this

suspend fun LazyListState.animateScrollEndCenter(index: Int) {
    val itemInfo = this.layoutInfo.visibleItemsInfo.firstOrNull { it.index == index }
    if (itemInfo != null) {
        val center = [email protected] / 2
        val itemCenter = itemInfo.offset + itemInfo.size / 2
        [email protected]((itemCenter - center).toFloat())
    } else {
        [email protected](index)
    }
}

but visibleItemsInfo is nullable, so it does not have information about the listItem.width, until the listItem is presented on the screen

In the following example, I'm scrolling to the listItem 11

When is on the screen

https://i.stack.imgur.com/k0fk2.gif

When is out of the screen

https://i.stack.imgur.com/P554i.gif

I want to scroll to the center of the LazyRow listItem

0

There are 0 best solutions below