HarmonyOS鸿蒙Next中这个下面的边线怎么实现随底部颜色变化的，blur没法用，因为我们的结构就要改

HarmonyOS鸿蒙Next中这个下面的边线怎么实现随底部颜色变化的，blur没法用，因为我们的结构就要改 【问题描述】：这个下面的边线怎么实现随底部颜色变化的，blur 没法用，因为我们的结构就要改，沉浸光感实现不了

cke_8548.png

【版本信息】：开发工具版本：6.0、手机系统版本：mate60、Api语言版本：20


更多关于HarmonyOS鸿蒙Next中这个下面的边线怎么实现随底部颜色变化的，blur没法用，因为我们的结构就要改的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

开发者您好，这边看下backgroundBlurStyle属性是否可以满足您的需求，backgroundBlurStyle为当前组件提供一种背景材质模糊能力，通过枚举值的方式封装了不同的模糊半径、蒙版颜色、蒙版透明度、饱和度、亮度。
参考demo:

@Entry
@Component
struct MaterialBlur {
  build() {
    Stack() {
      Scroll(){
        Column(){
          Image($r('app.media.image'))
            .width('100%')
            .height(500)
            .objectFit(ImageFit.Cover)
          Image($r('app.media.image'))
            .width('100%')
            .height(500)
            .objectFit(ImageFit.Cover)
          Image($r('app.media.image'))
            .width('100%')
            .height(500)
            .objectFit(ImageFit.Cover)
          Image($r('app.media.image'))
            .width('100%')
            .height(500)
            .objectFit(ImageFit.Cover)
          Image($r('app.media.image'))
            .width('100%')
            .height(500)
            .objectFit(ImageFit.Cover)
        }

      }
      Column() {
        Text('材质模糊效果')
          .fontSize(24)
          .fontColor(Color.White)
      }
      .width('80%')
      .height(200)
      .backgroundBlurStyle(BlurStyle.Thin, {
        colorMode: ThemeColorMode.LIGHT,
        adaptiveColor: AdaptiveColor.DEFAULT,
        scale: 0.8
      })
      .borderRadius(16)
      .padding(20)
    }
    .width('100%')
    .height('100%')
  }
}

如果不能满足麻烦说明下现在的阻塞点是什么，因为什么会改变结构？

更多关于HarmonyOS鸿蒙Next中这个下面的边线怎么实现随底部颜色变化的，blur没法用，因为我们的结构就要改的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


用了backgroundBlurStyle 这个后 界面整体如果背景是一张图的话会变得脏兮兮的，边缘部分

尊敬的开发者您好，这边脏兮兮效果是什么样的？是否能提供效果图和复现demo呢？

该问题已解决，我们把磨砂取消掉了

尊敬的开发者您好，可以使用迷你栏试试：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ui-design-hds-tabs-bar-floating#迷你栏

在 HarmonyOS Next 中，可借助 Border 组件的 color 属性绑定背景色状态变量，或使用 LinearGradient 配合 mask 实现边线颜色随底部变化。避免 blur 时，将边线作为独立层，通过 onBackgroundChange 回调动态更新边线色值即可。

可通过**混合模式（blendMode）**让边线颜色自动适应底部背景变化，无需 blur 也无需改结构。例如给边线组件设置：

Divider()
  .blendMode(BlendMode.DIFFERENCE, BlendApplyType.OFFSCREEN)
  .backgroundColor(Color.White) // 基准色，实际显示会随背景反转
  • DIFFERENCE 模式会让白色部分与背景色做差值运算，深色背景上显示白线，浅色背景上显示深色线，实现随底变色。
  • 若需半透明效果，可改为 BlendMode.EXCLUSION 或叠加一层低透明度遮罩。

若 Divider 不适用，也可将底线实现为一个 Row 或 Rect，同样应用上述混合模式。此方案无需获取底部颜色，无需改动布局结构，符合沉浸光感无法使用的场景。

回到顶部