开启showSystemUi时Material Scaffold的TopAppBar预览重复问题咨询

首先明确结论：这个现象不属于框架bug，是Compose预览开启showSystemUi = true后的默认行为和Scaffold的Insets自动适配逻辑叠加导致的正常表现。

原因说明 #

当你给@Preview注解添加showSystemUi = true参数时，预览窗口会模拟真实设备的系统状态栏，同时给预览根Composable自动注入对应状态栏高度的WindowInsets。而Material系列的Scaffold默认开启了WindowInsets自动适配，会自动给内部TopAppBar添加对应状态栏高度的顶部内边距，两者叠加就会出现你遇到的双层空白/TopAppBar错位的效果。

你可以根据自己的使用场景选择对应方案：

• 方案1：仅修改预览的Scaffold配置，不影响正式运行效果
  给预览使用的Scaffold手动关闭Insets适配即可：

  Scaffold(
      topBar = { TopAppBar(title = { Text("页面标题") }) },
      // 预览阶段传入空的Insets，不会额外加顶部padding
      windowInsets = WindowInsets(0, 0, 0, 0),
  ) { paddingValues ->
      // 页面内容逻辑
  }
  

• 方案2：移除showSystemUi参数
  如果你不需要在预览里查看系统状态栏的适配效果，直接删掉该参数即可，默认预览不会注入系统Insets，自然不会出现叠加问题：

  // 移除showSystemUi = true配置
  @Preview
  @Composable
  fun PagePreview() {
      AppTheme {
          YourPageComposable()
      }
  }
  

• 方案3：预览端对齐正式运行的EdgeToEdge逻辑
  如果你的正式业务代码本身开启了沉浸式EdgeToEdge适配，只需要在预览代码里也加上对应逻辑即可对齐运行效果：

  @Preview(showSystemUi = true)
  @Composable
  fun PagePreview() {
      AppTheme {
          val context = LocalContext.current as Activity
          context.enableEdgeToEdge()
          YourPageComposable()
      }
  }
  

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