Compose Multiplatform中状态栏颜色修改问题

核心思路 #

只针对Android端修改状态栏，iOS端不做任何处理；直接设置状态栏背景色为登录页背景色，同时适配深浅模式下的文字图标颜色，不隐藏状态栏。

具体实现代码 #

在登录页面的Composable函数中添加如下逻辑：

@Composable
fun LoginScreen() {
    // 替换为你的登录页背景色，可根据深浅模式自定义
    val loginBgColor = if (isSystemInDarkTheme()) {
        Color(0xFF1E1E1E) // 深色模式背景
    } else {
        Color(0xFFF8F8F8) // 浅色模式背景
    }
    val isDarkMode = isSystemInDarkTheme()

    // 仅在Android端执行状态栏修改
    if (Platform.isAndroid) {
        val context = LocalContext.current
        SideEffect {
            val window = (context as Activity).window
            // 设置状态栏背景色
            window.statusBarColor = loginBgColor.toArgb()

            // 适配状态栏文字/图标颜色（API 23+支持）
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                val uiFlags = if (isDarkMode) {
                    // 深色模式下，状态栏文字用浅色
                    View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR.inv()
                } else {
                    // 浅色模式下，状态栏文字用深色
                    View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
                }
                window.decorView.systemUiVisibility = uiFlags
            }
        }
    }

    // 登录页面UI
    Box(modifier = Modifier.fillMaxSize().background(loginBgColor)) {
        // 这里写你的登录表单、按钮等UI内容
    }
}

关键说明 #

• 使用Platform.isAndroid确保代码只在Android端运行，完全不影响iOS。
• SideEffect保证每次Compose重组（比如深浅模式切换）时，状态栏颜色都会同步更新。
• 针对API 23及以上版本处理状态栏文字颜色，避免低版本系统崩溃；低版本仅修改背景色，文字颜色保持系统默认。
• 不使用edgeToedge()，因此状态栏会正常显示，不会被内容覆盖或隐藏。

为什么之前在MaterialTheme中修改无效？ #

MaterialTheme是全局主题配置，若没有针对特定页面绑定状态栏修改逻辑，或者页面的背景色/其他配置覆盖了全局设置，就不会生效。在登录页单独处理更精准，也不会影响其他页面的状态栏样式。

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