Jetpack Compose(Material3)内容无法覆盖安全区域问题求助

1. 确认依赖配置 #

确保添加与Compose BOM 2023.06.01匹配的Accompanist SystemUiController依赖：

implementation "com.google.accompanist:accompanist-systemuicontroller:0.32.0"

2. 正确配置Activity #

在MainActivity的onCreate方法中，必须在setContent之前执行以下代码，让内容可以延伸到系统栏区域：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    WindowCompat.setDecorFitsSystemWindows(window, false)
    
    setContent {
        // 你的Compose页面内容
    }
}

3. 隐藏状态栏并实现全屏内容 #

在目标Composable中，使用Accompanist控制器隐藏状态栏，同时让内容直接填充全屏，不要添加安全区域留白：

@Composable
fun FullScreenImagePage() {
    val systemUiController = rememberSystemUiController()
    
    DisposableEffect(systemUiController) {
        // 隐藏状态栏和导航栏（按需选择，仅隐藏状态栏可调用hideStatusBar()）
        systemUiController.hideSystemBars()
        // 页面销毁时恢复系统栏显示（可选）
        onDispose { systemUiController.showSystemBars() }
    }

    Box(modifier = Modifier.fillMaxSize()) {
        Image(
            painter = painterResource(id = R.drawable.your_image),
            contentDescription = "全屏图片",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.FillBounds // 让图片填满整个容器，保持比例可选ContentScale.Crop
        )
    }
}

4. 使用Scaffold时的注意事项 #

如果必须用Scaffold，不要使用其传入的PaddingValues，这个值是安全区域的留白，会让内容避开系统栏：

Scaffold(modifier = Modifier.fillMaxSize()) { _ ->
    Box(modifier = Modifier.fillMaxSize()) {
        Image(
            painter = painterResource(id = R.drawable.your_image),
            contentDescription = "全屏图片",
            modifier = Modifier.fillMaxSize(),
            contentScale = ContentScale.FillBounds
        )
    }
}

排查要点 #

• 确认WindowCompat.setDecorFitsSystemWindows调用顺序在setContent之前，顺序错误会导致不生效。
• 检查是否有其他代码添加了Modifier.systemBarsPadding()，这个修饰符会强制内容避开系统栏，需移除。
• 确认图片的contentScale设置符合需求，避免出现留白。

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