鸿蒙Harmony小案例：图片展示背景高斯模糊效果

kaiyu0426

已于 2024-08-20 00:08:00 修改

阅读量947

点赞数 17

分类专栏： HarmonyOS 文章标签： harmonyos

于 2024-08-20 00:02:03 首次发布

本文链接：https://blog.csdn.net/kaiyu0426/article/details/141337331

版权

HarmonyOS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果展示

解决方法

1、设置关闭页面安全区

 async aboutToAppear() {
    const win = await window.getLastWindow(getContext())
    // 防止全局没开启，指定页面开启沉浸式
    win.setWindowLayoutFullScreen(true)
  }

2、获取页面上下安全距离

 // 定义变量
 @State topSafeHeight: number = 0;
  @State bottomSafeHeight: number = 0;


// 获取上方安全区高度
    this.topSafeHeight = px2vp(win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
      .topRect.height)
    // 获取下方安全区高度
    this.bottomSafeHeight = px2vp(win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
      .bottomRect.height)

win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM) .topRect.height 获取到的值是像素大小，所以要使用px2vp 转为使用的vp。

3、使用padding将上下安全距离空出

.padding({
      top: this.topSafeHeight,
      bottom: this.bottomSafeHeight
    })

下面这种方法，我编辑器不知道为什么不行

安全区域是指页面的显示区域，默认不与系统设置的非安全区域比如状态栏、导航栏区域重叠，默认情况下开发者开发的界面都被布局在安全区域内。提供属性方法允许开发者设置组件绘制内容突破安全区域的限制，通过expandSafeArea属性支持组件不改变布局情况下扩展其绘制区域至安全区外。

    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

设置expandSafeArea属性进行组件绘制扩展时，组件不能设置固定宽高尺寸（百分比除外）。

安全区域不会限制内部组件的布局和大小，不会裁剪内部组件。

当父容器是滚动容器时，设置expandSafeArea属性不生效。

设置expandSafeArea()时，不传参，走默认值处理；设置expandSafeArea([],[])时，相当于入参是空数组，此时设置expandSafeArea属性不生效。

组件设置expandSafeArea之后生效的条件为：

1.type为SafeAreaType.KEYBOARD时默认生效，组件不避让键盘。

2.设置其他type，组件的边界与安全区域重合时组件能够延伸到安全区域下。例如：设备顶部状态栏高度100，那么组件在屏幕中的绝对位置需要为0 <= y <= 100。

组件延伸到安全区域下，在安全区域处的事件，如点击事件等可能会被系统拦截，优先给状态栏等系统组件响应。

—— API文档

4、设置背景图片样式

.backgroundImage('https://pic.code-nav.cn/user_avatar/1708419191834537985/thumbnail/KF4DqoN6-%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240324151648.jpg')
    .backgroundImageSize(ImageSize.Cover)
     
    .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)   //  对背景图片进行模糊处理

代码展示

可替换自己的图片体验效果，展示图片和背景图片要一致。

import { window } from '@kit.ArkUI'


@Entry
@Component
struct SafeAreaCase {
  @State topSafeHeight: number = 0;
  @State bottomSafeHeight: number = 0;

  async aboutToAppear() {
    const win = await window.getLastWindow(getContext())
    // 防止全局没开启，指定页面开启沉浸式
    win.setWindowLayoutFullScreen(true)
    // 获取上方安全区高度
    this.topSafeHeight = px2vp(win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
      .topRect.height)
    // 获取下方安全区高度
    this.bottomSafeHeight = px2vp(win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
      .bottomRect.height)
    AlertDialog.show({
      message: `
      上安全区:${this.topSafeHeight}
      下安全区:${this.bottomSafeHeight}`
    })
  }

  build() {
    Column() {
      Image('https://pic.code-nav.cn/user_avatar/1708419191834537985/thumbnail/KF4DqoN6-%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240324151648.jpg')
        .width(200)

    }
    .padding({
      top: this.topSafeHeight,
      bottom: this.bottomSafeHeight
    })
    .height('100%')
    .width('100%')
    .backgroundImage('https://pic.code-nav.cn/user_avatar/1708419191834537985/thumbnail/KF4DqoN6-%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240324151648.jpg')
    .backgroundImageSize(ImageSize.Cover)
    .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)
    //.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

    // .backgroundColor(Color.Green)
  }
}