如何在 Jetpack Compose 中实现单项惰性行的平滑滚动？

Question

我的 Jetpack Compose 项目中有一个 LazyRow，它一次仅显示一个完全可见的项目，而上一个和下一个项目部分可见。目前，当用户滚动时，它会在项目之间快速跳转。但是，我希望滚动行为更加平滑，滚动一次捕捉到每个项目。我怎样才能实现这个目标？我知道 HorizontalPager 是可能的，但我想用 LazyRow 来回答

Answer 1

您可以使用 BoxWithConstraints 获取 maxWidth 并决定要在屏幕上显示的项目宽度

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun LazyRowLikePager() {

    BoxWithConstraints {
        val boxWithConstraintsScope = this
        val itemWidth = boxWithConstraintsScope.maxWidth * 0.8f // 80% of screen width
        val state = rememberLazyListState()
        LazyRow(
            horizontalArrangement = Arrangement.spacedBy(16.dp),
            modifier = Modifier.fillMaxSize(),
            verticalAlignment = Alignment.CenterVertically,
            contentPadding = PaddingValues(16.dp),
            state = state,
            flingBehavior = rememberSnapFlingBehavior(lazyListState = state)
        ) {
            items(200) { index ->
                Box(
                    modifier =
                    Modifier
                        .width(itemWidth)
                        .height(400.dp)
                        .background(Color.Gray)

                ) {
                    Text(
                        text = index.toString(),
                        fontSize = 32.sp,
                        modifier = Modifier.fillMaxSize(),
                        textAlign = TextAlign.Center
                    )
                }
            }
        }
    }
}

屏幕截图