Jetpack Compose ModalBottomSheet默认显示且无法隐藏问题求助

问题描述 #

使用Jetpack Compose时，ModalBottomSheet本应默认隐藏（rememberModalBottomSheetState初始值为SheetValue.Hidden），但实际默认显示，调用bottomSheetState.hide()也无效果，涉及BOM版本2023.05.01和2023.06.00。

问题根源 #

你使用的Material3 ModalBottomSheet组件默认visible参数为true，即使sheetState初始为Hidden，组件仍会默认激活显示。调用hide()无效是因为visible状态未改变，弹窗始终处于激活状态。

修复方案 #

1. 添加布尔状态变量控制visible参数，初始设为false实现默认隐藏
2. 在onDismissRequest中更新该状态变量，确保弹窗能正确关闭
3. 主动显示弹窗时修改状态变量为true即可

修复后代码示例 #

val bottomSheetState = rememberModalBottomSheetState(initialValue = SheetValue.Hidden)
var showBottomSheet by remember { mutableStateOf(false) }

// 示例：点击按钮触发弹窗显示
Button(onClick = { showBottomSheet = true }) {
    Text("Show Bottom Sheet")
}

ModalBottomSheet(
    onDismissRequest = { showBottomSheet = false },
    sheetState = bottomSheetState,
    containerColor = Color.White,
    visible = showBottomSheet // 核心控制参数
) {
    Text(text = "Now I'm hidden by default!", color = Color.Black)
    // 可添加内部关闭按钮
    Button(onClick = { showBottomSheet = false }) {
        Text("Close")
    }
}

补充说明 #

在Jetpack Compose Material3的ModalBottomSheet中，sheetState主要用于控制弹窗的滑动状态（展开、半展开、隐藏），而visible参数才是控制弹窗是否渲染显示的核心开关。忽略该参数会导致弹窗默认显示，这是组件的设计逻辑，而非版本bug。

内容的提问来源于stack exchange，提问作者Oliver Metz