自定义加载Loading弹窗的封装

目标：定义一个加载组件，提供给加载数据的时候使用

实现步骤：

• 准备基础加载结构
• 自定义 Dialog
• 加载数据调用

 实现代码：

@CustomDialog

// 组件名字 ：HcLoadingDialog
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)
    }
  }
}

 // new一个dialog实例对象

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

  async getQuestionDetail(id: string) {

// 加载前开启
    this.dialog.open()
    const res = await http.request<QuestionDetail>({ url: `question/${id}` })

// 关闭弹窗
    this.dialog.close()
    return res
  }

// 加载完(离开页面也)关闭 

  onPageHide(): void {
    this.dialog.close()
  }