全局Loading弹窗简易版：通过window.createWindow()来实现（HarmonyOS 鸿蒙Next共享包依赖版）

全局Loading弹窗简易版：通过window.createWindow()来实现（HarmonyOS 鸿蒙Next共享包依赖版）
<markdown _ngcontent-uaj-c237="" class="markdownPreContainer">

0.写在前面

测试发现，本文中介绍的实现方式可能导致UI问题，建议采用回调方式实现，请参考：https://developer.huawei.com/consumer/cn/forum/topic/0204151061957140117?fid=0109140870620153026

1.创建共享包（如loadingLib，本示例在项目根目录下创建）

2.在loadingLib共享包中创建加载要显示的Page页面（LoadingPage.ets）

• 为LoadingPage指定路由名称，即：[@Entry](/user/Entry)({ routeName: 'LoadingPage' })

[@Entry](/user/Entry)({ routeName: 'LoadingPage' })
[@Component](/user/Component)
export struct LoadingPage {
  [@StorageProp](/user/StorageProp)('loading_message') message: string = '请稍候'
build() {
Stack({ alignContent: Alignment.Center }) {
Column() {
LoadingProgress().width(30).height(30).color(Color.White)
    Text(<span class="hljs-keyword"><span class="hljs-keyword">this</span></span>.message ?? <span class="hljs-string"><span class="hljs-string">'请稍候'</span></span>)
      .fontColor(Color.White)
      .fontSize(<span class="hljs-number"><span class="hljs-number">16</span></span>)
      .margin({ <span class="hljs-attribute"><span class="hljs-attribute">top</span></span>: <span class="hljs-number"><span class="hljs-number">15</span></span> })
      .width(<span class="hljs-string"><span class="hljs-string">'100%'</span></span>)
      .textAlign(TextAlign.Center)
  }
  .justifyContent(FlexAlign.Center)
  .width(<span class="hljs-number"><span class="hljs-number">100</span></span>)
  .height(<span class="hljs-number"><span class="hljs-number">100</span></span>)
  .backgroundColor(<span class="hljs-string"><span class="hljs-string">'#88000000'</span></span>)
  .borderRadius(<span class="hljs-number"><span class="hljs-number">8</span></span>)
}
.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(Color.Transparent)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

3.WindowUtils类用于创建窗口并导出:

• 在loadingLib共享包默认生成的Index.ets中导出WindowUtils类：

  export { WindowUtils } from "./src/main/ets/utils/WindowUtils"
  <button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

• 记得导入LoadingPage.ets:

  import 'loadingLib/src/main/ets/pages/LoadingPage'
  <button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

• WindowUtils.ets

import { display, window } from '@kit.ArkUI'
import { common } from '@kit.AbilityKit'
import 'loadingLib/src/main/ets/pages/LoadingPage'
export class WindowUtils {
/**

@param message 提示信息
@param pagePath 自定义loading页面路径，不设置使用上面定义的LoadingPage
*/
static async showLoading(message: ResourceStr = ‘请稍候’, pagePath: string = ‘’) {
let context = getContext()
await window.createWindow({
name: ‘loading_window’,
windowType: window.WindowType.TYPE_DIALOG,
ctx: context
}).then(async win => {
WindowUtils.loadingWindow = win
if (typeof (message) != ‘string’) {
message = context.resourceManager.getStringSync(message) ?? ‘请稍候’
}
AppStorage.setOrCreate(‘loading_message’, message)
if (pagePath == ‘’) {
await win.loadContentByName(“LoadingPage”)
} else {
await win.setUIContent(pagePath)
}
win.setWindowBackgroundColor(’#88000000’)
let d = display.getDefaultDisplaySync()
await win.resize(d.width, d.height)
await win.setWindowFocusable(true)
await win.showWindow()
})
}

static hideLoading() {
// 由于创建窗口后短时间内关闭，后续弹窗很可能无法再次弹出，故设置一个延时
setTimeout(() => {
await window.findWindow(‘loading_window’)?.destroyWindow()
}, 500)
}
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

4.在需要使用loadingLib共享包的module(如entry)中oh-package.json5添加依赖：

{
  "name": "entry",
  ...
  "dependencies": {
    ...
    "loadingLib": "file:../loadingLib"
  }
}
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

5.在Page或组件中使用：

• 显示Loading：

  WindowUtils.showLoading('加载中')
  <button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

• 隐藏Loading

  WindowUtils.hideLoading()
  <button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>