English 中文(简体)
MaterialTheme.colors和MaterialTheme.coloScheme之间有什么区别?
原标题:What s the difference between MaterialTheme.colors vs MaterialTheme.coloScheme

我正在学习Android开发中的Jetpack Compose。

有时我使用

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")
            }
        }
    }

因此,区别是什么,谁更好,或者如何适当使用?

问题回答

它们是2个不同的彩色甄选制度。 在材料设计中,使用了2个色谱法,在100至900之间。 可在上检查实质性色体。 M3在其新的彩色系统HCT中使用了0-100之间的沙子。

TL;DR

当您从Material Design2中选择Button等可组合项时,会使用M2中的颜色。当您从Material Design3中选择可组合项时,会使用M3中的标记。

Material Design2

将此翻译成中文:enter image description here 无法翻译,图片是一个二维码无法确定含义。

当您选择主要的500和700时,将使用选择辅助的200和700个变体。

请将此翻译成中文:enter image description here 无法翻译此内容,因为它只是一个图片。

当你调用androidx.compose.material.MaterialTheme.colors.x

将此翻译成中文:enter image description here 无可访问的图像,请提供图像说明文字。

你们正在获得这些颜色。

Material Design3

关于材料设计3,他们发明了一个新的彩色系统(RGB, HSV, HSL),称为HCT(hue-colorfulness-tone)。 如果您有兴趣了解详情,请查阅blog 。 现在,选择0至100英磅而不是200和900色的颜色。

将此翻译成中文:输入图像描述

有一个谷歌的实用库可以从您选择的颜色创建这些色调。但最后一次我检查时有一个错误创建颜色。

我还建造了一个M2和M3 彩色选择图书馆,该图书馆为M3的创建而依靠gogle s Library。

使用谷歌主题构建器创建Compose的M3颜色

当您在材料建造器或任何工具中选择主要,次要和第三色调,或通过创建M3项目变体(例如40-20)使用默认颜色时,主要和次要颜色角色都将被创建。您可能会选择红色,但其色调(40)将用于主要颜色。

#FF00000 -> #c001000

将此翻译成中文:enter image description here 无法翻译,因为这是一个图像,而不是一个可翻译的文本。

Color Roles

将此翻译成中文:enter image description here 请见图像。

The primary key color is used to derive roles for key components across the UI, such as the FAB, prominent buttons, active states, as well as the tint of elevated surfaces.

The secondary key color is used for less prominent components in the UI such as filter chips, while expanding the opportunity for color expression.

The tertiary key color is used to derive the roles of contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element. The tertiary color role is left for teams to use at their discretion and is intended to support broader color expression in products.

当您需要使用主色,次要色和三次色时,可以查看官方m3页面

将此翻译为中文:输入图片说明

Primary

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

将此翻译为中文: 输入图像描述

Secondary

次要角色用于 UI 中不太突出的组件,例如筛选芯片,同时扩大了颜色表达的机会。

将此翻译成中文: 输入图像描述

Tertiary

第三角色用于对比强调色彩,可以用于平衡主要和次要颜色或提高对元素的关注度,例如输入字段。

第三色的作用留由制造商自行决定,旨在支持产品中更广泛的色彩表达。

将此翻译成中文:enter image description here 无法翻译,图像无法描述。

这些代码是这样的吗?如上面所述,可组合选择相应的颜色令牌,按钮为主要颜色以配合您的主题设定颜色。

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
}

在材料2中您将使用一个,在材料3中使用另一个。例如:

材料2:

    Surface(
    color = MaterialTheme.colors.surface,
    contentColor = contentColorFor(color),
    // ...

TopAppBar(
    backgroundColor = MaterialTheme.colors.primarySurface,
    contentColor = contentColorFor(backgroundColor),
    // ...

材料3:

    Card(
    colors = CardDefaults.cardColors(
        containerColor =
        if (isSelected) MaterialTheme.colorScheme.primaryContainer
        else
            MaterialTheme.colorScheme.surfaceVariant)
) {
    Text(
        text = “Dinner club”,
        style = MaterialTheme.typography.bodyLarge,
        color =
        if (isSelected) MaterialTheme.colorScheme.onPrimaryContainer
        else MaterialTheme.colorScheme.onSurface, ),
        ….
        ….
}

它们是相同的。

colors只在Material 2上可用,因此当您使用MaterialTheme.colors时,您会注意到MaterialTheme是从material导入的,使用import androidx.compose.material.MaterialTheme

colorScheme 仅在 Material 3 上可用,因此当您使用 MaterialTheme.colorScheme 时,您将注意到 MaterialTheme 是从 material3 导入的,使用 import androidx.compose.material3.MaterialTheme.

因此,如果你在项目中使用材料3,就确保你使用<代码>colorScheme,如果你使用材料2,确保你使用<代码>color。

基本:

MaterialTheme.colorScheme.primaryMaterial 3 设计库的一部分。

MaterialTheme.colors.backgroundLegacy Material 2 设计库的一部分。

材料3

,Thracian s response是好的。 我仍然想从发展者的角度简单地在这里发言,MD3中的彩色素,是MD2中的又一个颜色,它们是颜色。

  • in Material design 2, we use MaterialTheme.colors.Xyz to get one color we want. We have dark/light themes, that means two color sets. They always are fixed.
  • in Material design 3, it introduces color tonal, which are dynamic color sets include dark and light. There are functions dynamicDarkColorScheme & dynamicLightColorScheme to get them. They are not fixed or predefined.
  • in the meantime, we can create our own color tonal.
  • in a word, colorScheme equals colors(color set).




相关问题
Android - ListView fling gesture triggers context menu

I m relatively new to Android development. I m developing an app with a ListView. I ve followed the info in #1338475 and have my app recognizing the fling gesture, but after the gesture is complete, ...

AsyncTask and error handling on Android

I m converting my code from using Handler to AsyncTask. The latter is great at what it does - asynchronous updates and handling of results in the main UI thread. What s unclear to me is how to handle ...

Android intent filter for a particular file extension?

I want to be able to download a file with a particular extension from the net, and have it passed to my application to deal with it, but I haven t been able to figure out the intent filter. The ...

Android & Web: What is the equivalent style for the web?

I am quite impressed by the workflow I follow when developing Android applications: Define a layout in an xml file and then write all the code in a code-behind style. Is there an equivalent style for ...

TiledLayer equivalent in Android [duplicate]

To draw landscapes, backgrounds with patterns etc, we used TiledLayer in J2ME. Is there an android counterpart for that. Does android provide an option to set such tiled patterns in the layout XML?

Using Repo with Msysgit

When following the Android Open Source Project instructions on installing repo for use with Git, after running the repo init command, I run into this error: /c/Users/Andrew Rabon/bin/repo: line ...

Android "single top" launch mode and onNewIntent method

I read in the Android documentation that by setting my Activity s launchMode property to singleTop OR by adding the FLAG_ACTIVITY_SINGLE_TOP flag to my Intent, that calling startActivity(intent) would ...

From Web Development to Android Development

I have pretty good skills in PHP , Mysql and Javascript for a junior developer. If I wanted to try my hand as Android Development do you think I might find it tough ? Also what new languages would I ...

热门标签