如何避免Jetpack Compose中ModalBottomSheet与系统按钮重叠

问题根源是你的ModalBottomSheet没正确处理系统窗口边距，直接跑到系统UI层里了，给你俩修复方案：

方案一：给ModalBottomSheet加windowInsets参数（最省心） #

直接在ModalBottomSheet里指定windowInsets = WindowInsets.systemBars，它会自动避开状态栏和导航栏：

val sheetState = rememberModalBottomSheetState()
val scope = rememberCoroutineScope()
var showBottomSheet by remember { mutableStateOf(false) }
Scaffold(
    floatingActionButton = {
        ExtendedFloatingActionButton(
            text = { Text("Show bottom sheet") },
            icon = { Icon(Icons.Filled.Add, contentDescription = "") },
            onClick = {
                showBottomSheet = true
            }
        )
    }
) { contentPadding ->
    // 这里放你的页面内容
}

// 把ModalBottomSheet挪到Scaffold外面，别被Scaffold的padding影响
if (showBottomSheet) {
    ModalBottomSheet(
        onDismissRequest = {
            showBottomSheet = false
        },
        sheetState = sheetState,
        // 关键就是这行，让弹窗自动避开系统按钮区域
        windowInsets = WindowInsets.systemBars
    ) {
        Button(onClick = {
            scope.launch { sheetState.hide() }.invokeOnCompletion {
                if (!sheetState.isVisible) {
                    showBottomSheet = false
                }
            }
        }) {
            Text("Hide bottom sheet")
        }
    }
}

方案二：手动给弹窗内容加导航栏padding #

如果你的Compose版本比较旧，也可以直接在弹窗内容外层加navigationBarsPadding()：

ModalBottomSheet(
    onDismissRequest = { showBottomSheet = false },
    sheetState = sheetState
) {
    Column(
        modifier = Modifier
            .padding(horizontal = 16.dp)
            .navigationBarsPadding() // 给底部加padding避开导航栏
    ) {
        Button(onClick = {
            scope.launch { sheetState.hide() }.invokeOnCompletion {
                if (!sheetState.isVisible) {
                    showBottomSheet = false
                }
            }
        }) {
            Text("Hide bottom sheet")
        }
    }
}

另外提醒下：把ModalBottomSheet从Scaffold的内容块里移出来，不然会继承Scaffold的内容padding，容易出问题。

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