Compose中TopAppBar为何忽略安全内边距并与状态栏重叠？

相关代码 #

主Activity代码：

override fun onCreate(savedInstanceState: Bundle?) {
    val splashScreen = installSplashScreen()
    super.onCreate(savedInstanceState)

    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {
        ArchApp()
    }
}

带工具栏的页面代码：

Scaffold(
    topBar = {
        TopAppBar {
            Button(
                onClick = { },
                colors = ButtonDefaults.buttonColors(
                    containerColor = AppColor.BlueGray14,
                    contentColor = AppColor.White
                ),
                contentPadding = PaddingValues(8.dp)
            ) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_menu),
                    contentDescription = "Open side menu"
                )
            }
        }
    },
) { innerPadding ->
    // 页面内容
}

应用主组合项代码：

AppDrawer(
    ...
) {
    AppNavGraph(
        startDestination = appStartScreen,
        navController = appState.navController,
        modifier = Modifier.fillMaxSize()
    )
}

问题现象 #

原因分析 #

问题根源在WindowCompat.setDecorFitsSystemWindows(window, false)这行代码。这个API会关闭系统自动将布局适配到安全区域的行为，而原本Compose的TopAppBar依赖系统自动注入安全内边距的逻辑会因此失效，所以不会自动添加顶部状态栏的安全内边距。

解决方案 #

根据需求选择以下两种处理方式：

方案1：移除全局禁用设置

如果不需要全局关闭系统的安全区域适配，直接删除WindowCompat.setDecorFitsSystemWindows(window, false)这行代码，TopAppBar会自动恢复安全内边距的处理。

方案2：手动添加安全内边距

如果必须保留全局禁用设置，需要手动给TopAppBar添加状态栏安全内边距：

Scaffold(
    topBar = {
        // 给TopAppBar添加状态栏安全内边距
        TopAppBar(modifier = Modifier.statusBarsPadding()) {
            Button(
                onClick = { },
                colors = ButtonDefaults.buttonColors(
                    containerColor = AppColor.BlueGray14,
                    contentColor = AppColor.White
                ),
                contentPadding = PaddingValues(8.dp)
            ) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_menu),
                    contentDescription = "Open side menu"
                )
            }
        }
    },
) { innerPadding ->
    // 页面内容需应用innerPadding，避免被底部导航栏遮挡
    Box(modifier = Modifier.padding(innerPadding)) {
        // 你的页面内容
    }
}

注意：Scaffold返回的innerPadding包含底部导航栏的安全内边距，记得在页面内容中应用该padding。

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