作者：梅科尔工作室宗月妍

今天不聊复杂的算法，也不谈花哨的架构，想单纯分享一下我们在V1.0.5版本给应用注入“沉浸光感”之后，用户和我们自己都感受到的一些变化。

咕噜冰箱是一款家庭食材管理应用，核心功能就一句话：帮你记住冰箱里有什么、什么时候过期、能做什么菜。听起来有点工具属性，但我们一直希望它不止是工具——每次打开冰箱、记录食材、规划三餐，都应该是一件有温度的事。

而HarmonyOS 6.1的沉浸光感特性，恰好给我们提供了一个很优雅的实现路径：用光影的细腻度，去匹配生活的日常感。

为什么冰箱管理需要“光感”？

你可能会好奇：一个冰箱管理App，要什么光感？

我们的答案是：交互的温柔感，往往藏在那些不易察觉的细节里。

试想两个场景：

• 场景A：你刚买了一堆菜回家，打开App记录食材。顶部导航栏是扁平的、静态的，点“添加”按钮就是一个生硬的跳转。

• 场景B：同样记录食材，但当你点下“+添加”按钮时，按钮周围泛起一层柔和的光晕，松开后光晕轻轻淡去，像一块磨砂玻璃被指尖触碰了一下。

后者并不会改变功能逻辑，但它会让用户觉得：这个App是“活”的，是愿意跟你互动的。

所以，我们在咕噜冰箱V1.0.6版本中，决定给整个HDS导航栏（包括返回、添加、搜索、更多等核心操作按钮）接入沉浸光感效果。

代码实战：分步接入沉浸光感

下面我们把沉浸光感的接入过程拆成 4 个小节，每一步都清晰可见。

步骤 1：导入所需模块

首先导入 HDS 导航组件和沉浸光感相关的模块：

import { 
  HdsNavigation, 
  HdsNavigationTitleMode, 
  HdsNavigationMenuContentOptions, 
  ScrollEffectType, 
  hdsMaterial 
} from '@kit.UIDesignKit';

步骤 2：配置右侧菜单按钮

咕噜冰箱的主页面右上角有三个功能按钮：添加食材、智能分析、更多。用 HdsNavigationMenuContentOptions 定义它们：

private menus: HdsNavigationMenuContentOptions = {
  value: [
    { content: { label: '添加食材', icon: $r('sys.symbol.plus_circle') } },
    { content: { label: '智能分析', icon: $r('sys.symbol.chart_pie') } },
    { content: { label: '更多', icon: $r('sys.symbol.more') } }
  ]
};

步骤 3：构建 HdsNavigation 容器并配置沉浸光感

在 build() 方法中创建 HdsNavigation，重点是在 titleBar.style 里加上 systemMaterialEffect 参数：

build() {
  HdsNavigation() {
    // 内容区域（滚动列表、食材卡片等）
    Scroll(this.scrollerForScroll) {
      Column() {
        this.foodList()
        this.expiryAlertCard()
        this.recipeRecommendation()
      }
    }
  }
  .mode(NavigationMode.Stack)
  .titleBar({
    content: {
      title: { mainTitle: '我的冰箱' },
      menu: this.menus
    },
    style: {
      scrollEffectOpts: {
        enableScrollEffect: true,
        scrollEffectType: ScrollEffectType.GRADIENT_BLUR
      },
      // ⭐ 沉浸光感核心配置
      systemMaterialEffect: {
        materialType: hdsMaterial.MaterialType.ADAPTIVE,
        materialLevel: hdsMaterial.MaterialLevel.ADAPTIVE
      }
    }
  })
  .bindToScrollable([this.scrollerForScroll])
  .titleMode(HdsNavigationTitleMode.MINI)
  .hideBackButton(false)
  .backgroundColor('#F9F6F0')
}

步骤 4：开启温控开关，保障低端设备流畅度

如果你担心低端设备的光感动画会带来卡顿，可以在 barFloatingStyle 或导航栏配置中加入 thermoCtrl: true，让系统在发热时自动降级材质效果：

// 如果使用悬浮页签（HdsTabs），在 barFloatingStyle 中添加
.barFloatingStyle({
  systemMaterialEffect: { ... },
  thermoCtrl: true   // 系统温控兜底
})

实际体验：那些让人惊喜的细节

运行到真机上之后，效果超出预期：

• 添加食材按钮：轻触时光晕从中心向外扩散，松开后光晕收缩，仿佛按钮在“呼吸”。这个反馈让用户明确感知“我已按下”，同时又不刺眼。

• 搜索按钮：在深色模式下（夜间打开冰箱记录），搜索按钮的边缘会有一圈极淡的冷白光，和冰箱内部LED灯的光线形成呼应——这个巧合让我们很惊喜。

• 滚动联动：当我们向上滚动食材列表时，导航栏背景会从完全透明逐渐叠加一层带光感的磨砂效果，标题栏从“迷你模式”过渡为“常规模式”，整个过程非常丝滑。

沉浸光感 + 悬浮导航：让“悬浮感”更彻底

沉浸光感和 HdsTabs 的悬浮页签是天生一对。咕噜冰箱虽然没有底部页签，但我们把顶部导航栏本身做成了悬浮样式——导航栏不再紧贴状态栏，而是与内容区域保留一点点间隙，配合光感材质，营造出“导航栏浮在食材列表上方”的视觉层次。

关键配置是 titleBar.style 里的 scrollEffectOpts：

scrollEffectOpts: {
  enableScrollEffect: true,
  scrollEffectType: ScrollEffectType.GRADIENT_BLUR  // 渐变模糊，强化悬浮感
}

配合 ignoreLayoutSafeArea 让内容延展到状态栏区域，导航栏再通过渐变模糊“压”在内容之上。再加上沉浸光感，整个顶部区域就像一片有厚度的毛玻璃。

写在最后：让工具不再“冰冷”

冰箱本身是冷的，但我们希望咕噜冰箱给人的感觉是温暖的。沉浸光感这类细微的视觉特性，并不能直接解决“鸡蛋什么时候过期”这个核心问题，但它能让用户在记录食材、规划三餐的过程中，感受到一份被认真对待的尊重。

上线两周后，我们收到一条用户评论：“每次点添加食材，那个按钮的光晕都让我觉得特别治愈，像打开冰箱时里面的灯慢慢亮起来。”——这可能就是我们做这件事的意义。

如果你的应用也承载着“日常”和“温度”，不妨试试给导航栏加一层光感。它不喧宾夺主，却能悄悄提升整个应用的质感。

咕噜冰箱已在华为应用市场上架，欢迎下载体验搭载沉浸光感 + 小艺智能体的新版本。