M3E 设计系统
M3E 设计系统 · androidx.compose.material3
MaterialShapes：M3E 的形状词汇表1.5.0-alpha25
使用预置 RoundedPolygon、转换为 Compose Shape，并在两个 polygon 之间进行 Morph。
最后更新 2026-07-31
它提供什么
MaterialShapes 是一组预置 RoundedPolygon，当前源码包含 Circle、Square、Pill、Triangle、Diamond、Cookie、Clover、Burst、Flower、Puffy 等大量形状。它们不是 RoundedCornerShape 的别名，而来自 androidx.graphics.shapes。
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
val shape = MaterialShapes.Cookie9Sided.toShape()RoundedPolygon.toShape() 把 polygon 包装为 Compose Shape；toPath() 用于直接绘制。两者都允许通过 startAngle 调整朝向。
在形状之间变化
val morph = Morph(MaterialShapes.Circle, MaterialShapes.SoftBurst)
val path = morph.toPath(progress = progress)progress 表示两端之间的插值位置。真正用于动画时，仍需由状态或动画 API 驱动 progress。
使用边界
预置形状、转换扩展和 MaterialShapes 本身均标记 ExperimentalMaterial3ExpressiveApi。复杂 polygon 还会增加绘制成本，不要把每个小图标背景都做成持续 morph。
复制即用
预置形状转 Compose Shape，以及在两个形状之间 Morph：
import androidx.compose.material3.ExperimentalMaterial3ExpressiveApi
import androidx.compose.material3.MaterialShapes
import androidx.compose.material3.Shape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
@Composable
fun DemoShapes() {
val cookie: Shape = MaterialShapes.Cookie9Sided.toShape()
val burst: Shape = MaterialShapes.SoftBurst.toShape()
}形状之间的动画插值：
import androidx.compose.material3.MaterialShapes
import androidx.compose.material3.Morph
import androidx.compose.ui.graphics.Path
@OptIn(ExperimentalMaterial3ExpressiveApi::class)
fun morphPath(progress: Float): Path =
Morph(MaterialShapes.Circle, MaterialShapes.SoftBurst)
.toPath(progress = progress)progress 表示 0..1 的插值位置，由你的动画状态驱动。