如何在Jetpack Compose + Material 3中更改状态栏颜色

Question

我正在按照developer.google的主题教程进行操作。我正在尝试将应用程序迁移到Mat.3，并将状态栏的颜色修改为与背景颜色匹配。

• 在添加android:statusBarColor和android:windowLightStatusBar后，没有任何变化。

• 我注意到在应用程序加载的最初时刻，状态栏确实符合我的期望，但过了一会儿就变成了错误的状态。

之前的状态：https://istack.dev59.com/i43cL.webp

之后：https://istack.dev59.com/kMwaP.webp 我的尝试：

// res/values/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme.Superheroes" parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:statusBarColor">@color/background_light</item>
        <item name="android:windowLightStatusBar">true</item>
        <item name="android:windowBackground">@color/background_light</item>
    </style>
</resources>

// res/values-night/themes.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme.Superheroes" parent="android:Theme.Material.NoActionBar">
        <item name="android:statusBarColor">@color/background_dark</item>
        <item name="android:windowLightStatusBar">false</item>
        <item name="android:windowBackground">@color/background_dark</item>
    </style>
</resources>

- VanSuTuyDuyen

---

查看您的AppTheme组合，如果您是从Android Studio模板创建应用程序，则状态栏颜色在那里更改。 - Jan Bína

你是否在清单文件中将主题应用到活动中了？ - zjmo

使用Accompanist - Richard Onslow Roper

@JanBína 非常有帮助！我忘记了那个。 - VanSuTuyDuyen

@zjmo 是的，我已经应用了它，但我可以看到在运行时xml已被Compose覆盖。 - VanSuTuyDuyen

Answer 1

另一种在不添加依赖项的情况下更改它的方法是在ui.theme/Theme.kt中，正如@2801938所提到的：

@Composable
fun YourAppTheme(darkTheme...) {
    ...
    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
        }
    }
    ...
}

- VanSuTuyDuyen

Answer 2

在Jetpack Compose中，最简单的方法是使用Accompanist System UI Controller。

将以下内容添加到依赖项中：implementation "com.google.accompanist:accompanist-systemuicontroller:0.27.0" 然后，在您的MainActivity中：

setContent {
            MyTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    val systemUiController = rememberSystemUiController()

                    SideEffect {
                        systemUiController.setStatusBarColor(
                            color = Color(0xff655D8A),
                        )
                    }
                }
            }
        }

点击此处查看源代码和详细信息。

- Code Poet

---

谢谢你的帮助。我正在寻找一种不添加依赖项的方法。实际上，在评论部分我已经找到了！ - VanSuTuyDuyen

这个库已经过时了 - undefined

Answer 3

这个compose样例项目Jetchat通过 XML 主题实现了此功能。

在各种themes.xml文件中，一定要像它们一样覆盖所有 android 版本，否则您将在特定版本上遇到一些奇怪的行为。

- Chris

Answer 4

if (!view.isInEditMode) {
    SideEffect {
        val window = (view.context as Activity).window
        window.statusBarColor = colorScheme.primaryContainer.toArgb()
        WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
    }
}

在Color.kt文件中更改primaryContainer的颜色，然后根据浅色和深色主题也进行相应的更改。

private val DarkColorScheme = darkColorScheme(
primaryContainer = Color.Black,
onPrimaryContainer = Color.White
)

private val LightColorScheme = lightColorScheme(
primaryContainer = RoyalBlue,
onPrimaryContainer = Color.White
)

在Color.kt文件中

val RoyalBlue = Color(0xFF246EE9)

- Fatiq Hussnain