如何解决如何在 Android Jetpack Compose 的 MaterialTheme 中添加额外的颜色?
Android Jetpack Compose Colors 类包含一组可以实现材质主题应用的颜色类型。如果我的应用主题需要一些额外的颜色类型,我该如何添加这些额外的颜色,以便通过 MaterialTheme 对象使用它们?
解决方法
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
,
基本上有两种方法:
最简单的方法是创建扩展属性来对颜色进行硬编码。如果您不想支持多个主题或明/暗模式,这很好用。
如果您想将您的颜色正确地集成到主题中,您可以阅读我关于它的文章,因为在这里插入有点长: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
。这就是您引用新颜色的方式。
这将允许您为主题引入新颜色,这些颜色会随着主题的变化而动态更新。
,扩展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
部分。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。