HarmonyOS 鸿蒙Next中HdsNavigation组件动态模糊效果在真机与虚拟机的差异

这种能力建议你还是在手机上去调试，我试了下GRADIENT_BLUR类型用模拟器没什么效果，和手机不一样，有差异。

COMMON_BLUR和GRADUAL_BLUR类型在手机和模拟器上效果都是一样的。

应该是模拟器的硬件渲染能力不够，模糊效果是按照机器硬件能力来的，看官网说明：

模糊效果生效策略将根据系统策略进行调整。共设置三档系统策略：精美、轻柔、流畅，只有精美档位配置能够生效模糊效果。

系统策略由设备厂商根据设备性能配置，未配置时默认执行精美策略。

模拟器与真机存在部分能力差异：

• 模拟器不支持HDS沉浸视效，包括点光源效果、按压阴影、双边边缘流光、背景流光和自带背景的双边流光。
• 模拟器不适合用于测试应用/元服务的性能（如数据处理、图形渲染、网络速度）、资源占用（如内存、CPU、功耗），模拟器的性能测试结果仅能用于评估应用功能的相对差异。如需获取真实场景下的用户体验数据，建议在真机上进行测试。

下面是我的代码：

import { HdsNavigation, HdsNavigationAttribute, HdsNavigationTitleMode, ScrollEffectType } from '@kit.UIDesignKit';
import { ComponentContent, LengthMetrics, Prompt } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

/**
 * 通过组件导航将标题栏设置动态模糊样式
 */

@Builder
function menuComponent() {
  Menu() {
    MenuItem({ content: "copy" }).onClick(() => {
      Prompt.showToast({ message: 'on click' })
    })
    MenuItem({ content: "paste" }).enabled(false)
  }
  .width(224).menuItemDivider({ strokeWidth: LengthMetrics.px(1), color: $r('sys.color.comp_divider') })
}

@Entry
@Component
struct TestDesign {
  @State arr: number[] = [];
  @State targetId: string = 'bindMenu'

  aboutToAppear(): void {
    for (let index = 0; index < 40; index++) {
      this.arr.push(index);
    }
  }
  @Builder
  StackBuilder() {
    Column() {
      Button("HdsNavigation")
    }
    .height(56)
    .justifyContent(FlexAlign.Center)
  }

  @Builder
  BottomBuilder() {
    Column() {
      Search()
    }
    .width('100%')
    .height(56)
  }

  @Styles
  listCard() {
    .backgroundColor(Color.White)
    .height(72)
    .width('calc(100% - 20vp)')
    .borderRadius(12)
    .margin({ left: 10, right: 10 })
  }

  build() {
    HdsNavigation() { // 创建HdsNavigation组件
      // HdsNavigation组件内容区
      Scroll() {
        Column({ space: 10 }) {
          Image($r('app.media.startIcon'))
            .width('100%')
            .height(300)
          List({ space: 10 }) {
            ForEach(this.arr, (item: number) => {
              ListItem() {
                Image($r('app.media.a'))
              }.listCard()

            }, (item: number) => item.toString())
          }
          .padding({ bottom: 30 })
          .edgeEffect(EdgeEffect.Spring)
        }
        .width('100%')
      }
    }
    // .titleMode(HdsNavigationTitleMode.FULL)
    .titleBar({
      style: {
        // 设置导航组件标题栏样式
        // 标题栏动态模糊样式，包括是否使能滚动动态模糊，动态模糊类型，动态模糊生效的滚动距离等
        scrollEffectOpts: {
          enableScrollEffect: true,
          scrollEffectType: ScrollEffectType.GRADIENT_BLUR,
          blurEffectiveStartOffset: LengthMetrics.vp(0),
          blurEffectiveEndOffset: LengthMetrics.vp(20)
        },
        originalStyle: {
          // 内容区滚动前初始样式设置
          backgroundStyle: {
            // 标题栏背板样式设置
            backgroundColor: $r('sys.color.ohos_id_color_background'),
          },
          contentStyle: {
            // 标题栏内容区样式设置，包括标题区域，菜单区域，返回按钮区域
            titleStyle: {
              mainTitleColor: $r('sys.color.font_primary'),
              subTitleColor: $r('sys.color.font_secondary')
            },
            menuStyle: {
              backgroundColor: $r('sys.color.comp_background_tertiary'),
              iconColor: $r('sys.color.icon_primary')
            },
            backIconStyle: {
              backgroundColor: $r('sys.color.comp_background_tertiary'),
              iconColor: $r('sys.color.icon_primary')
            }
          }
        },
        scrollEffectStyle: {
          // 内容区滚动超过blurEffectiveEndOffset后样式设置
          backgroundStyle: {
            backgroundColor: $r('sys.color.ohos_id_color_background_transparent'),
          },
          contentStyle: {
            titleStyle: {
              mainTitleColor: $r('sys.color.font_primary'),
              subTitleColor: $r('sys.color.font_secondary')
            },
            menuStyle: {
              backgroundColor: $r('sys.color.comp_background_tertiary'),
              iconColor: $r('sys.color.icon_primary')
            },
            backIconStyle: {
              backgroundColor: $r('sys.color.comp_background_tertiary'),
              iconColor: $r('sys.color.icon_primary')
            }
          }
        }
      },
      content: {
        // 标题栏内容设置
        title: { mainTitle: 'Main', subTitle: 'Sub' },
        menu: {
          value: [
            {
              content: {
                label: 'menu1',
                icon: $r('sys.symbol.ohos_wifi'),
                isEnabled: true,
                action: () => {
                  let uiContext = this.getUIContext();
                  let promptAction = uiContext.getPromptAction();
                  let contentNode = new ComponentContent(uiContext, wrapBuilder(menuComponent))
                  try {
                    promptAction.openMenu(
                      contentNode,
                      { id: this.targetId },
                      { backgroundColor: Color.Yellow })
                  } catch (error) {
                    let message = (error as BusinessError).message;
                    let code = (error as BusinessError).code;
                    console.error(`openMenu args error code is ${code}, message is ${message}`);
                  }
                  console.info("model cancel");
                }
              },
              badge: {
                count: 9
              }
            }, {
            content: {
              label: 'menu2',
              icon: $r('sys.symbol.ohos_photo'),
            }
          }
          ]
        }
      }
    })
  }
}