如何在 Android Jetpack Compose 的 MaterialTheme 中添加额外的颜色？

Question

Android Jetpack Compose Colors 类包含一组可以实现材质主题应用的颜色类型。如果我的应用主题需要一些额外的颜色类型，我该如何添加这些额外的颜色，以便通过 MaterialTheme 对象使用它们？

Answer 1

Valeriy Katkov 的回答只是一个小小的改动

在某些版本的android studio中，下面的代码不起作用

@Composable
val Colors.myExtraColor: Color
    get() = if (isLight) Color.Red else Color.Green

@Composable
fun ExtraColorExample() {
    Text(
        text = "test",
        color = MaterialTheme.colors.myExtraColor // <-- the newly added color
    )
}

它会显示错误

<块引用>

此注解不适用于目标'顶级属性 没有支持字段或委托'

要解决这个问题，要么像这样写

@get:Composable
val Colors.myExtraColor: Color
    get() = if (isLight) Color.Red else Color.Green

或

val Colors.myExtraColor: Color
    @Composable
    get() = if (isLight) Color.Red else Color.Green

我发现这个错误的版本

Android Studio Arctic Fox | 2020.3.1 Canary 12
Build #AI-203.7148.57.2031.7226969, built on March 23, 2021
Runtime version: 11.0.8+10-b944.6842174 amd64
VM: OpenJDK 64-Bit Server VM by N/A
Windows 10 10.0

Answer 2

基本上有两种方法：

最简单的方法是创建扩展属性来对颜色进行硬编码。如果您不想支持多个主题或明/暗模式，这很好用。

如果您想将您的颜色正确地集成到主题中，您可以阅读我关于它的文章，因为在这里插入有点长：https://gustav-karlsson.medium.com/extending-the-jetpack-compose-material-theme-with-more-colors-e1b849390d50

但简而言之，步骤是：

• 创建您自己的 MyColors 类，其中包含对 Colors 的引用以及您的新颜色。
• 创建一个包含 CompositionLocal 实例的 MyColor。
• 创建您的主题并将 MaterialTheme 包装在 CompositionLocalProvider 中，其中 CompositionLocal 提供 MyColors。确保还将 Colors 实例从 MyColors 分配给 MaterialTheme。
• 在 MaterialTheme 上创建一个扩展属性，引用 CompositionLocal 持有 MyColors。这就是您引用新颜色的方式。

这将允许您为主题引入新颜色，这些颜色会随着主题的变化而动态更新。

Answer 3

扩展Colors类

您可以轻松地将 extension property 添加到 Colors 类，以便它可以通过您应用中的任何 Colors 对象使用。

@Composable
val Colors.myExtraColor: Color
    get() = if (isLight) Color.Red else Color.Green

@Composable
fun ExtraColorExample() {
    Text(
        text = "test",
        color = MaterialTheme.colors.myExtraColor // <-- the newly added color
    )
}

撰写文档中也有一个示例，请参阅 Extending Material colors。

指定内容 alpha

如果您缺少的颜色与现有颜色仅因 alpha 不同，并且颜色的目的是更改内容优先级，则无需为主题添加其他颜色。您可以通过为 LocalContentAlpha 提供值来指定层次结构的内容 alpha。

CompositionLocalProvider(
    LocalContentAlpha provides ContentAlpha.medium,
    LocalContentColor provides MaterialTheme.colors.onSurface
) {
    // this text is displayed using ContentAlpha.medium
    // and MaterialTheme.colors.onSurface color
    Text("Hello world!") 
}

有关详细信息，请参阅 Content Alpha 文档。 Jetpack Compose Theming 代码实验室中还有 Content Alpha 部分。