android - 处理 jetpack compose 中 modalBottomsheet 内容中的单击事件

Question

我有一个 ModalBottomSheet，我想在单击 Bottom Sheet 透明背景后更改 bool 值。我如何访问此 View 点击监听器？

我不想使用 BottomSheetScaffold。

fun ScheduleJobFromQueuedBottomSheet(
    viewModel: ProductViewModel,
    onClickCancel: () -> Unit,
    onQueuedScheduleRequestResultIsBack: () -> Unit,
) {
**var state by remember { mutableStateOf(false) }**

val bottomSheetState: ModalBottomSheetState =
        rememberModalBottomSheetState(ModalBottomSheetValue.Expanded, confirmStateChange = {
            it != ModalBottomSheetValue.HalfExpanded
        }, animationSpec = TweenSpec(durationMillis = 300, delay = 10))


    ModalBottomSheetLayout(
        sheetState = bottomSheetState,
        sheetShape = RoundedCornerShape(topStart = custom, topEnd = custom),
        scrimColor = ModalBottomSheetDefaults.scrimColor.copy(alpha = 0.40f),
        sheetContent = {
            ReviewBookingScheduledBottomSheet(modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight(),
                viewModel = viewModel,
                onClickCancel = {
                    onClickCancel.invoke()
                }, onScheduledRequestResultIsBack = {
                    onQueuedScheduleRequestResultIsBack.invoke()
                })
        }
    ) {

    }
}

我想通过单击 Bottom Sheet 背景(不是 Bottom Sheet 内容)来更改状态值

Answer 1

在 Compose 中，可观察性优于回调，因此没有可用的显式监听器。

我们可以通过观察隐藏时的bottomSheetState状态变化来观察透明背景点击:

fun ScheduleJobFromQueuedBottomSheet(
    viewModel: ProductViewModel,
    onClickCancel: () -> Unit,
    onQueuedScheduleRequestResultIsBack: () -> Unit,
) {
var state by remember { mutableStateOf(false) }

val bottomSheetState: ModalBottomSheetState =
        rememberModalBottomSheetState(ModalBottomSheetValue.Expanded, confirmStateChange = {
            it != ModalBottomSheetValue.HalfExpanded
        }, animationSpec = TweenSpec(durationMillis = 300, delay = 10))

LaunchedEffect(bottomSheetState) {
    snapshotFlow { bottomSheetState.currentValue }
        .filter { it == Hidden }
        .collect { state = true }
}


    ModalBottomSheetLayout(
        sheetState = bottomSheetState,
        sheetShape = RoundedCornerShape(topStart = custom, topEnd = custom),
        scrimColor = ModalBottomSheetDefaults.scrimColor.copy(alpha = 0.40f),
        sheetContent = {
            ReviewBookingScheduledBottomSheet(modifier = Modifier
                .fillMaxWidth()
                .wrapContentHeight(),
                viewModel = viewModel,
                onClickCancel = {
                    onClickCancel.invoke()
                }, onScheduledRequestResultIsBack = {
                    onQueuedScheduleRequestResultIsBack.invoke()
                })
        }
    ) {

    }
}

不幸的是，这无法区分 bottomSheetState 更改是由于点击透明背景还是由于状态的其他更改。如果您有一个用例需要仅观察透明背景点击而不是其他关闭操作，请在此处留下评论:https://buganizer.corp.google.com/issues/256755735