Jetpack Compose中ModalBottomSheetLayout动画时返回键处理问题

这个问题的核心是bottomSheetState.isVisible仅在弹窗动画完全结束后才会更新，调用show()后动画过程中这个值仍为false，导致常规的返回拦截逻辑失效。可以通过以下方式解决：

解决方案：基于targetValue和isVisible组合拦截返回事件 #

ModalBottomSheetState的targetValue会在调用show()/hide()后立即更新为目标状态（比如Expanded/Hidden），不受动画进度影响。我们可以结合targetValue和isVisible判断弹窗是否处于「显示中」或「正在显示/关闭动画」状态，从而正确拦截返回键。

步骤1：正确初始化SheetState

如果不需要半展开状态，建议设置skipPartiallyExpanded = true，简化状态判断：

val bottomSheetState = rememberModalBottomSheetState(
    initialValue = ModalBottomSheetValue.Hidden,
    skipPartiallyExpanded = true
)

步骤2：用BackHandler拦截返回事件

通过BackHandler的enabled参数设置拦截条件，当弹窗处于显示状态或动画过程中时，拦截返回键并关闭弹窗：

val scope = rememberCoroutineScope()

BackHandler(
    enabled = bottomSheetState.targetValue != ModalBottomSheetValue.Hidden || bottomSheetState.isVisible
) {
    scope.launch {
        bottomSheetState.hide()
    }
}

这个条件覆盖了三种场景：

• 弹窗已完全显示（isVisible = true）
• 弹窗正在滑入动画中（targetValue = Expanded，isVisible = false）
• 弹窗正在滑出动画中（isVisible = true，targetValue = Hidden）

完整示例代码

@Composable
fun FixedBottomSheetDemo() {
    val scope = rememberCoroutineScope()
    val bottomSheetState = rememberModalBottomSheetState(
        initialValue = ModalBottomSheetValue.Hidden,
        skipPartiallyExpanded = true
    )

    // 拦截返回键，优先关闭弹窗
    BackHandler(
        enabled = bottomSheetState.targetValue != ModalBottomSheetValue.Hidden || bottomSheetState.isVisible
    ) {
        scope.launch {
            bottomSheetState.hide()
        }
    }

    ModalBottomSheetLayout(
        modifier = Modifier.fillMaxSize(),
        sheetState = bottomSheetState,
        sheetContent = {
            Column(modifier = Modifier.padding(16.dp)) {
                Text("Bottom Sheet Content")
                Button(onClick = {
                    scope.launch { bottomSheetState.hide() }
                }) {
                    Text("Close")
                }
            }
        }
    ) {
        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {
            Button(onClick = {
                scope.launch { bottomSheetState.show() }
            }) {
                Text("Show Bottom Sheet")
            }
        }
    }
}

补充说明 #

如果需要支持半展开状态，只需修改判断条件，将半展开状态纳入拦截范围：

enabled = bottomSheetState.targetValue !in setOf(ModalBottomSheetValue.Hidden) || bottomSheetState.isVisible

内容的提问来源于stack exchange，提问作者Jeff Liu