鸿蒙中封装dialog，代码复制进去直接使用

我们在做项目的时候dialog，这样的加载效果，肯定是少不了的，小编为大家封装了一个dialog，有需要的大家自取。

话不多说直接上代码。

先封装一个加载效的函数

// 添加加载效果
@CustomDialog
export struct HcLoadingDialog {
  controller: CustomDialogController
  @Prop message: string = '加载中...'

  build() {
    Column() {
      Column({ space: 10 }) {
        LoadingProgress()
          .width(48)
          .height(48)
          .color($r('app.color.white'))
        if (this.message) {
          Text(this.message)
            .fontSize(14)
            .fontColor($r('app.color.white'))
        }
      }
      .justifyContent(FlexAlign.Center)
      .width(120)
      .height(120)
      .backgroundColor('rgba(0,0,0,0.6)')
      .borderRadius(16)
    }
  }

 在需要的地方直接引用就行--引用

 // 加载dialog
  dialog = new CustomDialogController({
    builder: HcLoadingDialog(),
    customStyle: true,
    alignment: DialogAlignment.Center
  })

 这个时候我们只要在发送接口的时候去使用进行

 async aboutToAppear() {
    this.dialog.open()  // 开启dialog
    const res = await http.request<StudyTimeData>({ url: 'studyInfo' })
    this.dialog.close() // 关闭dialog
    this.data = res
  }

我们可以看一下效果图 

各位看官老爷，觉得有用就点点赞把！