HarmonyOS鸿蒙Next中请教一下，我的蓝色圆形按钮增加了背景模糊之后感觉颜色不均匀，像是有一块白色，一块蓝色

HarmonyOS鸿蒙Next中请教一下，我的蓝色圆形按钮增加了背景模糊之后感觉颜色不均匀，像是有一块白色，一块蓝色

@Param @Once blurStyle: BlurStyle | null = BlurStyle.Thin; // Thin 属性
@Param @Once backgroundBlurStyleOptions: BackgroundBlurStyleOptions | null =
  {
    colorMode: ThemeColorMode.SYSTEM,
    adaptiveColor: AdaptiveColor.DEFAULT,
    blurOptions: {
      grayscale: [this.GRAY_SCALE, this.GRAY_SCALE]
    },
    scale: this.context?.resourceManager.getNumber($r('app.float.seat_btns_bg_scale').id)
  };

private GRAY_SCALE = this.context.resourceManager.getNumber($r('app.integer.grayscale_40').id)

{
  "name": "grayscale_40",
  "value": 40
},

"name": "seat_btns_bg_scale",
"value": "0.1fp"

cke_2463.png

理想中的情况是：

径向渐变：

#0A59F7 100%

#0A59F7 70%

模糊类型：背景模糊

Blur 40.00px

cke_4477.png


更多关于HarmonyOS鸿蒙Next中请教一下，我的蓝色圆形按钮增加了背景模糊之后感觉颜色不均匀，像是有一块白色，一块蓝色的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS Next中，蓝色圆形按钮添加背景模糊后出现颜色不均匀，可能是由于模糊效果与按钮背景色的叠加导致视觉差异。建议检查模糊半径和背景色的透明度设置，确保两者兼容。

更多关于HarmonyOS鸿蒙Next中请教一下，我的蓝色圆形按钮增加了背景模糊之后感觉颜色不均匀，像是有一块白色，一块蓝色的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


根据您提供的代码和描述，问题很可能出在 blurOptions 的 grayscale 参数配置上。

在您当前的代码中：

blurOptions: {
  grayscale: [this.GRAY_SCALE, this.GRAY_SCALE]
}

grayscale 数组的两个值都被设置为了 40（来自 grayscale_40 资源）。这会导致模糊效果在整个模糊区域内应用了均匀的、强度为40的灰度滤镜。

问题分析： 均匀的灰度滤镜叠加在您的蓝色背景上，会中和颜色的饱和度并改变其明度，由于模糊区域的光学混合效应，可能导致视觉上的颜色不均匀，出现您描述的“一块白、一块蓝”的斑块状效果。scale 参数设置为 0.1fp（非常小）可能会加剧这种不均匀感，因为它极大地缩小了模糊采样的源区域。

解决方案： 要获得更接近“理想情况”中纯色背景上的均匀模糊效果，您应该移除或降低 grayscale 滤镜的影响。BackgroundBlurStyleOptions 的 blurOptions 是可选的，如果您的目标只是背景模糊而不需要额外的颜色滤镜，最简单的方法是不配置 grayscale 参数。

修改建议： 将 backgroundBlurStyleOptions 修改如下，直接移除 grayscale 配置：

@Param @Once backgroundBlurStyleOptions: BackgroundBlurStyleOptions | null =
  {
    colorMode: ThemeColorMode.SYSTEM,
    adaptiveColor: AdaptiveColor.DEFAULT,
    // 移除 blurOptions 或移除其中的 grayscale
    scale: this.context?.resourceManager.getNumber($r('app.float.seat_btns_bg_scale').id)
  };

或者，如果您仍需保留 blurOptions 用于其他设置，则将 grayscale 设置为 [0, 0] 以禁用灰度效果：

blurOptions: {
  grayscale: [0, 0] // 禁用灰度滤镜
}

调整后效果： 移除 grayscale 后，背景模糊将主要处理背景内容的透明度和混合，而不会对您按钮的蓝色底色施加额外的灰度变换。这样更有可能得到均匀的、带有透出底层背景模糊效果的蓝色按钮。同时，您可以适当增大 scale 值（例如尝试 0.5fp 或 1.0fp），让模糊采样区域更大，有助于使模糊过渡更加平滑均匀。

请尝试以上修改，这应该能显著改善颜色不均匀的问题。

回到顶部