如何避免Material3的ModalBottomSheet与系统按钮重叠？

我正在尝试给应用添加Material3的ModalBottomSheet，当前主屏幕和弹窗代码如下。遇到的问题是：应用启动时弹窗直接显示，点击外部后弹窗会折叠，但不会完全消失，停在屏幕底部与系统按钮重叠；即便添加remember对象，也仅能让弹窗稍后消失，但重叠的瞬间依然可见。

当前代码 #

MainScreen #

@Composable
fun MainScreen() {

    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        Scaffold(
            content = {},
            modifier = Modifier.fillMaxSize()
        )
    }
    SignInBottomSheet()
}

SignInBottomSheet #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SignInBottomSheet(
) {

    ModalBottomSheet(
        onDismissRequest = {}
    ) {
        Column(
            modifier = Modifier.align(Alignment.CenterHorizontally)
        ) {
            Button(
                modifier = Modifier
                    .width(200.dp)
                    .height(70.dp)
                    .padding(bottom = 10.dp),
                onClick = { /*TODO*/ }
            ) {
                Text(
                    text = "Log in",
                    style = MaterialTheme.typography.bodyLarge,
                    fontWeight = FontWeight.Bold
                )
            }
            Button(
                onClick = { /*TODO*/ },
                modifier = Modifier
                    .width(200.dp)
                    .height(70.dp)
                    .padding(bottom = 10.dp),
            ) {
                Text(
                    text = "Continue with Google",
                    style = MaterialTheme.typography.bodyLarge,
                    fontWeight = FontWeight.Bold
                )
            }
        }
    }
}

问题截图 #

展开状态	折叠状态

解决方案 #

问题核心是未正确控制弹窗的显示状态，且布局层级存在问题。以下是修复后的代码：

修改后的MainScreen #

@Composable
fun MainScreen() {
    Surface(
        modifier = Modifier.fillMaxSize(),
        color = MaterialTheme.colorScheme.background
    ) {
        // 管理弹窗状态，跳过半展开状态
        val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
        // 控制弹窗显示/隐藏的状态变量
        var showSheet by remember { mutableStateOf(true) }

        Scaffold(modifier = Modifier.fillMaxSize()) { paddingValues ->
            Box(modifier = Modifier.padding(paddingValues)) {
                // 主界面内容区域
            }
        }

        // 根据状态变量控制弹窗是否显示
        if (showSheet) {
            SignInBottomSheet(
                sheetState = sheetState,
                onDismiss = { showSheet = false }
            )
        }
    }
}

修改后的SignInBottomSheet #

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SignInBottomSheet(
    sheetState: ModalBottomSheetState,
    onDismiss: () -> Unit
) {
    ModalBottomSheet(
        sheetState = sheetState,
        onDismissRequest = { onDismiss() },
        skipPartiallyExpanded = true
    ) {
        Column(
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
                .padding(vertical = 24.dp)
        ) {
            Button(
                modifier = Modifier
                    .width(200.dp)
                    .height(70.dp)
                    .padding(bottom = 10.dp),
                onClick = { /*TODO*/ }
            ) {
                Text(
                    text = "登录",
                    style = MaterialTheme.typography.bodyLarge,
                    fontWeight = FontWeight.Bold
                )
            }
            Button(
                onClick = { /*TODO*/ },
                modifier = Modifier
                    .width(200.dp)
                    .height(70.dp)
                    .padding(bottom = 10.dp),
            ) {
                Text(
                    text = "使用Google继续",
                    style = MaterialTheme.typography.bodyLarge,
                    fontWeight = FontWeight.Bold
                )
            }
        }
    }
}

关键修改点 #

1. 状态管理：使用rememberModalBottomSheetState并设置skipPartiallyExpanded = true，直接禁用半展开状态，避免折叠后残留。
2. 显示控制：通过showSheet状态变量完全控制弹窗的显示/隐藏，点击外部时调用onDismiss让弹窗彻底消失。
3. 布局层级：将ModalBottomSheet放在Surface内部、与Scaffold同级的位置，保证布局层级正确，不会和系统按钮重叠。
4. 内容优化：给弹窗内容添加垂直padding，避免内容贴边，提升视觉效果。

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