Compose 中的 Material Design 3

Jetpack Compose 提供了 Material Design 3 的实现，后者是 Material Design 的下一代产品。Material 3 中包括了更新后的主题和组件，以及动态配色等 Material You 个性化功能，旨在与 Android 12 及更高版本上的全新视觉风格和系统界面相得益彰。

注意：“Material Design 3”、“Material 3”和“M3”这三个术语可以互换。现有的 Material Design 规范和相应的 androidx.compose.material 库称为“Material Design 2”“Material 2”或“M2”。

下面，我们将以 Reply 示例应用为例，演示 Material Design 3 的实现。Reply 示例完全基于 Material Design 3。

图 1。使用 Material Design 3 的 Reply 示例应用

依赖项

如需开始在 Compose 应用中使用 Material 3，请将 Compose Material 3 依赖项添加到 build.gradle 文件中：

implementation "androidx.compose.material3:material3:$material3_version"

添加依赖项后，您就可以开始向应用添加 Material Design 系统，包括颜色、排版和形状。

实验性 API

某些 M3 API 被视为实验性 API。在这种情况下，您需要使用 ExperimentalMaterial3Api 注解在函数或文件级别指定 OptIn：

// import androidx.compose.material3.ExperimentalMaterial3Api
@Composable
fun AppComposable() {
    // M3 composables
}
Material3Snippets.kt

Material 主题设置

M3 主题包含以下子系统：配色方案、排版和形状。当您自定义这些值时，您所做的更改会自动反映在您用来构建应用的 M3 组件中。

图 2. Material Design 的子系统：颜色、排版和形状

Jetpack Compose 使用 M3 MaterialTheme 可组合项实现这些概念：

