把 Blur 参数拉满，为什么还是没有系统弹窗那种质感？

做 UI 的时候，最开始的思路很简单：要做毛玻璃效果，加个 Blur 就行了。

结果跑起来发现：自己做的 Blur 总觉得差点意思，灰蒙蒙的，没有系统弹窗那种通透的光感。同样是模糊，系统做出来的就是比自己做的好看。

这时候才意识到：沉浸光感不是简单的 Blur，是一整套系统材质，有折射、高光、阴影、点光源，不是一个模糊参数就能搞定的。

一、普通 Blur 和系统材质有什么区别

很多人以为：沉浸光感就是高级一点的 Blur。不对。

类型	实现
普通 Blur	像素模糊
系统材质	折射 + 高光 + 阴影 + 点光源

普通 Blur 就是把后面的像素糊一下。系统材质不一样，它是模拟真实物理材质的效果：光线穿过材质的折射、材质边缘的高光、材质在背景上投的阴影、还有光源打上去的光感。

所以同样是半透明，系统做出来就是通透的、有层次的，自己做的就是灰蒙蒙的一片。

二、五档系统材质是什么

API 26 的沉浸光感提供了五档系统材质，从弱到强：

材质等级	效果强度	适用场景
最低	很弱	低算力设备降级
低	弱	背景层
中	适中	普通卡片
高	强	弹窗、浮层
最高	最强	重点突出元素

不是所有组件都要用最高等级材质。低等级的适合背景，高等级的适合浮在上面的弹窗。用错了效果反而不好。

这段代码解决什么问题： 给弹窗加系统材质。
文件： pages/Dialog.ets
用途： 沉浸光感效果
接入位置： 弹窗背景

Dialog({ builder: this.dialogContent })
  .uiMaterial({
    material: systemMaterial.MATERIAL_HIGH,
    colorInvert: true,
    interactive: true,
    lightEffect: true
  })

这里几个参数要注意：

• material：材质等级；
• colorInvert：自动反色，浅色背景上用深色材质自动调整；
• interactive：交互形变，点按的时候材质会跟着动；
• lightEffect：点光源效果。

三、materialColor 为什么会盖住材质

很多人加了材质，又给组件设了 materialColor，结果材质效果完全没了。

这是因为：materialColor 是不透明的颜色。你设了不透明的颜色，材质效果当然就被盖住了。

正确的做法是：要让材质通透，materialColor 就要设成半透明的，或者干脆不设，用系统默认的材质颜色。

四、为什么低算力设备要降级

沉浸光感很吃 GPU。官方也说了，开沉浸光感会消耗较多 GPU 资源。

设备	建议材质等级
旗舰机	高/最高
中端机	中
低端机	低/最低

很多人全局都开最高等级材质，结果低端机直接卡了。

正确的做法是：根据设备算力自动降级。高配置用高材质，低配置用低材质，效果不好总比卡强。

五、自定义 shadow 为什么不生效

还有个坑：开了系统材质之后，自己写的 shadow 不生效了。

这是因为：系统材质自己会带阴影效果，你自己写的 shadow 被覆盖了。

很多人不知道，开了材质之后还在调 shadow 参数，调半天没反应。

六、几个容易踩的坑

第一个坑：把沉浸光感等同于 Blur。模糊只是其中一部分，还有折射高光阴影。

第二个坑：所有组件都开高强度材质。GPU 扛不住，低端机卡。

第三个坑：纯不透明 materialColor 把材质效果盖住。半透明材质才有光感。

第四个坑：自定义 shadow 不生效。开了系统材质，阴影被系统接管了。

第五个坑：忽略低算力设备降级。全局开最高，低端机直接卡。

这次做 UI 效果最大的体会是：沉浸光感不是一个模糊参数，是一整套系统材质系统。用对了等级、配好参数，效果就是系统那种通透的质感；用错了，要么被不透明颜色盖住，要么把低端机卡死。