在 Jetpack Compose 中禁用 BottomSheet 外部触摸

Question

我在 Jetpack Compose 中使用了 BottomSheet 视图，但我想用 bottomSheet 锁定屏幕，直到我们单击 bottomSheet 的按钮并禁用 bottomSheet 中的外部触摸。我该怎么做？

我的底页：


@ExperimentalMaterialApi
@Composable
fun BottomSheet(
    modifier: Modifier = Modifier,
    composable: @Composable () -> Unit,
    scope: CoroutineScope
) {
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Expanded)
    )
    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetContent = {
            Column(
                Modifier
                    .fillMaxWidth()
                    .height(200.dp)
                    .padding(8.dp),
                verticalArrangement = Arrangement.Center,
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Button(colors = ButtonDefaults.buttonColors(
                    backgroundColor = AppColor.brandColor.BLUE_DE_FRANCE,
                    contentColor = AppColor.neutralColor.DOCTOR
                ),
                    shape = RoundedCornerShape(
                        small
                    ),
                    onClick = {
                        scope.launch {
                            bottomSheetScaffoldState.bottomSheetState.collapse()
                        }
                    }) {  
                }
            }
        },
        sheetPeekHeight = 0.dp,
        sheetShape = RoundedCornerShape(topEnd = medium, topStart = medium)
    ) {
        composable()
    }

}

可组合函数是google地图屏幕

Answer 1

您可以使用 sheetGesturesEnabled = false 属性或 BottomSheetScaffold 来禁用手势。如果您使用 var sheetGesturesEnabled by remember {mutableStateOf(true)} 设置它，您可以根据需要切换它。

var sheetGesturesEnabled by remember {mutableStateOf(true)}
BottomSheetScaffold(
    scaffoldState = bottomSheetScaffoldState,
    sheetGesturesEnabled = sheetGesturesEnabled,
    sheetContent = {
    },
    drawerContent= {
    }
)

Answer 2

你可以使用 sheetGesturesEnabled: Boolean = true/false 属性，如果你想改变底部 sheet 可取消或不可从外部取消。

 BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetGesturesEnabled = false,
        sheetContent = {
           ...
        },
        sheetPeekHeight = 0.dp,
        sheetShape = RoundedCornerShape(topEnd = medium, topStart = medium)
    ) {
        composable()
    }

要获得正确的文档，请使用此 link：BottomSheetScaffold

在 Jetpack Compose 中禁用 BottomSheet 外部触摸

Disable BottomSheet outside touch in the jetpack compose

android

android-jetpack-compose

android-jetpack

bottom-sheet