You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Material3颜色指南Surface变体与ColorScheme的对应映射问题

Material3 Surface变体与ColorScheme的对应关系

Material3颜色指南中提到的5种Surface相关变体,在ColorScheme中没有直接定义独立字段,而是基于核心surface颜色结合层级透明度(Scrim)来实现,具体对应逻辑如下:

  • Surface:直接对应ColorScheme中的surface字段
  • Surface Container Lowest:以surface为基础,叠加最高透明度的Scrim(明暗主题下分别对应8%的黑/白遮罩)
  • Surface Container Low:以surface为基础,叠加中等偏低透明度的Scrim(明暗主题下分别对应4%的黑/白遮罩)
  • Surface Container:以surface为基础,叠加基础透明度的Scrim(明暗主题下分别对应2%的黑/白遮罩)
  • Surface Container High:以surface为基础,叠加最低透明度的Scrim(明暗主题下分别对应1%的黑/白遮罩)

这些变体的核心作用是构建界面的视觉层级,官方推荐通过Material Theme Builder生成完整色值,或是使用平台提供的ColorScheme扩展方法(如Android中的surfaceContainerLow()、surfaceContainerHigh()等)直接获取对应色值,无需手动计算透明度。

内容的提问来源于stack exchange,提问作者Yarh

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.09 14:32:36