从themes.xml 更改TopAppBar 背景颜色答案

【问题标题】：Change TopAppBar background color from themes.xml从themes.xml 更改TopAppBar 背景颜色
【发布时间】：2021-08-04 06:10:21
【问题描述】：

在 Jetpack Compose 中，TopAppBar 显示 default background color，无论我们添加到 themes.xml 的内容如何。

那么我们如何才能将 TopAppBar 背景颜色从 themes.xml 更改为全局应用于应用程序。

TopAppBar(
    title = { Text("Activity") },
    navigationIcon = {
        IconButton(onClick = { onBackPressed() }) {
            Icon(Icons.Filled.ArrowBack, contentDescription = null)
        }
    }
)

主题.xml

<style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@android:color/black</item>
        <item name="colorPrimaryVariant">@android:color/holo_orange_dark</item>
        <item name="colorOnPrimary">@android:color/white</item>
</style>

注意：我们可以通过TopAppBar的backgroundColor属性来改变它，但这里我想全局实现它。

【问题讨论】：

检查this

标签： android android-jetpack-compose

【解决方案1】：

对于TopAppBar 和其他可组合组件，主题化的基础是MaterialTheme 可组合组件，不是 AppCompat/MaterialComponents XML 主题。

TopAppBar 使用 backgroundColor 属性。
默认值由 MaterialTheme.colors.primarySurface 定义。

您可以全局更改这些颜色，定义your theme 添加您的Colors 并将它们传递给MaterialTheme：

private val LightColors = lightColors(
    primary = Yellow500,
    //...
)

否则你可以简单地使用：

TopAppBar(
    title = { Text("Activity") },
    backgroundColor = /*...*/,
    /* ... */
)

如果您想在 Jetpack Compose 中使用 AppCompat XML 主题，您可以使用accompanist 库提供的AppCompat Compose 主题适配器。

【讨论】：

【解决方案2】：

当您在工作室中创建一个新项目时，您会得到一个名为 Theme.kt 的文件，其中有名为 lightColors 和 darkColors 的调色板。您应该修改这些值的参数以在您的应用中全局实现结果。

【讨论】：