【发布时间】:2022-07-11 14:52:25
【问题描述】:
有没有办法使用 Jetpack Compose Colors 获取 Material Color 样本?
使用 website 和 material color picker site 手动创建 Material 500 颜色。
val Red500 = Color(0xfff44336)
val Pink500 = Color(0xffe91e63)
val Purple500 = Color(0xff9c27b0)
val DeepPurple500 = Color(0xff673ab7)
val Indigo500 = Color(0xff3f51b5)
val Blue500 = Color(0xff2196f3)
val LightBlue500 = Color(0xff03a9f4)
val Cyan500 = Color(0xff00bcd4)
val Teal500 = Color(0xff009688)
val Green500 = Color(0xff4caf50)
val LightGreen500 = Color(0xff8bc34a)
val Lime500 = Color(0xffcddc39)
val Yellow500 = Color(0xffffeb3b)
val Amber500 = Color(0xffffc107)
val Orange500 = Color(0xffff9800)
val DeepOrange500 = Color(0xffff5722)
val Brown500 = Color(0xff795548)
val Grey500 = Color(0xff9e9e9e)
基于此article for Flutter 我将函数从 Dart 转换为 Kotlin
fun createMaterialSwatch(color: Color): Map<Int, Color> {
val colorSwatch = linkedMapOf<Int, Color>()
val variants = mutableListOf(.05)
for (i in 1 until 10) {
variants.add(0.1 * i)
}
val red: Int = color.red.fractionToRGBRange()
val green: Int = color.green.fractionToRGBRange()
val blue: Int = color.blue.fractionToRGBRange()
for (variant in variants) {
val ds: Double = 0.5 - variant
val newRed: Int = red + ((if (ds < 0) red else 255 - red) * ds).roundToInt()
val newGreen: Int = green + ((if (ds < 0) green else 255 - green) * ds).roundToInt()
val newBlue: Int = blue + ((if (ds < 0) blue else 255 - blue) * ds).roundToInt()
colorSwatch[(variant * 1000).roundToInt()] = Color(newRed, newGreen, newBlue)
}
return colorSwatch
}
fun Float.fractionToRGBRange() = (this * 255.0f).toInt()
但是它没有返回正确的颜色,是否有一个内置函数可以像 Flutter 那样获取样本,或者有人能指出上面的函数有什么问题吗?
我得到的在左边,它应该在右边
还有没有办法创建强调色 A100、A200、A400、A700?
【问题讨论】:
-
你试过这个网站吗?您可以下载 Compose 的主题,包括口音等:material-foundation.github.io/material-theme-builder/#/custom
-
@CodePoet 在该站点中创建 Material Design 3 颜色非常酷,但我需要的是 Material Design 2 材质颜色样本,其中包含基于该样本 Color500 的 10 种色调。
标签: android material-design android-jetpack-compose android-jetpack