作者 /Android 開發技術推廣工程師 Gurupreet Singh

首個穩定版 Compose Material 3 現已發布。借助此內容庫，您可以使用 Material Design 3 (新一代 Material Design) 構建 Jetpack Compose 界面。立即開始在應用中使用 Material Design 3 吧！

• Compose Material 3https://developer.android.google.cn/reference/kotlin/androidx/compose/material3/package-summary
• Material Design 3https://m3.material.io/

△ 多個使用 Material Design 3 主題的應用

// 在模塊 build.gradle 中添加依賴項


執行“androidx.compose.material3$material3_version”

https://developer.android.google.cn/jetpack/androidx/releases/compose-material3

配色方案

△用于導出 Material 3 配色方案的 Material Theme Builder

• Material Theme Builderhttps://material.io/material-theme-builder
• 更多關于配色方案及顏色角色的內容https://m3.material.io/styles/color/the-color-system/key-colors-tones

動態配色

• 動態配色

  https://m3.material.io/styles/color/dynamic-color/overview

• Reply 示例

  https://github.com/android/compose-samples/tree/main/Reply

• 深色

  https://developer.android.google.cn/reference/kotlin/androidx/compose/material3/package-summary#dynamiclightcolorscheme

• 淺色

  https://developer.android.google.cn/reference/kotlin/androidx/compose/material3/package-summary#dynamicdarkcolorscheme

// 動態配色適用于 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 應用內容

Material 組件

Compose Material 3 API 包含大量全新和經過優化的 Material 組件，且我們計劃在未來的版本中添加更多組件。許多 Material 組件 (如 Card、RadioButton 和 CheckBox) 已不再是實驗性組件；這些組件的 API 十分穩定，可以在沒有 ExperimentalMaterial3Api 注釋的情況使用。

M3 Switch 組件采用全新界面，支持符合無障礙性的最小觸摸目標尺寸、顏色映射，以及不同的 Switch 滑塊圖標選項。該界面增加了觸摸目標的尺寸，同時增加了用戶互動時的滑塊尺寸，從而為用戶提供反饋: 滑塊正在與之互動。

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

抽屜式導航欄組件現在提供封裝容器表，以便單獨更改內容的顏色、形狀和高度。

△ModalNavigationDrawer

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(
          title = {
              Text(stringResources(R.string.top_stories))
          },
          scrollBehavior = scrollBehavior,
          navigationIcon =  { /* Navigation Icon */},
          actions = { /* App bar actions */}
)

• Compose Material 3 API 參考文檔概覽

  https://developer.android.google.cn/reference/kotlin/androidx/compose/material3/package-summary#overview

• 版本發布頁面

  https://developer.android.google.cn/jetpack/androidx/releases/compose-material3

排版

• 顯示

• 大標題
• 小標題
• 正文
• 標簽

val typography = 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
  ),
  ...
}

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

• TextStylehttps://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/TextStyle
• 字體相關https://developer.android.google.cn/reference/kotlin/androidx/compose/ui/text/font/package-summary

形狀

Material 3 形狀比例定義了容器邊角的樣式，提供從方形到正圓形的一系列不同角度。

• 超小號

• 小號

• 中號

• 大號

• 超大號

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

您可以前往官方網站，閱讀更多關于應用形狀的內容:

窗口大小類

Jetpack Compose 和 Material 3 提供了幫助您的應用實現自適應的窗口大小工件。如需開始使用，您可以將 Compose Material 3 窗口大小類依賴項添加到您的 build.gradle 文件中:

// 在模塊 build.gradle 中添加依賴項


implementation "androidx.compose.material3$material3_version"

窗口大小類將大小劃分到標準大小的存儲分區中，這些存儲分區是旨在針對大部分特殊情況優化應用的斷點。

△用于將設備劃分到不同大小的存儲分區中的 WindowWidthSize 類

您可以查看 Reply Compose 示例，詳細了解自適應應用和窗口大小類的實現:

窗口邊襯區支持

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

資源

隨著 Compose Material 3 迎來穩定版本，現在是全面了解該內容庫并準備好在應用中使用的絕佳時機。您可以查看下方資源，即刻開始使用。

• 完整的 Material 3 和 Compose 示例 Reply:

  https://github.com/android/compose-samples/tree/main/Reply
• 開始將 Material 3 添加至您應用的指南:https://developer.android.google.cn/jetpack/compose/themes/material3
• Material 2 升級至 Material 3 的遷移指南:

  https://developer.android.google.cn/jetpack/compose/themes/material2-material3

• Jetpack Compose 示例 GitHub 代碼庫，您可以在其中找到各種使用 Material 3 的最新示例:

  https://github.com/android/compose-samples

• StackOverflow中的 Compose 社區:

  https://stackoverflow.com/questions/tagged/material-desig

• Kotlin Slack 群組

  http://slack.kotlinlang.org/

• 您可以在錯誤追蹤器，將發現的問題分享給我們并追蹤功能請求:

  https://issuetracker.google.com/issues/new?component=742043

歡迎您持續關注我們，及時了解更多開發技術和產品更新等資訊動態。

?