每一首歌，
都换一身颜色。

设计原则

五条规则，决定每个页面怎么画

对照官方做法

M3 Expressive 的七条做法，逐条落到 myMusic

Google 在《Start building with Material 3 Expressive》里给出七条做法。下表是每一条在 myMusic 里的用法，以及刻意不用的地方。官方研究也提醒：表现力再强也替代不了基本可用性，而且有相当一部分用户更喜欢平静的界面。所以浏览页保持克制，力度集中在播放上。

用到的 Expressive 组件

来源：m3.material.io 的 Building with M3 Expressive、Shape、Motion、Typography、Color roles 和各组件页面；design.google 的 Expressive Material Design 研究文章。核对日期 2026-10-22。

导航与布局

四个入口，设置退到二级

底栏从五项减到四项：榜单、歌单、搜索、我的。设置是低频入口，移到“我的”右上角；平板和电视放在导航栏底部。

断点使用 androidx.window 1.5 的 WindowSizeClass（V2 断点含 Large / Extra-large），读取方式为 currentWindowAdaptiveInfoV2()。电视单独判断 uiMode，不看宽度。

动态配色 · MaterialKolor

从封面取一个种子色，生成整套配色

下面的色板由 material-color-utilities 0.4 实时计算，和 MaterialKolor 用的是同一套 HCT 算法与 2025 规范。换封面、风格或对比度，色板和所有样机一起更新。

外观设置里新增的选项

模糊与层次 · Haze

只有悬浮层才模糊

内容层是 hazeSource，顶栏、迷你播放器、导航栏、底部面板是 hazeBlur。模糊让悬浮层和内容分开，又不完全挡住后面的封面。

性能约束：每屏最多 3 个模糊层；用默认的 HazePerformanceMode.Default，掉帧时改 Performance；动画元素放在 hazeSource 子树之外。外观设置里的“模糊效果”提供 自动 / 开 / 关，“自动”在电视、省电模式和 API 30 以下关闭实时模糊。

形状 · 字体 · 动效

形状、字体和动效：力度集中在播放上

M3 Expressive 提供 35 种 MaterialShapes、按压形变的按钮、波浪进度条和弹簧动效。官方建议整个产品只做一两个高光时刻，myMusic 把它们都放在播放上；其他页面只用容器、字体和颜色分层。

抽象形状只用来裁切图片

官方说明：形状不承载语义，抽象形状要少用，适合图片裁切、头像遮罩和装饰，文字多的容器不用。所以 myMusic 只在下面五处用到，用来和周围的圆角矩形形成对比。

形状用在哪里

字体

官方的 Emphasized 样式只提高字重、不改字号（如 headline 400→500，title-medium 与 label 500→700）。中文在 500 时和常规字重区分不明显，所以 AppTypography 把中文标题的 Emphasized 再加重到 700–800。中文用系统字体（Noto Sans CJK / 厂商字体），不打包中文字体。

动效

手机 · Compact

九个关键页面

样机可以直接操作：点底栏切页，点迷你播放器打开播放页，点音源 chip 打开换源面板，在“我的”右上角进入外观设置。左侧列表也能切换页面，并显示每页的设计说明。

全部页面

每个页面，手机、平板、电视各一版

39 个页面和状态，每个都并排给出手机、平板（≥1200dp）和电视三版，下面写明每一端怎么变。规律是：手机的底部面板在平板变成侧边面板或菜单，在电视变成右侧面板；手机逐级进入的子页面在平板和电视变成“列表 + 详情”双栏；电视每页都标出默认焦点。所有样机跟随当前封面配色。

平板 · Expanded / Large

导航在左，播放在右，内容在中间

1200dp 以上把“正在播放”做成右侧浮起的窗格，跟随播放页配色；840–1199dp 窗格收起为底部播放条，把宽度还给内容。全屏播放页同样是沉浸式的：封面铺满左半屏并渐隐进流动背景，右边是歌名、歌词和控制，空闲后控件自动隐藏。

电视 · 三米距离

焦点在哪里，颜色就跟到哪里

点一下电视画面，然后用方向键移动焦点、回车打开、Esc 返回。焦点移到左侧会展开导航；焦点落在卡片上时，顶部 Hero 换成这张卡片的模糊封面和配色。回车打开全屏播放，4 秒没有操作就进入环境模式，只留歌词。

功能微调

改了什么，为什么改

功能范围基本不变，主要调整入口和交互方式；睡眠定时是唯一的新功能，已确认加入。

无障碍与性能

好看之外的硬约束

落地

依赖、代码结构和分期

依赖（libs.versions.toml）

# 新增 / 调整
[versions]
material3Expressive = "1.5.0-alpha25"  # 覆盖 BOM 里的 1.4.0；最后一个支持 minSdk 23 的版本
materialKolor = "6.0.0"
haze = "2.0.1"

[libraries]
androidx-compose-material3 = { module = "androidx.compose.material3:material3", version.ref = "material3Expressive" }
androidx-compose-material3-adaptive-navigation-suite = { module = "androidx.compose.material3:material3-adaptive-navigation-suite" }
androidx-compose-material3-adaptive-layout = { module = "androidx.compose.material3.adaptive:adaptive-layout" }
material-kolor = { module = "com.materialkolor:material-kolor-material3", version.ref = "materialKolor" }
material-kolor-palette = { module = "com.materialkolor:material-kolor-palette", version.ref = "materialKolor" }
haze = { module = "dev.chrisbanes.haze:haze", version.ref = "haze" }
haze-blur = { module = "dev.chrisbanes.haze:haze-blur", version.ref = "haze" }
haze-blur-materials = { module = "dev.chrisbanes.haze:haze-blur-materials", version.ref = "haze" }

