Android Academy · 课时

颜色与 MaterialTheme

Q: 「颜色与 MaterialTheme」这节课中我会学到什么？

应用一致的主题样式。 你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

应用一致的主题样式。

颜色与 MaterialTheme 是 CoddyKit 上的免费 Android Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Android Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Android Academy 课程共包含 4 节课。

Compose 中的颜色

Compose 使用 Color 类表示颜色。其中有一些现成的值，例如 Color.Red 和 Color.Blue。

您可以将 Color 传递给 Text 的颜色或 background 等参数。

Text(
    text = "Hi",
    color = Color.Blue
)

自定义颜色值

使用 Color(0xFFRRGGBB) 中的十六进制代码创建任意颜色。开头的两位 FF 表示完全不透明。

例如，0xFF6200EE 是一种紫色。

val purple = Color(0xFF6200EE)
Text("Brand", color = purple)

背景颜色

使用 background 修饰符在可组合项后方绘制背景。请添加 padding，避免内容贴住边缘。

顺序很重要：先设置 background，再设置 padding，背景就会填满 padding 区域。

Text(
    text = "Box",
    modifier = Modifier
        .background(Color.Yellow)
        .padding(8.dp)
)

什么是 MaterialTheme？

MaterialTheme 是一个集中管理应用颜色、字体和形状的系统。

可组合项会从中读取这些设置，因此整个应用能够保持一致，也更容易重新设置样式。

MaterialTheme {
    Text("Themed app")
}

主题颜色方案

主题的 colorScheme 提供了带名称的角色，例如 primary、secondary 和 background。

读取这些角色，而不是使用固定颜色，就可以在一个地方更改整体外观。

Text(
    text = "Primary",
    color = MaterialTheme.colorScheme.primary
)

Primary 与 onPrimary

每种主要颜色都有一个用于其上方文字的 on 配套颜色，例如 onPrimary。

使用 primary 作为背景、使用 onPrimary 作为文字，可以确保对比度清晰易读。

Box(
    Modifier.background(MaterialTheme.colorScheme.primary)
) {
    Text("Label", color = MaterialTheme.colorScheme.onPrimary)
}

主题排版

MaterialTheme 还会在 typography 中保存文字样式，例如 titleLarge 和 bodyMedium。

将其中一种样式传给 Text 的 style 参数，即可让文字大小和风格保持一致。

Text(
    text = "Heading",
    style = MaterialTheme.typography.titleLarge
)

浅色和深色方案

您可以使用 lightColorScheme() 或 darkColorScheme() 创建颜色方案，再将其传给 MaterialTheme。

切换颜色方案后，应用就能同时支持浅色和深色模式。

MaterialTheme(
    colorScheme = darkColorScheme()
) {
    Text("Dark mode")
}

自定义颜色方案

创建颜色方案时，通过指定名称即可覆盖相应角色。这里的 primary 会变成自定义的青绿色。

所有读取 colorScheme.primary 的地方都会自动更新。

val scheme = lightColorScheme(
    primary = Color(0xFF018786)
)

为什么要使用主题？

到处硬编码颜色会让重新设计变得十分麻烦。从 MaterialTheme 读取颜色后，只需修改一处，就能更新整个应用。

它还有助于无障碍设计，因为 on 系列颜色可以保持良好的对比度。

Surface 与 Background

Surface 可组合项会在内容后方应用主题背景色和高度效果。

这是为卡片或屏幕设置合适基础颜色的简洁方式。

Surface(
    color = MaterialTheme.colorScheme.background
) {
    Text("On surface")
}

快速检查

检验您对颜色和主题的理解。

回顾

您已经学会了使用 Color 类、自定义十六进制颜色和 background 修饰符。MaterialTheme 将 colorScheme、typography 和形状集中在一起。

读取 primary 和 onPrimary 等角色可以保持对比度和一致性，并支持浅色或深色方案。

恭喜您完成样式课程！

常见问题解答

「颜色与 MaterialTheme」课时是免费的吗？

是的 — 「颜色与 MaterialTheme」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Android Academy 课程的其余内容，请升级到 CoddyKit PRO。 Android Academy 课程共包含 4 节课。

「颜色与 MaterialTheme」这节课中我会学到什么？

应用一致的主题样式。你通过在浏览器中直接运行的动手代码来练习 Android Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Android Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Android Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「颜色与 MaterialTheme」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Android Academy 课中编写并运行代码吗？

能。每节 Android Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Android Academy