美文网首页Androidcompose
Android compose 中ColorScheme&Typ

Android compose 中ColorScheme&Typ

作者: Persisten | 来源:发表于2024-07-14 20:06 被阅读0次

ColorScheme和Typography都是compose MaterialTheme中的参数,ColorScheme中定义一组颜色,构成应用程序的颜色主题;Typography定义了对比鲜明的文字排版。

作用:

1、一致性:通过定义MaterialTheme,可以帮助app实现更加一致性的视觉外观
2、主题切换:支持明暗模式切换或其他主题变体时,ColorScheme 可以轻松调整以适应不同的环境需求。

ColorScheme参数解释:

class ColorScheme(
    /* 主色系 */
    primary: Color, // 主色,用于应用的大部分 UI 元素,如按钮、选中的选项卡等。
    onPrimary: Color, // 在主色上清晰显示的颜色,通常用于文本或图标。
    primaryContainer: Color, // 主色的容器色,用于需要主色变体的元素背景。
    onPrimaryContainer: Color, // 在主色容器上清晰显示的颜色,通常用于文本或图标。
    inversePrimary: Color, // 主色的反色,用于在对比背景上需要主色时。
 
    /* 次色系 */
    secondary: Color, // 次级色,用于补充主色或用作次要的 UI 元素。
    onSecondary: Color, // 在次级色上清晰显示的颜色,通常用于文本或图标。
    secondaryContainer: Color, // 次级色的容器色,用于需要次级色变体的元素背景。
    onSecondaryContainer: Color, // 在次级色容器上清晰显示的颜色,通常用于文本或图标。
 
    /* 第三色系 */
    tertiary: Color, // 第三色,用于需要注意或区分的 UI 元素。
    onTertiary: Color, // 在第三色上清晰显示的颜色,通常用于文本或图标。
    tertiaryContainer: Color, // 第三色的容器色,用于背景或填充色。
    onTertiaryContainer: Color, // 在第三色容器上清晰显示的颜色,通常用于文本或图标。
 
    /* 背景与表面色 */
    background: Color, // 背景色,用于页面或组件的背景。
    onBackground: Color, // 在背景色上清晰显示的颜色,通常用于文本或图标。
    surface: Color, // 表面色,用于卡片、菜单和其他元素的背景。
    onSurface: Color, // 在表面色上清晰显示的颜色,通常用于文本或图标。
    surfaceVariant: Color, // 表面色的变体,用于需要区分的表面元素。
    onSurfaceVariant: Color, // 在表面色变体上清晰显示的颜色。
    surfaceTint: Color, // 表面色的着色,通常用于表面元素的图标或小组件。
    inverseSurface: Color, // 表面色的反色,用于需要高对比度的背景。
    inverseOnSurface: Color, // 在反表面色上清晰显示的颜色。
 
    /* 错误处理色 */
    error: Color, // 错误色,用于指示错误或警告状态,如输入校验失败。
    onError: Color, // 在错误色上清晰显示的颜色,通常用于错误文本或图标。
    errorContainer: Color, // 错误色的容器色,用于错误状态的背景。
    onErrorContainer: Color, // 在错误容器色上清晰显示的颜色。
 
    /* 其他 */
    outline: Color, // 用于元素边框的颜色。
    outlineVariant: Color, // 边框颜色的变体,可能用于更细微的分界线。
    scrim: Color, // 遮罩层颜色,通常用于遮盖或暗化背景中的内容。
) {
    ...
}

源码(AI翻译)

一个颜色方案包含了所有为 MaterialTheme 命名的颜色参数。颜色方案旨在和谐一致,确保可访问的文本,并将 UI 元素和表面彼此区分开。有两个内置的基线方案,即 lightColorScheme 和 darkColorScheme,可以按原样使用或进行自定义。
材料颜色系统和自定义方案为颜色提供了默认值,作为自定义的起点。
要了解更多关于颜色的信息,请参见材料设计颜色。
属性:
primary - 主要颜色是在您的应用程序的屏幕和组件上最频繁显示的颜色。
onPrimary - 在主要颜色上显示的用于文本和图标的颜色。
primaryContainer - 容器的首选色调颜色。
onPrimaryContainer - 应在 primaryContainer 顶部使用的内容的颜色(和状态变体)。
inversePrimary- 在需要反转颜色方案的地方用作“主要”颜色,例如 Snackbar 上的按钮。

