Material 3 Expressive 是 Material Design 的下一个演进版本。它包括更新的主题、组件和个性化功能，例如动态颜色。

本指南重点介绍将应用从 Wear Compose Material 2.5 (androidx.wear.compose) Jetpack 库迁移到 Wear Compose Material 3 (androidx.wear.compose.material3) Jetpack 库。

方法

要将应用代码从 M2.5 迁移到 M3，请遵循 Compose Material 迁移手机指南中描述的相同方法，特别是：

• 您不应长期在单个应用中同时使用 M2.5 和 M3
• 采取分阶段方法

依赖项

M3 具有与 M2.5 不同的软件包和版本

implementation("androidx.wear.compose:compose-material:1.4.0")

implementation("androidx.wear.compose:compose-material3:1.5.0-beta03")

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

Wear Compose Foundation 库版本 1.5.0-beta01 引入了一些旨在与 Material 3 组件配合使用的新组件。同样，Wear Compose Navigation 库中的 SwipeDismissableNavHost 在 Wear OS 6 (API 级别 36) 或更高版本上运行时具有更新的动画。更新到 Wear Compose Material 3 版本时，我们建议同时更新 Wear Compose Foundation 和 Navigation 库

implementation("androidx.wear.compose:compose-foundation:1.5.0-beta03")
implementation("androidx.wear.compose:compose-navigation:1.5.0-beta03")

主题

在 M2.5 和 M3 中，主题可组合项都命名为 MaterialTheme，但导入的包和参数有所不同。在 M3 中，Colors 参数已重命名为 ColorScheme，并引入了 MotionScheme 用于实现过渡。

import androidx.wear.compose.material.MaterialTheme

MaterialTheme(
        colors = AppColors,
        typography = AppTypography,
        shapes = AppShapes,
        content = content
)

import androidx.wear.compose.material3.MaterialTheme

MaterialTheme(
        colorScheme = AppColorScheme,
        typography = AppTypography,
        shapes = AppShapes,
        motionScheme = AppMotionScheme,
        content = content
)

颜色

M3 中的颜色系统与 M2.5 显著不同。颜色参数的数量增加了，它们的名称不同，并且它们与 M3 组件的映射方式也不同。在 Compose 中，这适用于 M2.5 Colors 类、M3 ColorScheme 类以及相关函数

import androidx.wear.compose.material.Colors

val appColorScheme: Colors = Colors(
   // M2.5 Color parameters
)

import androidx.wear.compose.material3.ColorScheme

val appColorScheme: ColorScheme = ColorScheme(
   // M3 ColorScheme parameters
)

下表描述了 M2.5 和 M3 之间的主要区别

动态颜色主题

M3 中的一个新功能是动态颜色主题。如果用户更改表盘颜色，UI 中的颜色也会随之变化。

使用 dynamicColorScheme 函数实现动态配色方案，并提供 defaultColorScheme 作为动态配色方案不可用时的备用方案。

@Composable
fun myApp() {
  val myColorScheme = myBrandColors()
  val dynamicColorScheme = dynamicColorScheme(LocalContext.current)
  MaterialTheme(colorScheme = dynamicColorScheme ?: myBrandColors) {...}
}

排版

M3 中的排版系统与 M2 不同，它包括以下功能

• 九种新的文本样式
• 弹性字体，允许自定义不同字重、字宽和圆角的类型比例

• AnimatedText，它使用弹性字体

import androidx.wear.compose.material.Typography

val Typography = Typography(
   // M2.5 TextStyle parameters
)

import androidx.wear.compose.material3.Typography

val Typography = Typography(
   // M3 TextStyle parameters
)

弹性字体

弹性字体允许设计师指定特定尺寸的字体宽度和字重。

文本样式

以下文本样式在 M3 中可用。M3 的各种组件默认使用这些样式。

形状

M3 中的形状系统与 M2 不同。形状参数的数量增加了，它们的命名不同，并且它们与 M3 组件的映射方式也不同。以下形状尺寸可用

• 超小
• 小
• 中
• 大
• 超大

在 Compose 中，这适用于 M2 Shapes 类和 M3 Shapes 类

import androidx.wear.compose.material.Shapes

val Shapes = Shapes(
   // M2.5 Shapes parameters
)

import androidx.wear.compose.material3.Shapes

val Shapes = Shapes(
   // M3 Shapes parameters
)

使用 从 Material 2 迁移到 Compose 中的 Material 3 中的 Shapes 参数映射作为起点。

形状变形

M3 引入了形状变形：形状现在会根据交互进行变形。

形状变形行为可作为多种圆形按钮的变体，请参见下文

组件和布局

M2.5 中的大多数组件和布局在 M3 中都可用。但是，一些 M3 组件和布局在 M2.5 中不存在。此外，一些 M3 组件比其在 M2.5 中的等效组件有更多的变体。

虽然某些组件需要特殊考虑，但以下函数映射建议作为起点

以下是所有 Material 3 组件的完整列表

最后是 Wear Compose Foundation 库版本 1.5.0-beta01 中的一些相关组件列表

按钮

M3 中的按钮与 M2.5 不同。M2.5 Chip 已被 Button 替换。Button 实现为 Text maxLines 和 textAlign 提供默认值。这些默认值可以在 Text 元素中覆盖。

import androidx.wear.compose.material.Chip

//M2.5 Buttons
Chip(...)
CompactChip(...)
Button(...)

import androidx.wear.compose.material3.Button

//M3 Buttons
Button(...)
CompactButton(...)
IconButton(...)
TextButton(...)

M3 还包括新的按钮变体。请在 Compose Material 3 API 参考概览中查看它们。

