HarmonyOS 鸿蒙Next中怎么实现这种UI缓冲界面模糊效果布局

HarmonyOS 鸿蒙Next中怎么实现这种UI缓冲界面模糊效果布局 怎么实现这种UI缓冲界面模糊效果布局


更多关于HarmonyOS 鸿蒙Next中怎么实现这种UI缓冲界面模糊效果布局的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

1、使用 overlay 实现浮层

2、使用 linearGradient 实现渐变色

根据UI调整一下 linearGradient 的色值，应该就能满足需求。

@Entry
@Component
struct Index {
  build() {
    Column() {

    }
    .backgroundColor('#fff')
    .width('100%')
    .height('100%')
    .overlay(this.shadowOverly, { align: Alignment.Bottom })
  }

  @Builder
  shadowOverly() {
    Row()
      .width('100%')
      .height(150)
      .linearGradient({
        angle: 180,
        colors: [['#00000000', 0], ['#99CCCCCC', 1]]
      })
  }
}

更多关于HarmonyOS 鸿蒙Next中怎么实现这种UI缓冲界面模糊效果布局的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


可通过渐变模糊 linearGradientBlur 属性来实现

具体代码：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Scroll() {
      Column({space: 5}) {
        ForEach(new Array(30).fill(""), (item: string, index) => {
          Text("阿萨滴哦哎是弄的首脑的那送到水泥地哦是哦i暗示都i啊是你哦你打算年底阿森纳哦i阿丹哦i的那艘i的那艘i都弄i阿森纳都i三道看四年dons奥i的挠死你的哦i【那是的【按到死")
        })
      }
    }
    .edgeEffect(EdgeEffect.Spring)
    .size({width: "100%", height: "100%"})
    .linearGradientBlur(500,
      { fractionStops: [[0, 0], [0, 0.77], [1, 0.99], [1, 1]], direction: GradientDirection.Bottom })
  }
}

在HarmonyOS Next中，可通过@ohos.graphics.blurEffect模块实现UI缓冲界面模糊效果。使用BlurEffect类创建模糊效果实例，设置模糊半径和采样因子。通过Component的blurEffect属性将效果绑定到布局组件，支持动态调整模糊参数。利用ArkTS声明式语法在UI描述中直接配置，无需涉及Java或C语言代码。

在HarmonyOS Next中实现UI缓冲界面模糊效果，可以通过以下步骤：

  1. 使用Blur组件
    HarmonyOS提供了Blur组件，能够快速实现背景模糊效果。将需要模糊的区域包裹在Blur组件中，并设置模糊半径（如10vp）和模糊模式（如BlurStyle.THIN）。

  2. 结合ProgressIndicator
    在模糊背景上添加ProgressIndicator组件显示加载状态，支持线性或环形进度条，通过color和style属性自定义外观。

  3. 布局结构示例

    Column() {
  Blur({ 
    blurStyle: BlurStyle.THIN, 
    blurRadius: 10 
  }) {
    // 背景内容（如图片或容器）
  }
  .width('100%').height('100%')

  ProgressIndicator({ 
    type: ProgressIndicatorType.Circular 
  })
  .color(Color.Blue)
}
.justifyContent(FlexAlign.Center)

  4. 动态控制显示
    通过@State变量控制模糊层和进度条的显隐，结合if条件渲染实现加载态的切换。

此方案利用原生组件高效实现模糊效果，无需依赖第三方库，性能优化良好。

回到顶部