Android Compose：在预览模式下（showSystemUi = true），文本会与状态栏重叠；但在设备上不会出现这种情况

移动开发 2026-07-09

我正在使用Android Studio（Panda 4 | 2025.3.4 Patch 1）开始我的第一个Compose项目。我刚打开Android Studio，选择新建项目 > 空Activity，并且没有添加一行代码。

当我在设备上启动新应用时，屏幕左上角会显示“Hello Android！”——我猜这是预期的结果。

在此输入图片描述

现在在Mac上选择Preview时，屏幕会把“Hello Android！”与状态栏错位地显示在一起。

在此输入图片描述

我是不是漏掉了什么？

以下是通过选择选项 Empty Activity 生成的代码：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeDemoTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier
    )
}

@Preview(showSystemUi = true)
@Composable
fun GreetingPreview() {
    ComposeDemoTheme {
        Greeting("Android")
    }
}

解决方案

从Android 15开始，引入了强制执行的边缘对齐（edge-to-edge）模式。对于较旧的Android版本，文本会自动放在状态栏之下，但较新版本就不是这样。

在应用中，Scaffold 会处理好这个问题，因此你无需担心应用是在较旧还是较新版本上运行时的内边距。

但由于预览不应用Scaffold，你需要在 GreetingPreview() 中添加一个 Modifier.safeDrawingPadding() 来完成此工作：

@Preview(showSystemUi = true)
@Composable
fun GreetingPreview() {
    ComposeDemoTheme {
        Greeting("Android", Modifier.safeDrawingPadding())
    }
}

这将使预览与应用保持一致。

Android