今天是Compose Material 3的第一个稳定版本。该库允许您使用Material Design 3构建Jetpack Compose UI，这是Material Design的下一个发展。你可以从今天开始在你的应用程序中使用Material Design 3！

注：术语“Material Design 3”、“Material 3,”和“M3”可互换使用。

Material 3包括更新的主题和组件，独家功能，如动态颜色，并设计为符合最新的Android视觉风格和系统UI。

使用Material Design 3主题的多个应用程序

通过向构建中添加“Compose Material 3”依赖项，可以开始在应用程序中使用“Material Design 3”。build.gradle添加如下内容：

// Add dependency in module build.gradle
implementation “androidx.compose.material3:material3:$material3_version” 

注：请参阅Compose Material 3版本页面上的最新M3版本。

颜色方案

Material 3带来了广泛、细粒度的颜色定制，并提供了开箱即用的浅色和深色方案支持。“Material主题生成器”允许您使用核心颜色生成自定义颜色方案，并可以选择导出“合成主题”代码。您可以阅读更多关于配色方案和配色角色的信息。

Material主题生成器导出Material 3颜色方案

动态颜色

动态颜色来源于用户的墙纸。这些颜色可以应用于应用程序和系统UI。

动态颜色可在Android 12（API级别31）及以上版本上使用。如果动态颜色可用，则可以设置动态ColorScheme。如果没有，您应该返回使用自定义的浅色或深色配色方案。

ColorScheme类提供了生成器函数，用于创建动态和自定义明 暗 颜色方案：

Theme.kt

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

MaterialTheme(
   colorScheme = colorScheme,
   typography = typography,
   shapes = shapes
) {
  // M3 App content
}

Material组件

Compose Material 3 API包含广泛、先进的Material 组件，并为未来版本提供更多计划。许多Material组件，如Card、RadioButton和CheckBox，不再被认为是实验性的；它们的API是稳定的，可以在没有ExperimentalMaterial3Api 注解的情况下使用。

M3 Switch组件具有全新的UI刷新功能，具有可访问性兼容的最小触摸目标大小支持、颜色映射和 switch thumb中的可选图标支持。触摸目标更大，并且 thumb大小随着用户交互而增加，从而向用户提供 thumb正在交互的反馈。

Material 3 Switch thumb interaction

Switch(
      checked = isChecked,
      onCheckedChange = { /*...*/ },
      thumbContent = {
          Icon(
              imageVector = Icons.Default.Check,
              contentDescription = stringResource(id = R.string.switch_check)
          )
      },
  )

导航抽屉组件现在为内容提供包装好的sheets，以独立更改颜色、形状和标高。

ModalNavigationDrawer with content wrapped in ModalDrawerSheet

ModalNavigationDrawer {
    ModalDrawerSheet(
        drawerShape = MaterialTheme.shapes.small,
        drawerContainerColor = MaterialTheme.colorScheme.primaryContainer,
        drawerContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
        drawerTonalElevation = 4.dp,
    ) {
        DESTINATIONS.forEach { destination ->
            NavigationDrawerItem(
                selected = selectedDestination == destination.route,
                onClick = { ... },
                icon = { ... },
                label = { ... }
            )
        }
    }
}

除了现有的应用栏之外，我们还有一个全新的CenterAlignedTopAppBar。这可以用于应用程序中的主根页面：您可以显示应用程序名称或带有主页和动作图标的页面标题。

Material CenterAlignedTopAppBar with home and action items

val shapes = Shapes(
   extraSmall = RoundedCornerShape(4.dp),
   small = RoundedCornerShape(8.dp),
   medium = RoundedCornerShape(12.dp),
   large = RoundedCornerShape(16.dp),
   extraLarge = RoundedCornerShape(28.dp)
)

请参阅Compose Material 3 API参考概述中的最新M3组件和布局。关注发布页面，了解新的和更新的API。

Typography

Typography大致分为以下几类

• Display
• Headline
• Title
• Body
• Label
  每种类型都有大、中、小尺寸，总共提供15种文本样式变体。

Typography构造函数为每个样式提供了默认值，因此您可以省略任何不想自定义的参数：

// Add dependency in module build.gradle
implementation "androidx.compose.material3:material3-window-size-class:$material3_version"

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

Scaffold(
    contentWindowInsets = WindowInsets(16.dp)
) {
    // Scaffold content
}

Shapes

Material 3shape scale定义了容器角的样式，提供了从正方形到全圆形的圆度范围。
shape按照尺寸不同分为以下几类：

• Extra small
• Small
• Medium
• Large
• Extra large
  
  Material Design 3 shapes used in various components as default value

每个形状都有一个默认值，但您可以覆盖它：

您可以阅读更多关于应用形状的信息。

Window size classes

Jetpack Compose和Material 3提供了窗口大小的组件，可以帮助您的应用程序自适应。首先，可以将Compose Material 3窗口大小类依赖项添加到build.gradle文件：

窗口大小类将大小分组为标准大小的桶，这些桶是断点，旨在针对大多数特殊情况优化应用程序。

WindowWidthSize Class for grouping devices in different size buckets
请参阅Reply Compose示例以了解有关自适应应用程序和窗口大小类实现的更多信息。

Window insets support

M3组件，如顶部应用程序栏、导航抽屉、栏和导轨，包括对窗口嵌入的内置支持。这些组件单独使用或与Scaffold一起使用时，将自动处理由状态栏、导航栏和系统UI的其他部分确定的插入。

Scaffold现在支持contentWindowInsets参数，该参数可以帮助为脚手架内容指定插入。

只有当Scaffold中不存在topBar或bottomBar时，才考虑Scaffold嵌入，因为这些组件在组件级别处理嵌入。

Resources

随着Compose Material 3达到稳定状态，现在是开始学习它并准备在应用程序中采用它的好时机。查看下面的资源以开始。

• 完全的Material 3和Compose示例应用Reply
• Material 3指南，开始在应用使用Material 3
• Material 2 到 Material 3的迁移指南
• Jetpack Compose Samples GitHub仓库，您可以在其中使用Material 3找到各种最新的示例
• StackOverflow上的Compose社区和Kotlin Slack小组
• bug跟踪器，您可以报告问题并跟踪功能请求

Reference

https://material.io/blog/material-3-compose-stable