鸿蒙ArkTS/ArkUI电商实战-全局添加加载loading提示

鸿蒙ArkTS/ArkUI电商实战系列

本章内容

全局添加加载loading提示，线程间通信

效果图：

效果图

相关源码示例：

common_loading.png

在component目录下添加LoadingDialog.ets
LoadingDialog.ets

import hilog from '@ohos.hilog'

@CustomDialog
export struct LoadingDialog {
  @Prop loadingTips: string
  @State rotateAngle: number = 0
  //弹窗控制器
  controller: CustomDialogController
  private tag: string = 'LoadingDialog'

  aboutToAppear() {
    hilog.debug(0xFFFF, this.tag ,"Loading展示》》》》》")
  }

  build() {
    Stack() {
      Column() {
        Image($r('app.media.common_loading'))
          .height(50)
          .width(50)
          .rotate({angle: this.rotateAngle })
          .animation({
            duration: 500,
            iterations: -1,
            curve: Curve.Friction
          }).onAppear(() => {
          this.rotateAngle = 360
        })
        Text(this.loadingTips)
          .fontSize('15fp')
          .margin({ top: 10 })
      }
      .justifyContent(FlexAlign.Center)
      .height(150)
      .width(150)
      .backgroundColor(Color.White)
      .border({ radius: 5 })
    }
  }
}

event目录下创建EventKeys.ets、LoadingDialogEvent.ets和DialogUtils.ets文件
EventKeys.ets