当时这个效果只能在 HdsTabs 和 HdsNavigation 上用——给底部导航栏加个 systemMaterialEffect，点击的时候图标周围会有光晕，划过的时候有光线反射。

效果确实好，但能用到的地方太少了。毕竟大部分应用不是只有底部导航栏需要高级感，卡片、弹窗、按钮、列表这些组件同样需要。

HarmonyOS 7 把沉浸光感从 HDS 专属组件下放到了通用 ArkUI 组件。SDK 26 Beta1 一出来我就翻了更新日志，这次光感升级的幅度比我预想的要大。

升级了什么

一句话总结：从"只有两个 HDS 组件能用"变成了"几乎所有常用组件都能用"。

具体分两个层面：

1. 新增 systemMaterial 属性的组件

以下组件在 SDK 26 里都新增了 systemMaterial 配置项：

• Toggle（开关）
• Tips（提示气泡）
• Toast（轻提示）
• Dialog（对话框）
• ActionMenu（操作菜单）
• Popup / CustomDialogPopup（弹窗 / 自定义弹窗）
• 半模态面板
• Sheet

这意味着你给一个普通对话框加个 systemMaterial 配置，它就能有跟系统设置页弹窗一样的通透质感和光影效果。

2. Chip 组件的特殊待遇

Chip（标签）组件比较特殊，新增了两个材质配置：

• backgroundSystemMaterial：正常状态下的新材质背景
• activatedBackgroundSystemMaterial：激活状态下的新材质背景

Chip 的这两种状态材质可以做出"标签选中时像被光照亮"的效果，在筛选器、标签云这类场景里非常出彩。

三个新动效：光随指动、光线勾勒、非线性形变

除了组件覆盖面扩大，HarmonyOS 7 的沉浸光感还新增了三种动效：

光随指动

这个在文章 22 里提过——划过 Tab 栏的时候光线跟着手指移动。但 HarmonyOS 7 把这个能力泛化了，不只是 HdsTabs，其他支持 systemMaterial 的组件也能实现。

比如一个卡片列表，手指划过的时候卡片表面会有光线跟着走，像有一束光照在你的手指上。

光线勾勒

组件的边缘会出现一道细微的光线轮廓，让组件看起来像是从背景里"浮"出来的。这个效果很微妙，但能让界面层次感提升一个档次。

适合用在：

• 重要操作按钮（比如"立即购买"）
• 当前选中的卡片
• 浮动工具栏

非线性形变

传统的组件缩放/位移动画是线性的——匀速放大、匀速移动。非线性形变加入了一些弹性和惯性，让组件状态切换的时候有一个自然的"呼吸感"。

最典型的应用场景：对话框弹出时不是匀速变大，而是先快后慢，最后有一点点回弹，类似 iOS 的 spring 动画但更柔和。

实际接入

虽然 API 签名在 Beta 阶段可能还会调，但从 SDK 26 的文档来看，接入方式跟之前 HDS 组件的 systemMaterialEffect 思路一致——都是给组件加一个材质配置。

以 Dialog 为例，大致的写法是这样：

// 给对话框加沉浸光感材质
AlertDialog.show({
  title: '确认删除',
  message: '删除后无法恢复，是否继续？',
  primaryButton: { value: '取消' },
  secondaryButton: { value: '确认' }
})
// SDK 26 新增的配置项
.systemMaterial({
  enable: true
  // 其他参数等正式版稳定后再确认
})

对于 Chip 组件的双状态材质：

import { Chip } from '@kit.ArkUI'

Chip({ text: '推荐', isSelected: this.isSelected })
  // 正常状态材质
  .backgroundSystemMaterial({ enable: true })
  // 激活状态材质——选中的时候会有光照效果
  .activatedBackgroundSystemMaterial({ enable: true })
  .onClick(() => {
    this.isSelected = !this.isSelected
  })

注意：以上代码是基于 SDK 26 Beta1 的推测写法，正式版的 API 签名可能有微调。等 DevEco Studio 26.0.0 正式版发布后再做最终确认。

沉浸光感 + 新材质背景模糊

SDK 26 还有一个容易忽略的变化：提示弹窗的背景支持新材质背景模糊效果。

之前 Toast、Tips 这些轻量提示组件的背景是纯色半透明，视觉上比较"平"。现在换成了带模糊 + 光感的材质效果，跟 iOS 的那种高级 Toast 很接近。

这个变化不需要开发者做任何配置——系统自动生效。也就是说，只要你把 targetSdk 升到 API 26，你的 Toast 和 Tips 就自动变好看了。

跟文章 22 的区别

简单说，文章 22 是教你"怎么在导航栏上用光感"，这篇是告诉你"光感能力现在全组件都能用了"。

性能考虑

沉浸光感本质上是 GPU 实时渲染，对设备性能有一定要求。SDK 26 里提到支持 LTPO 可变帧率——这个技术的好处是，当界面静止不动的时候，刷新率可以降到很低（比如 1Hz），节省功耗；有动画或交互的时候再升上去。

这对沉浸光感的实际使用影响是：你不用担心开了光感效果就会一直高刷耗电。系统会根据组件的实际状态动态调整。

不过还是建议在低端设备上做一下性能测试。如果你的页面本身就很复杂（大量列表 + 动画 + 网络请求），再叠加光感效果可能会有掉帧。这种情况下可以选择性开启——比如只对当前焦点组件启用光感，其他组件用普通样式。

设计建议

从设计角度来说，光感效果不是用得越多越好。几个原则：

1. 焦点组件用光感，背景组件不要用——满屏都是光感就等于没有光感
2. 交互频繁的组件优先——底部导航、筛选标签、操作按钮这些用户经常点的，加光感提升最大
3. 纯展示类组件慎用——文本展示区域加光感反而会分散注意力
4. 暗色模式下效果最好——光感在深色背景上的视觉冲击力比浅色模式强很多

HDC 上演示的几个标杆应用（腾讯视频、小红书等），基本都是在底部导航 + 关键操作按钮上用了光感，其他地方保持简洁。这种“有重点”的设计才是正确的使用方式。