MaterialTheme.colors 与 MaterialTheme.coloScheme 之间有什么区别

Question

我正在学习Android开发的Jetpack组成。

有时，我用

MaterialTheme.colors MaterialTheme.coloScheme

因为其中一个显示红色。

例如，

Surface(
        color = MaterialTheme.colorScheme.primary,
        modifier = Modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ) {
        Row(modifier = Modifier.padding(24.dp)) {
            Column(modifier = Modifier
                .weight(1f)
                .padding(bottom = extraPadding)
            ) {
                Text(text = "Hello, ")
                Text(text = name)
            }
            ElevatedButton(
                onClick = { expanded.value = !expanded.value }
            ) {
                Text(if (expanded.value) "Show less" else "Show more")
            }
        }
    }

那么，它们有什么区别，哪一种更好，或者如何正确使用它们？

Answer 1

这是两种不同的颜色选择系统。在材料设计中，使用颜色介于 100 和 900 之间的 2 个颜色样本。您可以在材质颜色选择器中查看样本。M3 使用新颜色系统 HCT 中 0-100 之间的色调。

长话短说

当您从 Material Design2 中选择可组合项（例如按钮）时，将使用 M2 中的颜色。当您从 Material Design3 中选择可组合项时，会使用来自 M3 的令牌。

材料设计2

当您选择主要 500 和 700 时，将使用次要 200 和 700 变体。

你打电话时androidx.compose.material.MaterialTheme.colors.x

你得到这些颜色。

材料设计3

对于 Material Design 3，他们发明了一种新的颜色系统（RGB、HSV、HSL），称为 HCT（色调-色彩-色调）。如果您对详细信息感兴趣，可以查看此博客。现在，不再选择 200 和 900 种颜色，而是选择 0 到 100 之间的色调。

谷歌有一个util 库，可以根据您选择的颜色创建这些色调。但我上次检查时创建颜色时出现了错误。

我还构建了一个M2 和 M3 颜色选择库，该库依赖于 google 的 M3 创建库。

Google 的主题生成器将为 Compose 创建 M3 颜色

当您在材质生成器或任何工具中选择主要、次要、teriatry 时，或者通过创建 40-20 等的 M3 项目变体来使用默认颜色时，将为主要、次要颜色角色创建。您可能会选择红色，但其色调 (40) 用于原色。

#FF00000 -> #c001000

颜色角色

主键颜色用于派生 UI 中关键组件的角色，例如 FAB、突出按钮、活动状态以及升高表面的色调。

次要颜色用于 UI 中不太突出的组件（例如滤镜芯片），同时扩大颜色表达的机会。

第三主色用于派生对比强调色的作用，可用于平衡主要颜色和次要颜色或引起对元素的高度关注。第三颜色角色留给团队自行决定使用，旨在支持产品中更广泛的颜色表达。

你可以查看m3官方页面何时使用原色、次要颜色和三次色

基本的

主要角色用于 UI 中的关键组件，例如 FAB、突出按钮、活动状态以及升高表面的色调。

中学

次要角色用于 UI 中不太突出的组件，例如滤镜芯片，同时扩大色彩表达的机会。

第三

第三角色用于对比强调，可用于平衡主要颜色和次要颜色或引起对元素（例如输入字段）的高度关注。

第三色角色留给制造商自行决定使用，旨在支持产品中更广泛的色彩表达。

这些在代码中怎么是这样的？如上所述，可组合项选择相应的颜色标记，按钮主要与主题的设置颜色相匹配。

internal object FilledButtonTokens {
    val ContainerColor = ColorSchemeKeyTokens.Primary
    val ContainerElevation = ElevationTokens.Level0
    val ContainerHeight = 40.0.dp
    val ContainerShape = ShapeKeyTokens.CornerFull
    val DisabledContainerColor = ColorSchemeKeyTokens.OnSurface
    val DisabledContainerElevation = ElevationTokens.Level0
    const val DisabledContainerOpacity = 0.12f
    val DisabledLabelTextColor = ColorSchemeKeyTokens.OnSurface
    const val DisabledLabelTextOpacity = 0.38f
    val FocusContainerElevation = ElevationTokens.Level0
    val FocusLabelTextColor = ColorSchemeKeyTokens.OnPrimary
    val HoverContainerElevation = ElevationTokens.Level1
    val HoverLabelTextColor = ColorSchemeKeyTokens.OnPrimary
    val LabelTextColor = ColorSchemeKeyTokens.OnPrimary
    val LabelTextFont = TypographyKeyTokens.LabelLarge
    val PressedContainerElevation = ElevationTokens.Level0
    val PressedLabelTextColor = ColorSchemeKeyTokens.OnPrimary
    val DisabledIconColor = ColorSchemeKeyTokens.OnSurface
    const val DisabledIconOpacity = 0.38f
    val FocusIconColor = ColorSchemeKeyTokens.OnPrimary
    val HoverIconColor = ColorSchemeKeyTokens.OnPrimary
    val IconColor = ColorSchemeKeyTokens.OnPrimary
    val IconSize = 18.0.dp
    val PressedIconColor = ColorSchemeKeyTokens.OnPrimary
}