Jetpack Compose中TopAppBar顶部出现额外空白的问题求助

先排查最常见的两个原因，对应解决方案如下：

1. 主题未设置为无ActionBar样式 #

如果你的App主题仍保留默认ActionBar，系统会自动显示原生顶部ActionBar，和你编写的Compose TopAppBar叠加，就会出现顶部空白。

打开res/values/styles.xml，将主题改为Material3的NoActionBar版本：

<style name="Theme.YourApp" parent="Theme.Material3.DayNight.NoActionBar">
    <!-- 保留你原有的主题配置项 -->
</style>

2. 未处理系统状态栏Insets #

顶部空白也可能是状态栏区域未与TopAppBar融合导致的，按以下步骤处理：

第一步：在Activity中禁用系统窗口适配 #

在宿主Activity的onCreate方法中添加代码，让Compose自行处理系统UI边距：

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

第二步：统一TopAppBar与状态栏颜色 #

在TopAppBar配置中，将状态栏颜色设置为与TopAppBar背景色一致：

TopAppBar(
    title = { Text("Your Plans") },
    navigationIcon = {
        IconButton(onClick = onMenuClick) {
            Icon(Icons.Default.Menu, contentDescription = "Menu")
        }
    },
    actions = {
        IconButton(onClick = { navController.navigate("AddEditPlan") }) {
            Icon(Icons.Default.Add, contentDescription = "Add Plan")
        }
    },
    colors = TopAppBarDefaults.topAppBarColors(
        containerColor = Color.Red,
        statusBarColor = Color.Red // 状态栏颜色与TopAppBar保持一致
    )
)

完成以上操作后，状态栏会与TopAppBar融为一体，顶部空白即可消除。

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