向下滑动 Jetpack Compose ModalBottomSheet 跳过 HalfExpanded 状态答案

【问题标题】：On swipe down Jetpack Compose ModalBottomSheet skip HalfExpanded state向下滑动 Jetpack Compose ModalBottomSheet 跳过 HalfExpanded 状态
【发布时间】：2022-07-07 06:53:57
【问题描述】：

我使用 Jetpack Compose ModalBottomSheetLayout 来全屏显示 BottomSheet。当用户将此底部表滑动到底部以将其关闭时，它会停留在 HalfExpanded 状态。然后用户需要再次滑动才能完全关闭它。如何跳过此 HalfExpand 并在第一次滑动时隐藏 BottomSheet。

【问题讨论】：

标签： android-jetpack-compose bottom-sheet

【解决方案1】：

您可以在rememberModalBottomSheetState函数中使用confirmStateChange参数。

val modalBottomSheetState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
    confirmStateChange = {
        it != ModalBottomSheetValue.HalfExpanded
    }
)
ModalBottomSheetLayout(
    sheetState = modalBottomSheetState,
    sheetContent = {
        ...
    }
) {
   ...
}

【讨论】：

试过了，这个有问题，如果你刷的很少，它会向下滑动直到你的手指接触到屏幕，一旦你移除你的触摸，它就会捕捉到展开状态。

【解决方案2】：

这会向下滑动到半状态并动画到隐藏状态。这可行，但 UI 有点乱。

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun ModalBottomSheetSingleSwipe() {
    val coroutineScope: CoroutineScope = rememberCoroutineScope()
    val modalBottomSheetState: ModalBottomSheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Hidden,
    )

    LaunchedEffect(
        key1 = modalBottomSheetState.currentValue,
    ) {
        if (modalBottomSheetState.targetValue == ModalBottomSheetValue.HalfExpanded) {
            coroutineScope.launch {
                modalBottomSheetState.animateTo(ModalBottomSheetValue.Hidden)
            }
        }
    }
    ModalBottomSheetLayout(
        sheetState = modalBottomSheetState,
        sheetContent = {
            Text(
                text = "Bottom Sheet Content",
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(all = 16.dp)
                    .background(LightGray)
                    .wrapContentHeight()
                    .height(200.dp),
            )
        },
    ) {
        Box(
            contentAlignment = Alignment.Center,
        ) {
            TextButton(
                onClick = {
                    coroutineScope.launch {
                        modalBottomSheetState.animateTo(ModalBottomSheetValue.Expanded)
                    }
                },
            ) {
                Text(text = "Open Bottom Sheet")
            }
        }
    }
}

注意：
我们必须使用modalBottomSheetState.animateTo(ModalBottomSheetValue.Expanded) 而不是modalBottomSheetState.show()

【讨论】：

稍微滑动一下就解决了问题吗？
@AquaFreshka 这在功能上有效。但是动画很笨拙。
当我轻轻滑动时，它会回到展开状态，我必须滑动超过半屏才能使模式消失。你说你的评论有同样的问题？
@AquaFreshka 检查更新的图像，我不必滚动超过一半的屏幕即可使用此解决方案。我只需要滑动很小的距离。（这是将其检测为滑动而不是触摸所必需的）
@AquaFreshka 是的，正是我在第一行中提到的。对更好的解决方案持开放态度，但这是我目前能找到的最接近的解决方案。

【解决方案3】：

Compose 1.2-rc03 有解决该问题的方法。

val sheetState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
    skipHalfExpanded = true
)

您可以使用“skipHalfExpanded”属性将其完全展开。

【讨论】：