MaterialTheme(
    colorScheme = /* ...
    typography = /* ...
    shapes = /* ...
) {
    // M3 app content
}
Material3Snippets.kt

如需为应用内容设置主题，请定义特定于应用的配色方案、排版和形状。

配色方案

配色方案的基础是五种关键颜色。其中每种颜色都对应 Material 3 组件使用的 13 色调调色板之一。例如，以下是回复的浅色主题配色方案：

图 3. Reply 示例应用浅色主题

详细了解配色方案和颜色角色。

生成配色方案

虽然您可以手动创建自定义 ColorScheme，但使用品牌中的源颜色通常更容易生成配色方案。您可以使用 Material 主题构建器工具执行此操作，并且可以选择导出 Compose 主题代码。系统会生成以下文件：

• Color.kt 包含主题的各种颜色，以及为浅色和深色主题定义的所有角色。

val md_theme_light_primary = Color(0xFF476810)
val md_theme_light_onPrimary = Color(0xFFFFFFFF)
val md_theme_light_primaryContainer = Color(0xFFC7F089)
// ..
// ..

val md_theme_dark_primary = Color(0xFFACD370)
val md_theme_dark_onPrimary = Color(0xFF213600)
val md_theme_dark_primaryContainer = Color(0xFF324F00)
// ..
// ..
Material3Snippets.kt

• Theme.kt 包含浅色和深色配色方案以及应用主题的设置。

private val LightColorScheme = lightColorScheme(
    primary = md_theme_light_primary,
    onPrimary = md_theme_light_onPrimary,
    primaryContainer = md_theme_light_primaryContainer,
    // ..
)
private val DarkColorScheme = darkColorScheme(
    primary = md_theme_dark_primary,
    onPrimary = md_theme_dark_onPrimary,
    primaryContainer = md_theme_dark_primaryContainer,
    // ..
)

@Composable
fun ReplyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colorScheme =
        if (!darkTheme) {
            LightColorScheme
        } else {
            DarkColorScheme
        }
    MaterialTheme(
        colorScheme = colorScheme,
        content = content
    )
}
Material3Snippets.kt

如需支持浅色主题和深色主题，请使用 isSystemInDarkTheme()。根据系统设置，定义要使用的配色方案：浅色还是深色。

动态配色方案

动态配色是 Material You 的关键部分，使用此功能时，算法会从用户的壁纸中派生自定义颜色，以将其应用到其应用和系统界面。您可以将此调色板作为起始点，来生成浅色和深色配色方案。

图 4. 采用壁纸的动态主题的 Reply 示例应用（左）和默认应用主题（右）

动态颜色适用于 Android 12 及更高版本。如果动态颜色可用，您可以设置动态 ColorScheme。如果不可用，您应回退采用自定义浅色或深色 ColorScheme。

ColorScheme 提供了构建器函数来创建动态浅色或深色配色方案：

// Dynamic color is available on Android 12+
val dynamicColor = Build.VERSION.SDK_INT >= Build.VERSION_CODES.S
val colors = when {
    dynamicColor && darkTheme -> dynamicDarkColorScheme(LocalContext.current)
    dynamicColor && !darkTheme -> dynamicLightColorScheme(LocalContext.current)
    darkTheme -> DarkColorScheme
    else -> LightColorScheme
}
Material3Snippets.kt

颜色的使用

您可以通过 MaterialTheme.colorScheme 在应用中访问 Material 主题颜色：

Text(
    text = "Hello theming",
    color = MaterialTheme.colorScheme.primary
)
Material3Snippets.kt

每种颜色角色均可在各种位置使用，具体取决于组件的状态、显眼程度和强调效果。

• 主色是基础颜色，用于主要组件，例如显眼的按钮、活动状态和提升 Surface 的色调。
• 辅色关键色用于界面中不太显眼的组件，例如过滤条状标签，并扩大了颜色表达的机会。
• 第三色关键色用于派生对比强调的角色，可用于平衡主色和副色，或者引起用户对某个元素的高度关注。

Reply 示例应用设计在主容器上使用 on-primary-container 颜色，以突出显示所选项。

图 5. 主容器和文本字段采用 on-primary-container 颜色。

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,
    )
}
Material3Snippets.kt

在这里，您可以看到“回复”抽屉中如何使用辅色和第三色来形成对比，以创建强调效果和强调色。

图 6。悬浮操作按钮的第三级容器和第三级容器上的组合。

排版

Material Design 3 定义了一个字体比例，包括改写自 Material Design 2 的文本样式。命名和分组已简化为：显示、大标题、标题、正文和标签，每个都有大号、中号和小号。

图 7. Material Design 3 的默认排版比例

M3	默认字体大小/行高
displayLarge	Roboto 57/64
displayMedium	Roboto 45/52
displaySmall	Roboto 36/44
headlineLarge	Roboto 32/40
headlineMedium	Roboto 28/36
headlineSmall	Roboto 24/32
titleLarge	New- Roboto Medium 22/28
titleMedium	Roboto Medium 16/24
titleSmall	Roboto Medium 14/20
bodyLarge	Roboto 16/24
bodyMedium	Roboto 14/20
bodySmall	Roboto 12/16
labelLarge	Roboto Medium 14/20
labelMedium	Roboto Medium 12/16
labelSmall	New Roboto Medium, 11/16

注意：与 M2 Typography 类不同，M3 Typography 类目前不包含 defaultFontFamily 参数。您将需要在每个单独的 TextStyles 中使用 fontFamily 参数。

定义排版

Compose 提供了 M3 Typography 类以及现有的 TextStyle 和字体相关类，用以对 Material 3 字体比例进行建模。Typography 构造函数可以提供每种样式的默认值，因此您可以省略不希望自定义的任何样式：

val replyTypography = Typography(
    titleLarge = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 22.sp,
        lineHeight = 28.sp,
        letterSpacing = 0.sp
    ),
    titleMedium = TextStyle(
        fontWeight = FontWeight.SemiBold,
        fontSize = 16.sp,
        lineHeight = 24.sp,
        letterSpacing = 0.15.sp
    ),
    // ..
)
// ..
Material3Snippets.kt

图 8。正文大号、正文中号和标签中号，适用于不同的排版用法。

您的产品可能不需要用到 Material Design 字体比例的全部 15 种默认样式。在此示例中，我们选择了五种大小作为缩减后的集合，其余的则略掉。

您可以通过更改 TextStyle 和与字体相关的属性（例如 fontFamily 和 letterSpacing）的默认值来自定义排版。

bodyLarge = TextStyle(
    fontWeight = FontWeight.Normal,
    fontFamily = FontFamily.SansSerif,
    fontStyle = FontStyle.Italic,
    fontSize = 16.sp,
    lineHeight = 24.sp,
    letterSpacing = 0.15.sp,
    baselineShift = BaselineShift.Subscript
),
Material3Snippets.kt

定义 Typography 后，将其传递给 M3 MaterialTheme：

MaterialTheme(
    typography = replyTypography,
) {
    // M3 app Content
}
Material3Snippets.kt

使用文本样式

您可以使用 MaterialTheme.typography 检索提供给 M3 MaterialTheme 可组合项的排版：

Text(
    text = "Hello M3 theming",
    style = MaterialTheme.typography.titleLarge
)
Text(
    text = "you are learning typography",
    style = MaterialTheme.typography.bodyMedium
)
Material3Snippets.kt

如需详细了解 Material 准则，请参阅应用排版。

形状

Material Surface 可以用不同的形状显示。形状能够引导用户注意力、区别组件、传达状态以及呈现品牌风格。

形状比例用于定义容器角的样式，提供从方形到完全圆形的一系列圆润度。

定义形状

Compose 提供带有扩展参数的 M3 Shapes 类来支持新的 M3 形状。M3 形状比例更像字体比例，能够在整个界面中呈现丰富多样的形状。

形状有不同的大小：

• 较小
• 小
• 中号
• 大
• 超大

默认情况下，每个形状都有一个默认值，但您可以替换这些值：

val replyShapes = Shapes(
    extraSmall = RoundedCornerShape(4.dp),
    small = RoundedCornerShape(8.dp),
    medium = RoundedCornerShape(12.dp),
    large = RoundedCornerShape(16.dp),
    extraLarge = RoundedCornerShape(24.dp)
)
Material3Snippets.kt

定义 Shapes 后，您可以将其传递给 M3 MaterialTheme：

MaterialTheme(
    shapes = replyShapes,
) {
    // M3 app Content
}
Material3Snippets.kt

使用形状

您可以为 MaterialTheme 中的所有组件自定义形状比例，也可以按组件进行自定义。

应用中等和大型形状并使用默认值：

Card(shape = MaterialTheme.shapes.medium) { /* card content */ }
FloatingActionButton(
    shape = MaterialTheme.shapes.large,
    onClick = {
    }
) {
    /* fab content */
}
Material3Snippets.kt

