HarmonyOS 鸿蒙Next后台模糊效果实现
<markdown _ngcontent-nul-c237="" class="markdownPreContainer">

后台模糊效果实现

参考

1. 模糊组件 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-blur-effect-0000001820879821#ZH-CN_TOPIC_0000001820879821__使用foregroundblurstyle为组件添加内容模糊效果
2. 全局loading 利用子窗口实现 https://developer.huawei.com/consumer/cn/forum/topic/0202146929510106443?fid=0101587866109860105

创建BlurPage

[@Entry](/user/Entry)
[@Component](/user/Component)
struct BlurPage{
    build() {
        Stack(){
    }.width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
    .height(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
    .backgroundColor(<span class="hljs-constant"><span class="hljs-constant">Color</span></span>.<span class="hljs-constant"><span class="hljs-constant">Transparent</span></span>)
    .foregroundBlurStyle(<span class="hljs-constant"><span class="hljs-constant">BlurStyle</span></span>.<span class="hljs-constant"><span class="hljs-constant">Thin</span></span>, {<span class="hljs-symbol"><span class="hljs-symbol">colorMode:</span></span> <span class="hljs-constant"><span class="hljs-constant">ThemeColorMode</span></span>.<span class="hljs-constant"><span class="hljs-constant">LIGHT</span></span>,<span class="hljs-symbol"><span class="hljs-symbol">adaptiveColor:</span></span> <span class="hljs-constant"><span class="hljs-constant">AdaptiveColor</span></span>.<span class="hljs-constant"><span class="hljs-constant">DEFAULT</span></span>, <span class="hljs-symbol"><span class="hljs-symbol">scale:</span></span> <span class="hljs-number"><span class="hljs-number">1.0</span></span>})
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

创建BlurUtil

export class BlurUtils {
  static stage:window.WindowStage
/**

发送创建loading子窗口的事件，显示loading
* @param context context
*/
static showBlur() {

BlurUtils.showSubWindow(BlurUtils.stage)
}
/**

关闭blur
*/
static hide() {
BlurUtils.closeSubWindow(BlurUtils.stage)
}

/**

设置stage
*/
static setStage( stage: window.WindowStage) {
BlurUtils.stage = stage
}

/**


显示blur子窗口
* @param stage stage
*/
static async showSubWindow(stage: window.WindowStage) {
stage?.createSubWindow(‘blur_window’).then(async win => {
let storage: LocalStorage = new LocalStorage();
// 设置子窗口显示的页面
await win.loadContent(‘BlurPage’,storage,(err) => {
})
// 设置全屏
let d = display.getDefaultDisplaySync()
let windowClass = stage.getMainWindowSync()
await win.setWindowSystemBarEnable([])
await win.setWindowLayoutFullScreen(true)
await win.resize(d.width, d.height)
// 设置透明效果
win.setWindowBackgroundColor(’#00000000’)
win.showWindow()
})
}


/**

关闭blur子窗口
* @param stage stage
*/
static closeSubWindow(stage: window.WindowStage) {
stage?.getSubWindow().then(win => {
if (win.length > 0) {
win[win.length -1].destroyWindow()
}
})
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

在entryAbility 的 onWindowStageCreate中增加事件监听

BlurUtlis.setStage(windowStage) //设置stage
windowStage.on(‘windowStageEvent’, (data) => {
if (data === window.WindowStageEventType.SHOWN) { // 热启动
BlurUtils.hide();
} else if (data === 6) { // 到任务管理器
BlurUtils.showMask();
} else if (data === 5) { //到前台
AppStorage.set(“isWindowMask”, false);
BlurUtils.hide();
}
});
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

END

</markdown>

关于HarmonyOS 鸿蒙Next后台模糊效果实现的问题，您也可以访问：https://www.itying.com/category-93-b0.html 联系官网客服。