实战 | 在应用中使用 Compose Material 3

Material You 是下一代 Material Design 的发展方向，也是一种全新的设计愿景: 方便您打造个性化的样式设计、满足各种需求并自适应各种屏幕；Jetpack Compose 是用于构建原生 Android 界面的新款现代工具包，可以帮助您更快地构建更出色的应用。

您可能对现有的 Compose Material 库十分了解，它基于 Material Design 2 规范，其中包括了 Material 主题、Material 组件和深色主题等功能。新的 Compose Material 3 Jetpack 库 现已发布 Alpha 版，它基于 Material Design 3 规范，包括了更新后的主题、组件以及动态配色这类 Material You 个性化功能，旨在与新的 Android 12 视觉样式和系统界面相得益彰。接下来，我们将使用 Jetchat 来说明如何应用 Material Design 3 和 Material You。

如果您更喜欢通过视频了解此内容，请 点击此处 查看。

Jetchat 是一款使用 Jetpack Compose 构建的示例聊天应用，目前使用 Material Design 2 中的主题和组件。我们将在 Jetchat 中，应用由我们的设计人员提供的 Compose Material 3 库的更新，其中包括更广泛的色调颜色、对组件的最新更新，甚至包括动态配色以使应用更加个性化，从而使其更加美观。

△ Jetchat 应用

在开始前，我们首先要将 Material 3 的依赖项添加到模块的 build.gradle 文件中:

implementation 'androidx.compose.material3:material3:1.0.0-alpha01'
1
AI写代码

MaterialTheme

我们先来看看 MaterialTheme。现有的 MaterialTheme 可组合项是 Material Design 2 的实现，它通过调整颜色、排版和形状系统，可以在整个应用内实现对 Material 2 组件进行主题设置。我们为 Material Design 3 引入了新版本的 MaterialTheme，可以通过调整配色方案和排版系统对 Material 3 组件的主题进行设置，而更新 Shape 的功能也会在不久之后加入。

import androidx.compose.material3.MaterialTheme
 
@Composable
fun MaterialTheme (
    colorScheme: ColorScheme,
    typography: Typography,
    // 更新 Shape 的功能即将到来
    content: @Composable () -> Unit
)
1
2
3
4
5
6
7
8
9
AI写代码

首先，我们看一下配色方案。Material Design 3 将颜色细分到特定名称的颜色槽中。比如 Material 3 组件使用的 Primary、Background 和 Error，这些颜色槽共同形成一种配色方案。部分颜色槽来自 Material Design 2，同时也引入了一些新的颜色槽以扩充整体调色板。这些颜色槽都包含了美观的全新默认基准颜色，在浅色和深色主题上都可以应用。

△ 绿色框为 Material You 中新加入的颜色槽

上面这些颜色取自一组色调调色板，例如，我们来看一下 Primary 颜色槽。该颜色槽使用的颜色值来自 Primary 色调调色板中的不同色调，并根据浅色和深色主题选择相应的色调，以满足无障碍功能要求。

△ Primary 颜色槽

Compose 使用新的 ColorScheme 类对此进行建模，其参数以 Material Design 3 配色方案中的颜色槽命名。您可以使用 lightColorScheme 函数创建具有浅色基准值的 ColorScheme 实例；也可以使用自定义颜色覆盖默认值，或者使用 darkColorScheme 设置深色默认基准值；您还可以使用 isSystemInDarkTheme 工具函数，根据系统设置在浅色和深色配色方案之间切换。

val AppLightColorScheme = lightColorScheme (
    primary = Color(...),
    // secondary、tertiary 等等
    // 具有浅色基准值的 ColorScheme 实例
)
 
val AppDarkColorScheme = darkColorScheme(
    // primary、secondary、tertiary 等等
    // 具有深色基准值的 ColorScheme 实例
）
 
val dark = isSystemInDarkTheme()
val colorScheme = if (dark) AppDarkC
1
2
3
4
5
6
7
8
9
10
11
12
AI写代码