【问题标题】:How to get Material color swatches with Jetpack Compose Color?如何使用 Jetpack Compose Color 获取 Material 颜色样本?
【发布时间】:2022-07-11 14:52:25
【问题描述】:

有没有办法使用 Jetpack Compose Colors 获取 Material Color 样本?

使用 websitematerial 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


【解决方案1】:

由于有 Compose 对应的可用,我必须手动完成此操作

  val red by lazy {
    linkedMapOf(
        50 to Color(0xffFFEBEE),
        100 to Color(0xffFFCDD2),
        200 to Color(0xffEF9A9A),
        300 to Color(0xffE57373),
        400 to Color(0xffEF5350),
        500 to Color(0xffF44336),
        600 to Color(0xffE53935),
        700 to Color(0xffD32F2F),
        800 to Color(0xffC62828),
        900 to Color(0xffB71C1C)
    )
}

对于每种材料颜色和

val primaryHeaderColors by lazy {
    listOf(
        Color(0xffF44336),
        Color(0xffE91E63),
        Color(0xff9C27B0),
        Color(0xff673AB7),
        Color(0xff3F51B5),
        Color(0xff2196F3),
        Color(0xff03A9F4),
        Color(0xff00BCD4),
        Color(0xff00ACC1),
        Color(0xff4CAF50),
        Color(0xff8BC34A),
        Color(0xffCDDC39),
        Color(0xffFFEB3B),
        Color(0xffFFC107),
        Color(0xffFF9800),
        Color(0xffFF5722),
        Color(0xff795548),
        Color(0xff9E9E9E),
        Color(0xff607D8B)
    )
}

并将其设为library,供任何感兴趣的人使用。

【讨论】:

    猜你喜欢
    • 2022-10-25
    • 2022-10-25
    • 1970-01-01
    • 1970-01-01
    • 2023-02-13
    • 2021-08-14
    • 2022-06-15
    • 2022-07-08
    • 2022-06-28
    相关资源
    最近更新 更多