如何在Jetpack Compose预览中隐藏导航栏与状态栏？

首先明确：无法直接通过@Preview注解的参数实现隐藏状态栏和导航栏，因为@Preview的现有配置项里没有提供相关开关（showSystemUi参数仅控制是否显示模拟的系统UI，但没有隐藏选项）。以下是两种可行的解决方法：

方法一：代码层面控制（仅预览生效） #

借助SystemUiController和LocalInspectionMode，可以在预览Composable中添加逻辑，仅在预览环境下隐藏系统栏，不会影响App实际运行效果。

修改你的预览代码如下：

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeTest1Theme {
        val systemUiController = rememberSystemUiController()
        // 判断当前是否处于预览模式，仅在预览时执行隐藏逻辑
        LaunchedEffect(Unit) {
            if (LocalInspectionMode.current) {
                systemUiController.hideSystemBars()
            }
        }
        Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
            Greeting("Android")
        }
    }
}

• LocalInspectionMode.current：用来检测当前是否处于Compose预览环境，确保隐藏逻辑只在预览中生效。
• systemUiController.hideSystemBars()：一次性隐藏状态栏和导航栏，也可以通过hideStatusBar()或hideNavigationBar()单独控制其中一个。

方法二：通过Android Studio预览工具栏快速切换 #

在Android Studio的预览窗口顶部，找到**"Show System UI"按钮**（图标为带状态栏的手机样式），点击即可切换隐藏/显示系统栏。这种方式无需修改代码，适合临时调整预览效果。

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