Compose Material 3 ModalBottomSheet如何避开安全区域显示？

下面提供几种实用方案，解决弹窗与安全区域线条重叠的问题：

方法1：直接配置ModalBottomSheet的windowInsets参数 #

利用组件自带的windowInsets属性，设置为导航栏安全区域，弹窗会自动调整位置避开底部安全区域：

val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
val scope = rememberCoroutineScope()

ModalBottomSheet(
    onDismissRequest = { scope.launch { sheetState.hide() } },
    sheetState = sheetState,
    windowInsets = WindowInsets.navigationBars
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
    ) {
        Text("弹窗内容示例")
        // 其他自定义组件
    }
}

方法2：手动给内容添加安全区域底部padding #

如果需要更灵活的控制，可以手动获取安全区域底部值，给弹窗内容添加padding：

val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
val scope = rememberCoroutineScope()
val bottomPadding = WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()

ModalBottomSheet(
    onDismissRequest = { scope.launch { sheetState.hide() } },
    sheetState = sheetState
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .padding(bottom = bottomPadding)
    ) {
        Text("弹窗内容示例")
    }
}

方法3：使用safeContentPadding修饰符 #

借助Compose的safeContentPadding修饰符，自动为内容适配安全区域：

val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
val scope = rememberCoroutineScope()

ModalBottomSheet(
    onDismissRequest = { scope.launch { sheetState.hide() } },
    sheetState = sheetState
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .safeContentPadding()
    ) {
        Text("弹窗内容示例")
    }
}

通常方法1是最直接的解决方案，能让ModalBottomSheet自动避开底部导航栏或手势线所在的安全区域，满足大部分场景需求。

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