图 9。Reply 示例应用中卡片的 Medium 形状和悬浮操作按钮的 Large 形状

在 Compose 中，您还可以使用另外两种形状（RectangleShape 和 CircleShape）。矩形没有边框半径，圆形则会显示完整的圆角边缘：

Card(shape = RectangleShape) { /* card content */ }
Card(shape = CircleShape) { /* card content */ }
Material3Snippets.kt

以下示例展示了应用了默认形状值的部分组件：

图 10。所有 Material 3 组件的默认形状值。

如需详细了解 Material 准则，请参阅应用形状。

强调效果

M3 中的强调效果会使用各种颜色变体及其颜色组合。在 M3 中，您可以通过以下两种方式为界面添加强调效果：

• 同时使用 Surface、surface-variant 和背景以及扩展 M3 颜色系统中的 on-surface、on-surface-variants 颜色。例如，Surface 可以与 on-surface-variant 一起使用，surface-variant 可与 on-surface 一起使用，以提供不同级别的强调效果。

图 11。使用中性色组合进行强调。

• 为文本使用不同粗细的字体。您在上文中了解到，您可以为字体比例提供自定义粗细，以提供不同的强调效果。

bodyLarge = TextStyle(
    fontWeight = FontWeight.Bold
),
bodyMedium = TextStyle(
    fontWeight = FontWeight.Normal
)
Material3Snippets.kt

注意 ：对于 M3 中已停用的状态，仍然可以使用具有 Alpha 值的“on-x”（其中 x 可以是 primary、secondary、surface 等）颜色。

Z 轴高度

