Jetpack Compose预览中系统底部导航栏全白问题求助

问题描述 #

在Jetpack Compose项目中，给@Preview注解添加showSystemUi = true后，预览界面的系统底部导航栏（返回、主页、最近任务）背景与按钮均为白色，呈现空白白栏状态，正常显示应为黑底白按钮。该问题仅出现在Android Studio Iguana 2023.2.1的预览面板中，模拟器或真机运行时显示完全正常。

已尝试的无效操作 #

• 执行Clean -> Build流程重新编译项目
• 清除Android Studio缓存并重启IDE
• 修改@Preview的showBackground参数
• 切换预览界面的明暗模式
• 更新Gradle及Compose相关依赖版本
• 禁用Theme.kt中的动态颜色逻辑和状态栏颜色修改代码

最小复现代码 #

MainActivity.kt（仅修改预览注解） #

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MinimalReproducibleExampleTheme {
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

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

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

Theme.kt（默认未修改） #

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80
)

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40
)

@Composable
fun MinimalReproducibleExampleTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

结论与临时解决方案 #

这是Android Studio Iguana 2023.2.1版本中Compose预览工具的已知bug，由于仅影响预览面板、不影响真机/模拟器运行，可采取以下临时处理方式：

1. 降级Android Studio至Giraffe或更早稳定版本，恢复正常的预览系统UI显示
2. 若需保留当前IDE版本，可暂时不使用showSystemUi = true，或通过自定义Compose组件模拟系统导航栏样式用于预览

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