secondary -次要颜色为您的产品提供了更多的强调和区分方式。次要颜色最适合:浮动操作按钮、选择控件,如复选框和单选按钮、突出显示选定的文本、链接和标题
onSecondary - 在次要颜色上显示的用于文本和图标的颜色。
secondaryContainer - 用于容器的色调颜色。
onSecondaryContainer - 应在 secondaryContainer 顶部使用的内容的颜色(和状态变体)。
tertiary - 可以用来平衡主要和次要颜色,或者对诸如输入字段等元素给予更高的关注。
onTertiary - 在三级颜色上显示的用于文本和图标的颜色。
tertiaryContainer - 用于容器的色调颜色。
onTertiaryContainer - 应在 tertiaryContainer 顶部使用的内容的颜色(和状态变体)。
background - 出现在可滚动内容后面的背景颜色。
onBackground - 在背景颜色上显示的用于文本和图标的颜色。
surface - 影响组件表面的表面颜色,例如卡片、表格和菜单。
onSurface - 在表面颜色上显示的用于文本和图标的颜色。
surfaceVariant - 具有与表面类似用途的另一种颜色选项。
onSurfaceVariant - 可用于表面上方内容的颜色(和状态变体)。
surfaceTint - 此颜色将由应用色调提升的组件使用,并在表面之上应用。海拔越高,使用这种颜色就越多。
inverseSurface - 与表面形成鲜明对比的颜色。对于位于其他具有表面颜色的表面之上的表面非常有用。
inverseOnSurface - 与 inverseSurface 形成良好对比的颜色。对于位于具有 inverseSurface 的容器之上的内容很有用。
error - 用于指示组件中的错误,例如文本字段中的无效文本的错误颜色。
onError - 在错误颜色上显示的用于文本和图标的颜色。
errorContainer - 错误容器的首选色调颜色。
onErrorContainer - 应在 errorContainer 顶部使用的内容的颜色(和状态变体)。
outline - 用于边界的微妙颜色。轮廓颜色角色为可访问性目的增加了对比度。
outlineVariant - 在不需要强烈对比度时用于边界的实用颜色,用于装饰元素的边界。
scrim - 遮挡内容的蒙板颜色。
surfaceBright - 始终比表面更亮的表面变体,无论是在亮模式还是暗模式下。
surfaceDim - 始终比表面更暗的表面变体,无论是在亮模式还是暗模式下。
surfaceContainer - 影响组件容器的表面变体,例如卡片、表格和菜单。
surfaceContainerHigh - 比 surfaceContainer 具有更高强调的容器的表面变体。将此角色用于需要比 surfaceContainer 更强调的内容。
surfaceContainerHighest - 比 surfaceContainerHigh 具有更高强调的容器的表面变体。将此角色用于需要比 surfaceContainerHigh 更强调的内容。
surfaceContainerLow - 比 surfaceContainer 强调程度低的容器的表面变体。将此角色用于需要比 surfaceContainer 更少强调的内容。
surfaceContainerLowest - 比 surfaceContainerLow 强调程度低的容器的表面变体。将此角色用于需要比 surfaceContainerLow 更少强调的内容。

Typography
源码(AI翻译)

displayLarge:显示大 - 显示大是最大的显示文本。
displayMedium:显示中 - 显示中是第二大的显示文本。
displaySmall:显示小 - 显示小是最小的显示文本。
headlineLarge:标题大 - 标题大是最大的标题,专为简短、重要的文本或数字保留。对于标题,您可以选择富有表现力的字体,例如展示、手写或手写体风格。这些非传统的字体设计具有细节和复杂性,有助于吸引眼球。
headlineMedium:标题中 - 标题中是第二大的标题,专为简短、重要的文本或数字保留。对于标题,您可以选择富有表现力的字体,例如展示、手写或手写体风格。这些非传统的字体设计具有细节和复杂性,有助于吸引眼球。
headlineSmall:标题小 - 标题小是最小的标题,专为简短、重要的文本或数字保留。对于标题,您可以选择富有表现力的字体,例如展示、手写或手写体风格。这些非传统的字体设计具有细节和复杂性,有助于吸引眼球。
titleLarge:标题大 - 标题大是最大的标题,通常为长度较短的中等强调文本保留。衬线或无衬线字体非常适合副标题。
titleMedium:标题中 - 标题中是第二大的标题,通常为长度较短的中等强调文本保留。衬线或无衬线字体非常适合副标题。
titleSmall:标题小 - 标题小是最小的标题,通常为长度较短的中等强调文本保留。衬线或无衬线字体非常适合副标题。
bodyLarge:主体大 - 主体大是最大的主体,通常用于长篇写作,因为它适用于较小的文本尺寸。对于较长的文本部分,建议使用衬线或无衬线字体。
bodyMedium:主体中 - 主体中是第二大的主体,通常用于长篇写作,因为它适用于较小的文本尺寸。对于较长的文本部分,建议使用衬线或无衬线字体。
bodySmall:主体小 - 主体小是最小的主体,通常用于长篇写作,因为它适用于较小的文本尺寸。对于较长的文本部分,建议使用衬线或无衬线字体。
labelLarge:标签大 - 标签大文本是用于不同类型按钮(如文本、轮廓和包含按钮)以及选项卡、对话框和卡片的行动呼吁。按钮文本通常为无衬线,使用全部大写文本。
labelMedium:标签中 - 标签中是最小字体之一。它很少用于注释图像或介绍标题。
labelSmall:标签小 - 标签小是最小字体之一。它很少用于注释图像或介绍标题。

相关文章

网友评论

    本文标题:Android compose 中ColorScheme&Typ

    本文链接:https://www.haomeiwen.com/subject/kppchjtx.html