使用 LazyRow 或 Column 时如何使项目出现在屏幕中央 Jetpack Compose？

Question

I have been trying to make it so that the first item on a LazyRow is centered in the middle of the screen as soon as the app is opened. The snapping behavior works once it is scrolled, but when the app is initially opened, the first item is not centered on the page.

LazyRow with snapper and infinite scrolling

@OptIn(ExperimentalSnapperApi::class)
@Composable
fun CircularList(
    data: List<SingleBox>,
    modifier: Modifier = Modifier,
    isEndless: Boolean = true
) {
    val listState = rememberLazyListState(
        if (isEndless) Int.MAX_VALUE / 2 else 0
    )

val configuration = LocalConfiguration.current

val screenWidth = configuration.screenWidthDp.dp
val contentPadding = PaddingValues(horizontal = screenWidth / 2) //This moves starting point of item horizontally
BoxWithConstraints {
    LazyRow(
        state = listState,
        modifier = modifier,
        contentPadding = contentPadding,
        flingBehavior = rememberSnapperFlingBehavior(listState, SnapOffsets.Center, snapIndex = { _, startIndex, targetIndex ->
            targetIndex.coerceIn(startIndex - 7, startIndex + 7) //This snaps item to center of page when LazyRow stops moving
        })

    )
    {
        items(
            count = if (isEndless) Int.MAX_VALUE else data.size, //This makes it scroll infinitly
            itemContent = {
                val index = it % data.size
                CustomItem(data[index])    // item composable
            },

        )
    }

}

}

How it looks when opened

How it should look when app is opened

Answer 1

我认为这里最好的选择是Accompanist Pager Library 。