Material 3 主要使用色调颜色叠加叠加层来表示高度。这是一种新的方式，用于区分容器和 Surface，增加的色调高度除了使用阴影外，还使用更突出的色调。

图 12。色调高度搭配阴影高度 E

在 Material 3 中，深色主题的高度叠加层也更改为色调颜色叠加层。叠加层颜色来自主要颜色槽。

图 13。Material Design 3 中的阴影高度与色调高度

M3 Surface 是大多数 M3 组件的后备可组合项，同时支持色调和阴影高度：

Surface(
    modifier = Modifier,
    tonalElevation = /*...
    shadowElevation = /*...
) {
    Column(content = content)
}
Material3Snippets.kt

Material 组件

Material Design 附带一组丰富的 Material 组件（例如按钮、条状标签、卡片、导航栏），这些组件已遵循 Material Theming 准则，可帮助您打造美观的 Material Design 应用。您可以立即开始使用具有默认属性的组件。

Button(onClick = { /*..*/ }) {
    Text(text = "My Button")
}
Material3Snippets.kt

M3 提供了同一组件多个版本，可根据强调和注意力在不同角色中使用。

图 14。按钮强调效果（从 FAB、主按钮到文本按钮）

• 用于显示最强调的操作的展开式悬浮操作按钮：

ExtendedFloatingActionButton(
    onClick = { /*..*/ },
    modifier = Modifier
) {
    Icon(
        imageVector = Icons.Default.Edit,
        contentDescription = stringResource(id = R.string.edit),
    )
    Text(
        text = stringResource(id = R.string.add_entry),
    )
}
Material3Snippets.kt

• 用于执行强调操作的填充按钮：

Button(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.view_entry))
}
Material3Snippets.kt

• 用于执行强调度较低的操作的文本按钮：

TextButton(onClick = { /*..*/ }) {
    Text(text = stringResource(id = R.string.replated_articles))
}
Material3Snippets.kt

您可以详细了解 Material 按钮和其他组件。Material 3 提供了各种各样的组件套件，例如按钮、应用栏、导航组件，这些组件专为不同的用例和屏幕尺寸而设计。

导航组件

Material 还提供了多种导航组件，可帮助您根据不同的屏幕尺寸和状态来实现导航栏。

如果您希望定位到 5 个或更少的目标平台，则应针对小屏设备使用 NavigationBar：

NavigationBar(modifier = Modifier.fillMaxWidth()) {
    Destinations.entries.forEach { replyDestination ->
        NavigationBarItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}
Material3Snippets.kt

NavigationRail 适用于处于横屏模式的中小型平板电脑或手机。它为用户提供人体工学设计，并改善这些设备的用户体验。

NavigationRail(
    modifier = Modifier.fillMaxHeight(),
) {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { }
        )
    }
}
Material3Snippets.kt

图 15。BottomNavigationBar（左）和 NavigationRail（右）的回复展示

在默认主题中同时使用这两种方式回复，以便为所有设备尺寸提供沉浸式用户体验。

NavigationDrawer 适用于中到大型平板电脑，因为您有足够的空间来显示详细信息。您可以将 PermanentNavigationDrawer 或 ModalNavigationDrawer 与 NavigationRail 结合使用。

PermanentNavigationDrawer(modifier = Modifier.fillMaxHeight(), drawerContent = {
    Destinations.entries.forEach { replyDestination ->
        NavigationRailItem(
            selected = selectedDestination == replyDestination,
            onClick = { },
            icon = { },
            label = { }
        )
    }
}) {
}
Material3Snippets.kt

图 16。Reply 中展示了永久性抽屉式导航栏

导航选项可提升用户体验、人体工学设计和可单手操作性。 如需详细了解 Material 导航组件，请参阅 Compose 自适应 Codelab。

自定义组件的主题

M3 鼓励个性化和灵活性。所有组件都应用了默认颜色，但会公开灵活的 API，以便根据需要自定义颜色。

大多数组件（例如卡片和按钮）都提供一个默认对象，该对象会公开颜色和高度接口，您可以修改这些接口以自定义组件：

