Jetpack Compose如何在外部点击时折叠底部面板

Question

我目前通过BottomSheetScaffold显示底部工作表，并希望在用户单击底部工作表外部时将其折叠。是否有一种方法来检测底部工作表之外的点击？

这是我的BottomSheetScaffold屏幕：

@ExperimentalMaterialApi
@ExperimentalMaterial3Api
@Composable
fun HomeScreen() {
    val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
        bottomSheetState = BottomSheetState(BottomSheetValue.Collapsed)
    )
    val coroutineScope = rememberCoroutineScope()

    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        sheetContent = {
            Box(
                Modifier
                    .fillMaxWidth()
                    .fillMaxHeight(0.9f)
            ) {
                Text("Hello from Sheet")
            }
        },
        sheetShape = RoundedCornerShape(
            topStart = Spacing.l,
            topEnd = Spacing.l
        ),
        sheetPeekHeight = LocalConfiguration.current.screenHeightDp.dp * 0.15f,
        sheetBackgroundColor = MaterialTheme.colorScheme.surface,
    ) {
        Scaffold() {
            Button(
                onClick = {
                    coroutineScope.launch {
                        if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
                            bottomSheetScaffoldState.bottomSheetState.expand()
                        } else {
                            bottomSheetScaffoldState.bottomSheetState.collapse()
                        }
                    }
                },
            ) {
                Text("Toggle Sheet")
            }
        }

    }
}

这是一个区域的可视化图，用于检测当底部工作表被展开时的点击。

- JonasLevin

Answer 1

您可以将pointerInput修饰符与detectTapGestures一起添加到您的Scaffold中：

   Scaffold( modifier =
        Modifier.pointerInput(Unit) {
            detectTapGestures(onTap = {
                coroutineScope.launch {
                    if (bottomSheetScaffoldState.bottomSheetState.isCollapsed) {
                        bottomSheetScaffoldState.bottomSheetState.expand()
                    } else {
                        bottomSheetScaffoldState.bottomSheetState.collapse()
                    }
                }
            })
    }){
       //.....
    }

- Gabriele Mariotti

---

M3: isCollapsed = isVisible and collapse() = hide() - undefined

Answer 2

我使用BottomSheetScaffold时遇到同样的问题，后来我改用默认已有此行为的ModalBottomSheetLayout。

希望这能帮助到遇到同样问题的人。

- Diego Alarcon

Answer 3

我根据第三版的资料最新版本修改了答案。

val scope = rememberCoroutineScope()
val scaffoldState = rememberBottomSheetScaffoldState(bottomSheetState = rememberStandardBottomSheetState(skipHiddenState = false))

BottomSheetScaffold(
    scaffoldState = scaffoldState,
    sheetContent = {},
    modifier =
    Modifier.pointerInput(Unit) {
        detectTapGestures(onTap = {
            scope.launch {
                if (scaffoldState.bottomSheetState.isVisible) {
                    scaffoldState.bottomSheetState.hide()
                }
            }
        })
    }
)  

- CmoiJulien

Answer 4

尝试使用 ModalBottomSheetLayout。 访问此链接如何实现 modalbottomsheet。

- Alok Singh