如何避免Android中Material3 Modal Bottom Sheet与系统导航按钮重叠

核心原因 #

Modal Bottom Sheet 默认不会自动适配系统导航栏的内边距，尤其是当应用开启了EdgeToEdge模式时，需要手动处理导航栏的Insets（插入边距）来避免重叠。

解决方案1：给Sheet内容添加导航栏内边距 #

直接给Sheet的内容组件添加windowInsetsPadding修饰符，让内容自动避开导航栏区域：

@Composable
fun TestScreen() {
    var sheetOpened by mutableStateOf(false)

    Scaffold { innerPadding ->
        Box(
            Modifier
                .fillMaxSize()
                .padding(innerPadding)
                .align(Alignment.Center)
        ) {
            Button(onClick = { sheetOpened = true }) {
                Text("Open Bottom Sheet")
            }
        }
    }

    if (sheetOpened) {
        ModalBottomSheet(onDismissRequest = { sheetOpened = false }) {
            Box(
                Modifier
                    .fillMaxWidth()
                    .height(500.dp)
                    .background(Color.RED)
                    // 添加导航栏内边距，避免重叠
                    .windowInsetsPadding(WindowInsets.navigationBars)
            )
        }
    }
}

解决方案2：设置ModalBottomSheet的contentPadding参数 #

Material3的ModalBottomSheet提供了contentPadding参数，可以直接传入导航栏的边距值，让整个Sheet的内容区域自动适配：

@Composable
fun TestScreen() {
    var sheetOpened by mutableStateOf(false)

    Scaffold { innerPadding ->
        Box(
            Modifier
                .fillMaxSize()
                .padding(innerPadding)
                .align(Alignment.Center)
        ) {
            Button(onClick = { sheetOpened = true }) {
                Text("Open Bottom Sheet")
            }
        }
    }

    if (sheetOpened) {
        ModalBottomSheet(
            onDismissRequest = { sheetOpened = false },
            // 直接设置内容区域的导航栏边距
            contentPadding = WindowInsets.navigationBars.asPaddingValues()
        ) {
            Box(Modifier.fillMaxWidth().height(500.dp).background(Color.RED))
        }
    }
}

额外注意事项 #

如果你的应用开启了EdgeToEdge模式（比如在Activity中调用了enableEdgeToEdge()），必须确保所有需要避开系统栏的组件都正确处理了Insets，上述两种方案都能覆盖这种场景。

内容的提问来源于stack exchange，提问作者simarjot singh kalsi