# Material 3 Expressive for Jetpack Compose 适用于 Android Jetpack Compose 的 Material 3 Expressive 实施指南。这是 Google I/O 2025 上宣布的最新设计系统更新。 ##概述 **目标平台**：Android API 24+ / Jetpack Compose 1.7+ / Kotlin 1.9+ **设计理念**： * 基于物理的动画 * 具有 35 种新形状的富有表现力的 UI * 具有可变字体的动态排版 * 带有扩展颜色标记的深色调调色板 * 根据 18,000 多名用户的研究而设计 **核心特点**： * **MotionScheme** ：基于Spring的动画系统（标准/表现力） * **MaterialShapes**：35 种形状 + 变形过渡 * **新组件**：LoadingIndicator、ButtonGroup、FAB 菜单、浮动工具栏、轮播 * **增强主题**：使用 MaterialExpressiveTheme() 进行集成定制 ## 快速入门清单实施 Material 3 Expressive 时所需的步骤： 1. **添加依赖** // 构建.gradle.kts 依赖项{ // 材质 3 表现力（alpha）实现（“androidx.compose.material3：material3：1.4.0-alpha15”） // 或者使用BOM 实现（平台（“androidx.compose：compose-bom：2024.12.01”））实现（“androidx.compose.material3：material3”） } 2. **添加了实验性 API 选择加入** // 文件级别 @file:OptIn(ExperimentalMaterial3ExpressiveApi::class) // 或函数级别 @OptIn(ExperimentalMaterial3ExpressiveApi::class) @可组合有趣的 MyExpressiveComponent() { ... } 3. **使用 MaterialExpressiveTheme 包装您的应用程序** @OptIn(ExperimentalMaterial3ExpressiveApi::class) @可组合有趣的我的应用程序（）{ 材质表现力主题( MotionScheme = MotionScheme.expressive() ）{ // 应用内容 } } 4. **选择运动方案** * `MotionScheme.expressive()`：带有弹跳的生动动画（推荐） * `MotionScheme.standard()`：平静且不引人注目的动画 ## 核心概念概念|描述 |应用 ---|---|--- **运动方案** |基于Spring的动画系统|整体动画控制 **材质形状** | 35 种新形状 |按钮、卡片、组件 **形状变形** |形状之间的平滑过渡 |按下/选择状态视觉效果 **空间规格** |形状/边界变化的动画 |调整组件大小 **效果规格** |改变颜色/透明度的动画 |颜色过渡 ## 运动系统 ### 春季物理 M3 Expressive 将动画从基于持续时间的动画转变为基于物理的动画： // Spring主要参数 // Stiffness：弹簧刚度（越高，收敛越快） // Damping Ratio：阻尼比（1.0为临界阻尼，更低为弹跳） val customSpring = spring( 刚度 = Spring.StiffnessMedium, 阻尼比 = Spring.DampingRatioMediumBouncy ） ### 运动方案类型方案|阻尼|特点|应用领域 ---|---|---|--- `富有表现力()` |低|过冲、弹跳 |英雄时刻，关键互动 `标准()` |贵|低调、实用 |实用应用程序 ### 弹簧速度速度|应用 ---|--- `快` |小组件（开关、复选框） `默认` |中型组件（按钮、卡片） `慢` |全屏过渡、大动画详细信息：[references/motion-system.md]() ## 形状库 ### 35 种材质形状 M3 Expressive 提供圆角矩形以外的各种形状： // 使用示例图标按钮( onClick = { }, 形状 = MaterialShapes.Cookie9Sided ）{ 图标（Icons.Default.Add，contentDescription = null） } ### 形状变形按下或检查时形状会平滑变化： @OptIn(ExperimentalMaterial3ExpressiveApi::class) @可组合有趣的变形图标按钮（）{ var isChecked by Remember { mutableStateOf(false) } 图标切换按钮( 检查=已检查， onCheckedChange = { isChecked = it } ）{ 图标( imageVector = if (isChecked) Icons.Filled.Favorite else Icons.Outlined.FavoriteBorder, 内容描述 = null ） } } 详细信息：[references/shape-library.md]() ## 新组件 ### 加载指示器新的加载显示取代了“CircularProgressIndicator”： @OptIn(ExperimentalMaterial3ExpressiveApi::class) @可组合有趣的加载示例（）{ // 基本加载加载指示器() // 带容器包含装载指示器( 容器颜色 = MaterialTheme.colorScheme.primaryContainer ） } 详细信息：[references/loading-indicators.md]() ### 按钮组带有连接按钮的选择 UI： @OptIn(ExperimentalMaterial3ExpressiveApi::class) @可组合有趣的 ButtonGroupExample() { var selectedIndex by Remember { mutableIntStateOf(0) } 按钮组{ 切换按钮( 选中=选定索引== 0， onCheckedChange = { 选定索引 = 0 } ）{ 文本（“选项 1”） } 切换按钮( 选中 = selectedIndex == 1, onCheckedChange = { 选定索引 = 1 } ）{ 文本（“选项 2”） } } } 详细信息：[references/button-group.md]() ### 浮动操作按钮菜单可扩展的 FAB 菜单： @OptIn(ExperimentalMaterial3ExpressiveApi::class) @可组合有趣的 FABMenuExample() { var 通过记住 { mutableStateOf(false) } 扩展浮动操作按钮菜单（扩展=扩展，按钮={ 切换浮动操作按钮（选中=展开， onCheckedChange = { 扩展 = it } ）{ 图标( imageVector = if (展开) Icons.Default.Close else Icons.Default.Add, contentDescription =“切换菜单” ） } } ）{ 浮动操作按钮菜单项（ onClick = { /* 操作 */ }, 图标 = { 图标(Icons.Default.Edit, null) }, 文本 = { 文本("编辑") } ）浮动操作按钮菜单项（ onClick = { /* 操作 */ }, 图标 = { 图标(Icons.Default.Share, null) }, 文本 = { 文本("分享") } ） } } 详细信息：[references/fab-components.md]() ### 浮动工具栏水平/垂直浮动工具栏： @OptIn(ExperimentalMaterial3ExpressiveApi::class) @可组合有趣的 FloatingToolbarExample() { var 通过记住 { mutableStateOf(true) } 扩展水平浮动工具栏( 扩展=扩展，浮动操作按钮 = { FloatingToolbarDefaults.VibrantFloatingActionButton( onClick = { /* 操作 */ } ）{ 图标（Icons.Default.Add，contentDescription = null） } } ）{ 图标按钮(onClick = { }) { 图标（Icons.Default.Edit，contentDescription =“编辑”） } 图标按钮(onClick = { }) { 图标（Icons.Default.Delete，contentDescription =“删除”） } } } 详细信息：[references/floating-toolbar.md]() ### 轮播复数aiテム表示のカルーセル： @OptIn(ExperimentalMaterial3ExpressiveApi::class) @可组合有趣的 CarouselExample() { val items = listOf("项目 1", "项目 2", "项目 3", "项目 4") 水平多浏览轮播( 状态 = RememberCarouselState { items.count() }, 修改器=修改器.高度(200.dp), 首选项目宽度 = 150.dp ) { 索引 -> 卡（修饰符 = Modifier.fillMaxSize() ）{ 文本（文本 = 项目[索引], 修饰符 = Modifier.padding(16.dp) ） } } } 详细：[references/carousel.md]() ## 主题化 ### 材质表达主题 @OptIn(ExperimentalMaterial3ExpressiveApi::class) @可组合有趣的我的应用程序（）{ 材质表现力主题( colorScheme = 动态ColorScheme(LocalContext.current), 版式=版式，形状=形状， MotionScheme = MotionScheme.expressive() ）{ 表面（修改器 = Modifier.fillMaxSize(), 颜色 = MaterialTheme.colorScheme.background ）{ 主要内容() } } } 详细：[references/theming.md]() ## 常见错误エラー | 原因 | 解决方法 ---|---|--- `未解决的参考：MaterialExpressiveTheme` | 依存关系が古い | `material3:1.4.0-alpha15`以上を使用 `这个声明是实验性的` | OptIn 未指定 | `@OptIn(ExperimentalMaterial3ExpressiveApi::class)` を追加 `未解决的参考：MotionScheme` |撰写バージョン不足 | compose-bom 2024.12.01 以上を使用 `形状变形不起作用` |主题设定不足 | `MaterialExpressiveTheme` でラップ `未找到加载指示器` |进口不足| `导入 androidx.compose.material3.LoadingIndicator` `ButtonGroup 编译错误` | Kotlin バージョン | Kotlin 1.9+ を使用 ## 其他资源 ### 参考文献 * [运动系统]() \- Spring 物理、MotionScheme 详细 * [形状库]() \- 35种のシェイプ、モーfingu * [Typography]() \- 可变字体、字体比例 * [颜色系统]() \- 设计令牌、调色板 * [加载指示器]() \- LoadingIndicator コンポーネント * [按钮组]() \- ButtonGroup 実装 * [FAB 组件]() \- FAB 菜单，充满活力的 FAB * [浮动工具栏]() \- ツールバーコンポーネント * [旋转木马]() \- カルーセル実装 * [表达菜单]() \- 新メューシテム * [主题]() \- MaterialExpressiveTheme カsuタマイズ * [迁移指南]() \- M3 → M3 Expressive 迁移行 * [疑难解答]() \- toraburushutiengu ### 示例 * [基本设置]() \- テーマ设置基本 * [动作方案]() \- MotionScheme 使用示例 * [形状变形]() \- シェイプモーfingu * [加载指示器]() \- ローディngu * [按钮组]() \- ボタnguruーpu * [FAB 菜单]() \- FAB meniyu * [浮动工具栏]() \- ツールバー * [旋转木马]() \- karuーセル * [表达列表]() \- risutoaiitemu * [完整屏幕]() \- 完全な画面例 ### 外部资源 * [Compose 中的 Material Design 3]() * [M3 表现力运动系统]() * [Compose Material 3 版本]() * [Material 3 Expressive 目录 (GitHub)]()

M3 表达

包含技能