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

Question

在具有水平 LinearLayout 的 EpoxyRecyclerView 中，有一个“对齐中心”功能，其工作原理如下：如果我以良好的速度滚动列表，它会继续滚动，直到减慢速度并以项目位于中心的方式静止。如果我缓慢滚动并抬起手指，那么下一个项目就会跨越/移动到屏幕中心。您必须了解一件事，这不是寻呼机。寻呼机仅自动捕捉下一个项目。但我无法像自由滚动一样滚动...

您可以看这个 gif 作为示例

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

Answer 1

如果您使用 Compose 1.3，您可以检查

SnapFlingBehavior

此处

Answer 2

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

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

vallazyListState=rememberLazyListState()

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

Answer 3

从撰写开始

1.3.0

，您可以使用

FlingBehavior

将项目捕捉到给定位置：

val state = rememberLazyListState()

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

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
                }
            }
        }
    )

Answer 5

在这种情况下，我们可以使用惰性列表的“fling行为”

为了实现这一点，我们需要“rememberSnapFlingBehavior()”，这个函数可以在“foundation”库中找到

将此库添加到您的构建 gradle(Module :app) 或版本目录(libs.versions.toml) 文件中

implementation("androidx.compose.foundation:foundation:last-version")

然后：

将“flingBehavior”用于惰性列表（列/行...）

然后用 'remmeberSnapFlingBehavior()'

填充它

这个函数有两个参数：

第一个参数用于列表状态

第二个获取项目捕捉位置（在您的情况下为“SnapPosition.Center”）

代码示例：

val lazyListState = rememberLazyListState()

LazyRow(
        state = lazyListState,
        flingBehavior = rememberSnapFlingBehavior(lazyListState = lazyListState, snapPosition = SnapPosition.Center),
        modifier = Modifier
            .fillMaxWidth()
    ) {
        items(items = items, key = { item ->
            item.id
        }) { rowItem ->
            // your composable contents here
        }
    }