启用EdgeToEdge时解决ModalBottomSheet与导航栏重叠问题

我需要应用保持完全全屏状态，始终隐藏导航栏和状态栏，但弹出ModalBottomSheet时导航栏会重新显示，既无法隐藏它，也无法通过内边距设置避免Sheet内容被导航栏覆盖。已经尝试过enableEdgeToEdge()，给Sheet内部的Column添加.navigationBarsPadding()修饰符无效，尝试添加Spacer时WindowInsets.navigationBars.getBottom(this).toDp()返回0.dp。

现有代码 #

theme.xml #

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.Test" parent="android:Theme.Material.Light.NoActionBar.Fullscreen">
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
    </style>
</resources>

Compose屏幕代码 #

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

    var showBottomSheet by remember { mutableStateOf(false) }

    Scaffold(
        topBar = {
            // ...
        },
        bottomBar = {
            BottomAppBar(
                windowInsets = WindowInsets(0, 0, 0, 0)
            ) {
                // ...
            }
        }
    ) { paddingValues ->
        Column(
            modifier = Modifier.padding(paddingValues = paddingValues).fillMaxSize(),
            verticalArrangement = Arrangement.spacedBy(16.dp, alignment = Alignment.CenterVertically),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            ElevatedButton(onClick = { showBottomSheet = true }) {
                Text(text = "Show Bottom Sheet")
            }
        }
    }

    if (showBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = { showBottomSheet = false },
            modifier = Modifier.navigationBarsPadding(),
            windowInsets = WindowInsets(0, 0, 0, 0)
        ) {
            Text(text = loremIpsumText)

            /*Column(
                modifier = Modifier.navigationBarsPadding(),
            ) {
                Text(text = loremIpsumText)
            }*/

            /*Spacer(
                modifier = Modifier
                    .height(
                        with(LocalDensity.current) {
                            WindowInsets.navigationBars.getBottom(this).toDp()
                        }
                    )
            )*/
        }
    }
}

当前问题现象 #

• 设置ModalBottomSheet的windowInsets = WindowInsets(0, 0, 0, 0)时，导航栏会直接覆盖Sheet内容
• 移除该windowInsets设置后，Sheet会自动移到导航栏上方，但应用的底部应用栏会显示出来
• 期望效果：Sheet内容能避开导航栏区域，或者弹出Sheet时保持系统导航栏隐藏

临时解决方案 #

通过以下方式获取导航栏高度，然后在Sheet末尾添加对应高度的Spacer：

val navigationBarHeight = with(LocalDensity.current) {
    WindowInsets.navigationBars.getBottom(this).toDp()
}

ModalBottomSheet(
    onDismissRequest = { showBottomSheet = false },
    windowInsets = WindowInsets(0, 0, 0, 0)
) {
    Text(text = loremIpsumText)
    Spacer(modifier = Modifier.height(navigationBarHeight))
}

该方案能解决内容被覆盖的问题，但担心navigationBarHeight的计算会在重组时产生额外性能开销。

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