MaterialKolor 6.0 依赖 kotlin-stdlib 2.4.21，会把项目的 2.4.20 顺带升一个补丁版本。它通过 JetBrains 的重定向依赖 material3 1.5.0-alpha22，Gradle 会解析到 alpha25，再用 strictly 固定。Haze 2.x 的 API 与 1.x 不同：HazeStyle → HazeBlurStyle，hazeEffect → hazeBlur，haze-materials → haze-blur-materials。

主题入口

// build.gradle.kts：防止传递依赖把 material3 拉到要求 minSdk 24 的版本
implementation(libs.androidx.compose.material3) { version { strictly("1.5.0-alpha25") } }

// MaterialKolor 6.0 编译时依赖 material3 1.5.0-alpha22，实际解析为 alpha25；已核对字节码引用的方法在 alpha25 中签名一致
@Composable
fun MyMusicTheme(appearance: Appearance, coverSeed: Color?, content: @Composable () -> Unit) {
    val seed = when (appearance.colorSource) {
        ColorSource.Cover -> coverSeed ?: appearance.lastSeed ?: BrandSeed
        ColorSource.Wallpaper -> wallpaperSeed() ?: BrandSeed      // Android 12+
        ColorSource.Brand -> BrandSeed                             // #006B5F
        ColorSource.Custom -> appearance.customSeed
    }
    val scheme = rememberDynamicColorScheme(                     // com.materialkolor.material3
        seedColor = seed,
        isDark = appearance.isDark(),
        isAmoled = appearance.amoled,
        style = appearance.browseStyle,                             // 默认 PaletteStyle.TonalSpot
        contrastLevel = appearance.contrast,                        // 0.0 / 0.5 / 1.0
        specVersion = ColorSpec.SpecVersion.SPEC_2025,             // 显式传入，默认值不是 2025
    )
    MaterialExpressiveTheme(                                        // alpha25 中为公开 API，无需 opt-in
        colorScheme = if (appearance.reduceMotion) scheme else animateColorScheme(scheme),
        motionScheme = if (appearance.reduceMotion) MotionScheme.standard() else MotionScheme.expressive(),
        typography = AppTypography,
        content = content,
    )
}
// 播放页在内部再包一层：style = appearance.playerStyle（默认 Vibrant），isDark = true

没有用 DynamicMaterialExpressiveTheme：它默认 Expressive 风格，并且仍标注实验性。自己组合 rememberDynamicColorScheme + animateColorScheme + MaterialExpressiveTheme，参数完全可控。在 alpha25 上写 SplitButtonLayout 而不是 SplitButton（后者在 beta02 被删除），这样以后升级不用改代码。

封面取色

class CoverSeedRepository(private val context: Context, private val imageLoader: ImageLoader) {
    private val cache = LruCache<String, Int>(64)

    suspend fun seedFor(url: String): Color? {
        cache[url]?.let { return Color(it) }
        val request = ImageRequest.Builder(context).data(url).size(128).allowHardware(false).build()
        val bitmap = (imageLoader.execute(request) as? SuccessResult)?.image?.toBitmap() ?: return null
        return withContext(Dispatchers.Default) {
            bitmap.asImageBitmap().themeColorOrNull()
            // 6.x 中已标记弃用、7.0 移除；届时换成 material-kolor-palette 的 Palette.themeColorOrNull()
        }?.also { cache.put(url, it.toArgb()) }
    }
}

模糊层

val hazeState = rememberHazeState()
val blur = LocalBlurPolicy.current          // 自动 / 开 / 关，电视和低内存设备为关
Box {
    LazyColumn(Modifier.hazeSource(hazeState), contentPadding = scaffoldPadding) { … }
    MiniPlayer(
        Modifier.hazeBlur(
            HazeInput.Backdrop(hazeState),
            style = HazeMaterials.regular(MaterialTheme.colorScheme.secondaryContainer),
        ).takeIf { blur.enabled } ?: Modifier.background(MaterialTheme.colorScheme.secondaryContainer),
    )
}

代码结构

分期

1. 主题地基

   升级 material3 / 加入 MaterialKolor 与 Haze；重写 AppTheme.kt；封面取色仓库；模糊策略；外观设置新选项。完成后现有页面即可随封面变色。

2. 播放体验

   悬浮迷你播放器；沉浸式播放页（铺满封面、流动背景、自动隐藏、封面手势、形变播放键、波浪进度、音源 chip）；歌词状态与跳转；换源面板；共享元素转场和预测性返回。

3. 浏览页

   榜单、歌单、搜索、我的、歌单详情、设置分组列表；LoadingIndicator 与骨架屏；Snackbar 撤销；设置入口迁移。

4. 大屏与电视

   自适应 Scaffold 与断点；平板右侧窗格和底部播放条；电视抽屉导航、焦点样式、Hero 跟随、环境模式、遥控器映射。

5. 打磨与验证

   无障碍走查（TalkBack、200% 字号、高对比度）；低端机与电视盒子帧时间；Baseline Profile；更新 README 的界面说明。

风险