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

Question

在使用水平LinearLayout的EpoxyRecyclerView中，有一个居中自动吸附的功能。如果我以较快的速度滚动列表，它将持续滚动直到减速并停留在中心位置。如果我缓慢滚动并抬起手指，则下一个项目会跨度/移动到屏幕中心。需要注意的一点是这不是Pager。Pager只会自动吸附下一个项目。但是我不能像自由滚动一样滚动...

您可以查看此gif作为示例

因此，我正在寻找Jetpack Compose中的此类吸附功能。是否已经可能？如果是，请问如何实现？

- Syed Zeeshan

---

HorizontalViewPager。 - Jay

@Jay，你提供的库是普通的viewpager，很明显这不是我想要的...我还需要列表可以自由滚动多个项目。 - Syed Zeeshan

你找到解决方案了吗？ - Mohdroid

Answer 1

你也可以使用这个库：https://github.com/chrisbanes/snapper https://chrisbanes.github.io/snapper/ val lazyListState = rememberLazyListState()

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

- Sepideh Vatankhah

---

这在桌面上无法滚动。 - John Glen

Answer 2

如果你使用Compose 1.3版本，你可以在这里查看SnapFlingBehavior。链接地址。

- AouledIssa

Answer 3

从compose 1.3.0 开始，您可以使用FlingBehavior，将项目自动对齐到给定位置：

val state = rememberLazyListState()

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

- Gabriele Mariotti

Answer 4

你可以尝试使用这个库：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
                }
            }
        }
    )

- Rivu Chakraborty