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

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

0.写在前面

如果在创建弹窗后在极短时间内关闭，或者短时间内频繁创建弹窗都可能导致UI显示问题，所以这里采用显示、隐藏回调方式实现。

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 'lib/src/main/ets/pages/LoadingPage.ets';
export class WindowUtils {
private static loadingWindow: window.Window | null = null
/**

@param message 提示信息
@param pagePath 自定义Loading页面路径
*/
static showLoading(doNext?: () => void, message: ResourceStr = ‘请稍候’, pagePath: string = ‘’) {
let context = getContext()
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)
win.showWindow().then(() => {
if (doNext) {
doNext()
}
})
})
}

static hideLoading(doNext?: () => void) {
if (WindowUtils.loadingWindow) {
WindowUtils.loadingWindow.destroyWindow().then(() => {
if (doNext) {
doNext()
}
WindowUtils.loadingWindow = null
})
} else {
if (doNext) {
doNext()
}
}
}
}
<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>