如何为 Jetpack Compose 中的列表实现“对齐中心”功能？

Question

在带有 Horizontal LinearLayout 的 EpoxyRecyclerView 中，有一个 Snap to center 功能，它的工作原理是，如果我以良好的速度滚动列表，它会一直滚动，直到它变慢并停留在中心的项目。 如果我慢慢滚动并抬起手指，那么下一个项目就会跨越/移动到屏幕中央。 您必须了解的一件事是，这不是寻呼机。 寻呼机仅自动捕捉下一个项目。 但是我不能像自由滚动那样滚动...

你可以看到这个 gif 作为例子

所以，我正在寻找 Jetpack Compose 中的这种捕捉功能。 这可能吗？ 如果是，如何实现？

Answer 1

你也可以使用这个库https://github.com/chrisbanes/snapper

https://chrisbanes.github.io/snapper/

val lazyListState = rememberLazyListState()

LazyRow(
    state = lazyListState,
    flingBehavior = rememberSnapperFlingBehavior(lazyListState),
) {
    // content
}

Answer 2

如果您使用 Compose 1.3，您可以在此处检查SnapFlingBehavior

Answer 3

你可以试试这个库： https : //github.com/aakarshrestha/compose-pager-snap-helper代码如下（使用LazyRow列出项目）

ComposePagerSnapHelper(
        width = 320.dp, //required
        content = { listState -> //this param is provided by the method itself, add this param below.
            LazyRow(
                state = listState, //add listState param
            ) {
                items(count = count) { item ->
                    //Put your Items Composable here
                }
            }
        }
    )

Answer 4

试试这个库https://github.com/chrisbanes/snapper

伴奏寻呼机最近已更新，现在实现了相同的行为。

Answer 5

从 compose 1.3.0开始，您可以使用FlingBehavior将项目捕捉到给定位置：

val state = rememberLazyListState()

LazyRow(
    modifier = Modifier.fillMaxSize(),
    verticalAlignment = Alignment.CenterVertically,
    state = state,
    flingBehavior = rememberSnapFlingBehavior(lazyListState = state)
) {
  //item content
}