开发者您好，

本地测试暂未复现您反馈的问题，测试设备为nova13pro。为便于进一步排查，请您提供可稳定复现问题的最小化代码示例。

建议通过 deviceInfo 获取设备相关信息，可参考 [@ohos.deviceInfo (设备信息)](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-device-info#导入模块)模块。

在测试中，请将 BlurStrategy 参数设置为 ENABLE，并确认相关配置是否正确生效。

测试代码：

// 从6.0.2(22)版本开始，无需手动导入HdsNavigationAttribute。具体请参考HdsNavigation的导入模块说明。
import { HdsNavigation, HdsNavigationAttribute, ScrollEffectType, HdsNavigationTitleMode,BlurStrategy } from '@kit.UIDesignKit';
import { LengthMetrics } from '@kit.ArkUI';
import { deviceInfo } from '@kit.BasicServicesKit';

const TITLE_BAR_HEIGHT_FREE: number = 138;

@Entry
@Component
struct Index {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack();
  scroller: Scroller = new Scroller();
  @State blankHeight: number = TITLE_BAR_HEIGHT_FREE;
  @State isHideBackButton: boolean = false;
  @State titleMode: HdsNavigationTitleMode = HdsNavigationTitleMode.MINI;
  @State subTitle: string = 'Sub'

  aboutToAppear(): void {
    let marketNameInfo: string = deviceInfo.marketName;
    // 输出结果：the value of the marketName is :Mate XX
    console.info('the value of the deviceInfo marketName is :' + marketNameInfo);

    let chipType: string = deviceInfo.chipType;
    // 输出结果：the value of the deviceInfo chipType is :xxxxx
    console.info('the value of the deviceInfo chipType is :' + chipType);
  }

  build() {
    HdsNavigation(this.pageInfos) {
      Column() {
        Stack() {
          Scroll(this.scroller) {
            Column() {
              Blank().height(this.blankHeight)
              Image($r('app.media.startIcon')).width('100%') // scenery为自定义资源，开发者需替换本地资源
            }
          }.edgeEffect(EdgeEffect.Spring).scrollBar(BarState.Off)
        }
      }
    }
    .titleBar({
      style: {
        blurStrategy:BlurStrategy.ENABLE,
        scrollEffectOpts: {
          enableScrollEffect: true,
          scrollEffectType: ScrollEffectType.COMMON_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: {
          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: this.subTitle
        },
        menu: {
          value: [{
            content: {
              label: 'menu1',
              icon: $r('sys.symbol.ohos_wifi'),
              isEnabled: true,
              action: () => {
                console.info("HdsNavigation menu1");
              }
            }
          }, {
            content: {
              label: 'menu2',
              icon: $r('sys.symbol.plus'),
              isEnabled: true,
            }
          }, {
            content: {
              label: 'menu3',
              icon: $r('sys.symbol.lock'),
            }
          }, {
            content: {
              label: 'menu4',
              icon: $r('sys.symbol.trunk'),
            }
          }]
        },
        backIcon: {
          label: 'backButton',
          icon: $r('sys.symbol.trunk'),
          isEnabled: true,
        }
      }
    })
    .titleMode(this.titleMode)
  }
}

怎么根据不同机型实现不同模糊效果？

背景

在移动端开发中，由于不同机型的性能差异，直接使用CSS backdrop-filter 实现模糊效果可能会导致低端机型卡顿。因此，需要一种方案能够根据机型性能动态选择模糊实现方式。

解决方案

通过JavaScript检测机型性能，动态切换CSS类名，从而应用不同的模糊样式。

核心思路

1. 使用 backdrop-filter 实现高性能模糊（适用于高端机型）
2. 使用 background-color 半透明覆盖模拟模糊效果（适用于低端机型）

实现步骤

1. 定义CSS样式

/* 高性能模糊样式 */
.blur-effect {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 低性能替代方案 */
.blur-fallback {
  background-color: rgba(255, 255, 255, 0.7);
}

2. 机型检测逻辑

function canUseBackdropFilter() {
  // 检测是否支持backdrop-filter
  if (typeof CSS !== 'undefined' && CSS.supports) {
    return CSS.supports('backdrop-filter', 'blur(10px)') || 
           CSS.supports('-webkit-backdrop-filter', 'blur(10px)');
  }
  
  // 通过用户代理简单判断低端机型
  const userAgent = navigator.userAgent.toLowerCase();
  const isLowEndDevice = /android.*(4\.[0-3]|4\.4\.[0-4])|iphone.*os_[0-9]/.test(userAgent);
  
  return !isLowEndDevice;
}

3. 动态应用样式

function applyBlurEffect(element) {
  if (canUseBackdropFilter()) {
    element.classList.add('blur-effect');
    element.classList.remove('blur-fallback');
  } else {
    element.classList.add('blur-fallback');
    element.classList.remove('blur-effect');
  }
}

// 使用示例
const modal = document.querySelector('.modal-backdrop');
applyBlurEffect(modal);

优化建议

1. 性能检测增强：可以添加FPS检测或渲染时间测试，更准确判断机型性能
2. 渐进增强：默认使用降级方案，检测到高性能后再升级
3. 缓存结果：将检测结果存储在本地，避免重复检测

注意事项

• 在Android 4.x及iOS旧版本中谨慎使用backdrop-filter
• 考虑电池节能模式下的性能限制
• 测试不同场景下的滚动性能

总结

通过机型性能检测和样式动态切换，可以在保证用户体验的前提下，为不同性能的机型提供合适的模糊效果实现方案。