Compose 中如何实现 BottomSheet 嵌套滚动？

2024-07-22 13:45:40

Compose 中 BottomSheet 如何实现嵌套滚动？

在 Android 开发中，BottomSheet 是一个常用的 UI 组件，它可以从屏幕底部滑出，展示更多内容或提供操作选项。在使用 Jetpack Compose 构建 UI 时，开发者常常希望 BottomSheet 内部的内容可以滚动，并在滚动到顶部后，将滚动事件传递给外部的 BottomSheet，从而实现更自然的交互体验。

然而，仅仅将内容包裹在 Column 中并使用 verticalScroll 并不能完全满足需求。特别是在内容高度超过 BottomSheet 可见区域，且在不同屏幕尺寸的设备上，可能会导致滚动冲突，影响用户体验。

本文将深入探讨如何在 Compose 中实现 BottomSheet 的嵌套滚动，以解决滚动冲突，打造更流畅的用户体验。

滚动冲突：从何而来？

让我们先来分析一下，为什么简单的 verticalScroll 无法满足 BottomSheet 的嵌套滚动需求。

假设我们有一个 BottomSheet，其中包含一个列表，代码如下：

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MyBottomSheet(
    onClose: () -> Unit,
    onAcceptButton: () -> Unit,
    onRejectButton: () -> Unit
) {
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Expanded)
    )
    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetContent = {
            Surface {
                Column(
                    modifier = Modifier.weight(1f, false),
                ) { 
                    // 列表内容
                    Column(Modifier.verticalScroll(rememberScrollState())) {
                        for (i in 1..50) {
                            Text(text = "Item $i", modifier = Modifier.padding(16.dp))
                        }
                    }
                }
                // 底部操作按钮
                StickyBottom(onAcceptButton = onAcceptButton, onRejectButton = onRejectButton)
            }
        },
        // ... 其他 BottomSheetScaffold 参数 ...
    ) {
        // ... BottomSheetScaffold  内容...
    }
}

上述代码中，BottomSheet 的内容被放置在一个 Column 中，列表使用 verticalScroll(rememberScrollState()) 实现滚动。

这种方式在列表内容高度不超过 BottomSheet 可见区域时表现正常。然而，当列表内容高度超过 BottomSheet 可见区域时，问题就出现了：

在较小的设备上： 当用户向上滚动列表，滚动到顶部后继续滚动，会导致 BottomSheet 自身被拖动，而不是继续滚动列表内容。这是因为 verticalScroll 并没有处理滚动事件传递的机制，它仅仅是允许内容在垂直方向上滚动。
在较大的设备上： 由于 BottomSheet 的高度足够容纳列表内容，不会出现滚动冲突。

`nestedScroll`: 解决滚动冲突的关键

为了解决上述滚动冲突问题，Compose 提供了 nestedScroll Modifier。nestedScroll 允许我们在可滚动组件之间建立联系，实现嵌套滚动的效果。

让我们对之前的代码进行修改，引入 nestedScroll：

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MyBottomSheet(
    onClose: () -> Unit,
    onAcceptButton: () -> Unit,
    onRejectButton: () -> Unit
) {
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Expanded)
    )
    val scrollState = rememberScrollState()
    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetContent = {
            Surface {
                Column(
                    modifier = Modifier
                        .nestedScroll(rememberNestedScrollConnection()) // 注意这里
                        .weight(1f, false),
                ) { 
                    // 列表内容
                    Column(Modifier.verticalScroll(scrollState)) {
                        for (i in 1..50) {
                            Text(text = "Item $i", modifier = Modifier.padding(16.dp))
                        }
                    }
                }
                // 底部操作按钮
                StickyBottom(onAcceptButton = onAcceptButton, onRejectButton = onRejectButton)
            }
        },
        // ... 其他 BottomSheetScaffold 参数 ...
    ) {
        // ... BottomSheetScaffold  内容...
    }
}

代码解析：

引入 nestedScroll: 我们在 Column 的 Modifier 中添加了 nestedScroll(rememberNestedScrollConnection())。这将使 Column 参与到嵌套滚动系统中。
rememberNestedScrollConnection: 该函数创建一个 NestedScrollConnection，用于处理 Column 与其父级可滚动组件（这里是 BottomSheet）之间的滚动事件传递。

`nestedScroll` 工作原理

使用 nestedScroll 后，当用户在 Column 上进行滚动操作时，NestedScrollConnection 会将滚动事件传递给 BottomSheet。

如果 Column 尚未滚动到顶部 ，NestedScrollConnection 会消费滚动事件 ，使列表内容滚动。
如果 Column 已经滚动到顶部 ，NestedScrollConnection 会将滚动事件传递给 BottomSheet ，BottomSheet 就会接管滚动事件，自身向上滑动或跟随滑动。

通过这种方式，nestedScroll 巧妙地解决了 BottomSheet 和其内部可滚动内容之间的滚动冲突，实现了更符合预期的嵌套滚动效果。