M3 引入了一个新按钮：EdgeButton。EdgeButton 有 4 种不同尺寸：超小、小、中和大。EdgeButton 实现根据尺寸提供 maxLines 的默认值，可以自定义。

如果您正在使用 TransformingLazyColumn 和 ScalingLazyColumn，请将 EdgeButton 传递给 ScreenScaffold，使其随着滚动改变形状。请参阅以下代码，了解如何将 EdgeButton 与 ScreenScaffold 和 TransformingLazyColumn 一起使用。

import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ScreenScaffold

ScreenScaffold(
   scrollState = state,
   contentPadding = contentPadding,
   edgeButton = {
      EdgeButton(...)
   }
){ contentPadding ->
   TransformingLazyColumn(state = state, contentPadding = contentPadding,){
   // additional code here
   }
}

脚手架

M3 中的 Scaffold 与 M2.5 不同。在 M3 中，AppScaffold 和新的 ScreenScaffold 可组合项取代了 Scaffold。AppScaffold 和 ScreenScaffold 布置屏幕结构并协调 ScrollIndicator 和 TimeText 组件的过渡。

AppScaffold 允许静态屏幕元素（如 TimeText）在应用内过渡（如滑动手势关闭）期间保持可见。它为主应用内容提供了一个插槽，该插槽通常由导航组件（如 SwipeDismissableNavHost）提供

您为 Activity 声明一个 AppScaffold，并为每个屏幕使用一个 ScreenScaffold。

import androidx.wear.compose.material.Scaffold

Scaffold {...}

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold

AppScaffold {
   // Define the navigation hierarchy within the AppScaffold,
   // such as using SwipeDismissableNavHost.
   SwipeDismissableNavHost(...) {
      composable("home") {
         HomeScreen()
      }
      //other screens
   }
}
fun HomeScreen() {
    val scrollState = rememberScrollState()
    ScreenScaffold(scrollState = scrollState) {
    //rest of the screen code
    }
}

如果您正在使用带有 HorizontalPagerIndicator 的 HorizontalPager，您可以迁移到 HorizontalPagerScaffold。HorizontalPagerScaffold 放置在 AppScaffold 中。AppScaffold 和 HorizontalPagerScaffold 布置寻呼机的结构并协调 HorizontalPageIndicator 和 TimeText 组件的过渡。

HorizontalPagerScaffold 默认在屏幕的中心末端显示 HorizontalPageIndicator，并根据 Pager 是否正在分页来协调显示/隐藏 TimeText 和 HorizontalPageIndicator，这由 PagerState 决定。

还有一个新的 AnimatedPage 组件，它根据其位置为寻呼机中的页面添加缩放和蒙版效果动画。

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.HorizontalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

AppScaffold {
    val pagerState = rememberPagerState(pageCount = { 10 })

    HorizontalPagerScaffold(pagerState = pagerState) {
       HorizontalPager(
          state = pagerState,
        ) { page ->
            AnimatedPage(pageIndex = page, pagerState = pagerState) {
                ScreenScaffold {
…
   }
}

最后，M3 引入了一个 VerticalPagerScaffold，它遵循与 HorizontalPagerScaffold 相同的模式

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.HorizontalPagerScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.foundation.pager.VerticalPager
import androidx.wear.compose.foundation.pager.rememberPagerState

AppScaffold {
   val pagerState = rememberPagerState(pageCount = { 10 })

   VerticalPagerScaffold(pagerState = pagerState) {
      VerticalPager(
         state = pagerState
      ) { page ->
             AnimatedPage(pageIndex = page, pagerState = pagerState){
                ScreenScaffold {
        …
   }
}

占位符

M2.5 和 M3 之间有一些 API 更改。Placeholder.PlaceholderDefaults 现在提供了两个修饰符

• Modifier.placeholder，用于在内容尚未加载时绘制
• 占位符闪烁效果 Modifier.placeholderShimmer，它提供一种占位符闪烁效果，在等待数据加载时以动画循环运行。

有关 Placeholder 组件的其他更改，请参见下文。

SwipeDismissableNavHost

SwipeDismissableNavHost 是 wear.compose.navigation 的一部分。当此组件与 M3 一起使用时，M3 MaterialTheme 会更新 LocalSwipeToDismissBackgroundScrimColor 和 LocalSwipeToDismissContentScrimColor。

TransformingLazyColumn

TransformingLazyColumn 是 wear.compose.lazy.foundation 的一部分，它增加了对列表项在滚动期间进行缩放和变形动画的支持，从而增强了用户体验。

与 ScalingLazyColumn 类似，它提供了 rememberTransformingLazyColumnState() 来创建在组合中记住的 TransformingLazyColumnState。

要添加缩放和变形动画，请将以下内容添加到每个列表项：

• Modifier.transformedHeight，允许您使用 TransformationSpec 计算项目的变换高度，除非您需要进一步自定义，否则可以使用 rememberTransformationSpec()。
• 一个 SurfaceTransformation

import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn

val state = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
AppScaffold {
   ScreenScaffold(state) { contentPadding ->
      TransformingLazyColumn(state = state, contentPadding = contentPadding) {
         items(count = 50) {
            Button(
               onClick = {},
               modifier =
                        Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                        transformation = SurfaceTransformation(transformationSpec),
                    ) {
                        Text("Item $it")
                    }
                }
            }
        }
    }

有用链接

要了解有关从 M2.5 迁移到 Compose 中的 M3 的更多信息，请查阅以下其他资源。

示例

• GitHub 上 Material3 分支中的 Wear OS 示例
• Compose for Wear OS 编程实验室
• Jetcaster 示例

API 参考和源代码

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

设计

• 设计指南