val customCardColors = CardDefaults.cardColors(
    contentColor = MaterialTheme.colorScheme.primary,
    containerColor = MaterialTheme.colorScheme.primaryContainer,
    disabledContentColor = MaterialTheme.colorScheme.surface,
    disabledContainerColor = MaterialTheme.colorScheme.onSurface,
)
val customCardElevation = CardDefaults.cardElevation(
    defaultElevation = 8.dp,
    pressedElevation = 2.dp,
    focusedElevation = 4.dp
)
Card(
    colors = customCardColors,
    elevation = customCardElevation
) {
    // m3 card content
}
Material3Snippets.kt

您可以详细了解如何自定义 Material 3。

系统界面

Material You 的某些部分来自 Android 12 及更高版本上的全新视觉风格和系统界面。发生变化的两个主要方面是涟漪效果和滚动效果。您无需执行任何额外操作即可实施这些更改。

涟漪

现在，按下时，涟漪会使用微小的火花照射表面。Compose Material 涟漪使用 Android 上的底层平台 RippleDrawable，因此，Android 12 及更高版本上提供的火花涟漪适用于所有 Material 组件。

图 17。M2 与 M3 中的涟漪

滚动

滚动现在会在滚动容器的边缘使用拉伸效果。在滚动容器可组合项（例如 Compose Foundation 1.1.0 及更高版本中的 LazyColumn、LazyRow 和 LazyVerticalGrid）中，拉伸滚动默认处于开启状态，无论 API 级别为何。

图 18。在容器边缘使用拉伸效果的滚动

无障碍

Material 组件中内置的无障碍功能标准旨在为包容性产品设计奠定基础。了解产品的无障碍设计可以在所有用户面前提高产品的易用性，包括有以下情况的用户：弱视、失明、听力障碍、认知障碍、运动障碍或情境式障碍（如手臂骨折）。

颜色无障碍功能

动态配色旨在满足颜色对比度无障碍标准。色调调色板系统对于确保任何配色方案默认均易于使用至关重要。

Material 的颜色系统提供标准的色调值和测量方法，可用于实现方便轻松查看的颜色对比度。

图 19。Reply 示例应用：主色调、辅色调和第三色调调色板（从上到下）

所有 Material 组件和动态主题设置都已使用一组色调调色板中的上述颜色角色，这些调色板旨在满足无障碍功能要求。不过，如果您要自定义组件，请务必使用适当的颜色角色，避免不匹配。

在主色上面使用 on-primary，在主容器上使用 on-primary-container，对于其他强调色和中性色也做同样的处理，以向用户提供能够感知的颜色对比度。

在主色上使用第三色容器会导致按钮的对比度较差：

// ✅ Button with sufficient contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.primary,
        contentColor = MaterialTheme.colorScheme.onPrimary
    )
) {
}

// ❌ Button with poor contrast ratio
Button(
    onClick = { },
    colors = ButtonDefaults.buttonColors(
        containerColor = MaterialTheme.colorScheme.tertiaryContainer,
        contentColor = MaterialTheme.colorScheme.primaryContainer
    )
) {
}
Material3Snippets.kt

图 20。足够的对比度（左）与对比度较差（右）

排版无障碍功能

M3 字体比例会更新静态字体比例和值，以提供一个经过简化但可跨设备扩缩的尺寸类别动态框架。

例如，在 M3 中，您可以根据设备情境（例如手机或平板电脑）为“Display Small”分配不同的值。

大屏设备

Material 提供了有关自适应布局和可折叠设备的准则，可让您的应用更易于访问，并改善用户持握大型设备时的工效学体验。

Material 提供了不同类型的导航栏，可帮助您为大型设备提供更好的用户体验。

您可以详细了解 Android 大屏设备应用质量指南，并参阅我们的回复示例，了解自适应和无障碍设计。

了解详情

如需详细了解 Compose 中的 Material 主题设置，请参阅以下资源：

示例应用

• 回复 M3 示例应用

文档

• 在 Compose 中从 Material 2 迁移到 Material 3
• Material Design 指南

API 参考文档和源代码

• Compose Material 3 API 参考文档
• 源代码中的 Compose Material 3 示例

视频

• 使用 Jetpack Compose 实现 Material You