鸿蒙开发日记：导航栏动态模糊——随滚动“呼吸”的优雅艺术

文轩702
45 阅读4分钟

在构建现代应用界面时，如何让导航栏与滚动内容和谐互动，创造出丝滑流畅的视觉层级体验？HarmonyOS 从 5.1.0 版本开始，为导航组件引入了动态模糊样式，并在 6.0.0 Beta1 中进一步增强了效果。它允许标题栏的背景、分割线乃至内容颜色，随着页面滚动而智能渐变，实现从沉浸到凸显的无缝切换。

本文将带你深入了解三种动态模糊样式，并手把手教你如何为自己的应用注入这份灵动。

一、 三种模糊样式，适配你的场景

HarmonyOS 提供了三种精细化的动态模糊方案，你可以根据页面设计风格和交互意图进行选择。

1. 通用模糊 (COMMON_BLUR)

  • 视觉特征：对标题栏背景进行均匀、边界清晰的模糊处理，如同在内容上层覆盖了一块毛玻璃。滚动时，模糊背板和底部分割线会渐变出现或消失。
  • 核心价值：清晰地区隔内容层与控件层，强调导航栏的功能属性。
  • 适用场景：标准列表页、详情页等非沉浸式场景，需要明确标题栏存在的界面。

2. 过渡模糊 (TRANSITION_BLUR)

  • 视觉特征：同样使用均匀模糊，但其精髓在于滚动前后标题栏的内容（如文字、图标颜色）会发生显著改变，并在滚动过程中线性跟手变化。
  • 核心价值：实现沉浸式与非沉浸式状态间的优雅过渡。例如，滚动前标题与背景融合（沉浸），滚动后标题清晰凸显。
  • 适用场景：适用于需要从沉浸式头部大图过渡到常规导航栏的页面，如个人中心、文章阅读页。

3. 渐变模糊 (GRADIENT_BLUR)

  • 视觉特征：模糊效果在空间上呈现渐强或渐弱的变化，边界柔和模糊，与背景融合度更高。
  • 核心价值：极大地增强页面的沉浸感与视觉深度，营造柔和、高级的视觉氛围。
  • 适用场景：追求极致视觉体验的页面，如画廊应用、高端产品展示页或主题商店。

二、 四步实现，代码详解

实现动态模糊的核心，在于配置 HdsNavigation 组件的 titleBar.style 属性。下面我们通过一个通用模糊的示例，拆解关键步骤。

第一步：导入模块

import { HdsNavigation, HdsNavigationAttribute, ScrollEffectType } from '@kit.UIDesignKit';
import { LengthMetrics } from '@kit.ArkUI';

第二步：配置动态模糊选项 (scrollEffectOpts) 这是控制动态模糊行为的“开关”和“规则”。

scrollEffectOpts: {
  enableScrollEffect: true, // 必须设置为true以启用动态效果
  scrollEffectType: ScrollEffectType.COMMON_BLUR, // 选择模糊类型：COMMON_BLUR, TRANSITION_BLUR, GRADIENT_BLUR
  blurEffectiveStartOffset: LengthMetrics.vp(0), // 效果开始生效的滚动距离
  blurEffectiveEndOffset: LengthMetrics.vp(20),  // 效果完全生效的滚动距离
}
  • blurEffectiveStartOffset 到 blurEffectiveEndOffset 之间，样式会进行线性插值过渡，从而实现平滑动画。

第三步：定义滚动前后的样式 你需要分别定义滚动前的初始样式 (originalStyle) 和滚动超过 EndOffset 后的最终样式 (scrollEffectStyle)。

originalStyle: {
  backgroundStyle: {
    // 滚动前，标题栏背景可能是透明或半透明，以实现沉浸
    backgroundColor: $r('sys.color.ohos_id_color_background_transparent'),
  },
  contentStyle: {
    titleStyle: {
      // 滚动前，标题颜色可能与背景对比度较低
      mainTitleColor: $r('sys.color.font_primary_on_media'),
    },
    // ... 菜单、返回图标样式
  }
},
scrollEffectStyle: {
  backgroundStyle: {
    // 滚动后，变为不透明的模糊背景
    backgroundColor: $r('sys.color.ohos_id_color_background'),
  },
  contentStyle: {
    titleStyle: {
      // 滚动后，标题颜色变为高对比度，确保可读性
      mainTitleColor: $r('sys.color.font_primary'),
    },
    // ... 菜单、返回图标样式
  }
}

对于过渡模糊 (TRANSITION_BLUR)，originalStyle 和 scrollEffectStyle 中 contentStyle 的差异配置是关键。

第四步：整合到导航组件 将上述配置应用到 HdsNavigation 组件中。

@Entry
@Component
struct MyDynamicNavPage {
  build() {
    HdsNavigation() {
      // 你的页面主体内容，确保是可滚动组件（如List、Scroll）
      List() {
        // ... 列表项
      }
    }
    .titleBar({
      style: {
        // 此处嵌入上述的 scrollEffectOpts, originalStyle, scrollEffectStyle 配置
        scrollEffectOpts: { ... },
        originalStyle: { ... },
        scrollEffectStyle: { ... }
      },
      content: {
        title: { mainTitle: '动态导航', subTitle: '体验模糊渐变' },
      }
    })
  }
}

三、 效果预览与核心逻辑

当用户滚动页面内容时，系统会根据滚动距离，在 originalStyle（0%效果）和 scrollEffectStyle（100%效果）之间自动计算并应用中间状态样式。

例如，在通用模糊场景下：

  • 滚动距离 ≤ 0vp：显示 originalStyle，标题栏可能背景透明，无分割线。
  • 滚动距离在 0vp ~ 20vp 之间：背景模糊度和分割线透明度线性增强。
  • 滚动距离 ≥ 20vp：完全显示 scrollEffectStyle，背景为完整的模糊效果，分割线完全显现。

四、 总结与建议

HarmonyOS 导航组件的动态模糊样式，将原本生硬的状态切换转化为连续的视觉叙事。它通过声明式的配置，将复杂的交互视觉效果变得简单可控。

给你的实践建议：

  1. 明确场景：先根据页面设计决定使用哪种模糊类型。
  2. 精心设计两端状态：特别是对于 TRANSITION_BLUR，仔细设计滚动前后标题、图标颜色的变化路径。
  3. 调试过渡区间：通过调整 blurEffectiveStart/EndOffset 的值，控制效果响应的“灵敏度”，使其与滚动内容的速度和节奏相匹配。

现在，就尝试为你的应用导航栏加上这层“动态滤镜”吧@让它随着用户的操作优雅地呼吸与律动，即刻提升应用的视觉格调与交互质感~

欢迎大家加入我们的班级一起学习：developer.huawei.com/consumer/cn…

avatar
文章
阅读
粉丝