HarmonyOS NEXT实战：加载弹窗

##HarmonyOS Next实战##HarmonyOS应用开发##教育##

目标：封装公共组件，通过调用加载弹窗，实现loading动画。

实现思路：

1. 通过@CustomDialog实现弹窗
2. 通过Progress实现加载动画
3. 通过自定义组件承载自定义弹窗

CustomDialogController仅在作为@CustomDialog和@Component struct的成员变量，且在@Component struct内部定义时赋值才有效，具体用法可看下方示例。

定义

dialogController : CustomDialogController | null = new CustomDialogController(CustomDialogControllerOptions)

CustomDialogController用法

open() //显示自定义弹窗内容，允许多次使用，但如果弹框为SubWindow模式，则该弹框不允许再弹出SubWindow弹框。
close() //关闭显示的自定义弹窗，若已关闭，则不生效。

CustomDialogControllerOptions对象

• builder：自定义弹窗内容构造器。
• cancel：返回、ESC键和点击遮障层弹窗退出时的回调。
• autoCancel：是否允许点击遮障层退出，true表示关闭弹窗。false表示不关闭弹窗。（默认值：true）
• alignment：弹窗在竖直方向上的对齐方式。（默认值：DialogAlignment.Default）
• offset：弹窗相对alignment所在位置的偏移量。（默认值：{ dx: 0, dy: 0 }）
• customStyle：弹窗容器样式是否自定义。
• gridCount：弹窗宽度占栅格宽度的个数。默认为按照窗口大小自适应，异常值按默认值处理，最大栅格数为系统最大栅格数。取值范围：大于等于0的整数。
• maskColor：自定义蒙层颜色。
• maskRect：弹窗遮蔽层区域，在遮蔽层区域内的事件不透传，在遮蔽层区域外的事件透传。
• openAnimation：自定义设置弹窗弹出的动画效果相关参数。
• closeAnimation：自定义设置弹窗关闭的动画效果相关参数。
• showInSubWindow：某弹框需要显示在主窗口之外时，是否在子窗口显示此弹窗。默认值：false，弹窗显示在应用内，而非独立子窗口。
• backgroundColor：设置弹窗背板填充。默认值：Color.Transparent
• cornerRadius：设置背板的圆角半径。可分别设置4个圆角的半径。默认值：{ topLeft: ‘32vp’, topRight: ‘32vp’, bottomLeft: ‘32vp’, bottomRight: ‘32vp’ }

具体实现：

import Response from '../../models/Response'

let loadingDialogController: CustomDialogController

@Component
struct LoadingDialog {
  build() {
  }

  /**
   * 打开弹窗
   * @param text
   */
  open(text: string, duration: number=1500) {
    //关闭前面的弹窗
    if (loadingDialogController) {
      loadingDialogController.close()
    }
    loadingDialogController = new CustomDialogController({
      builder: LoadingDialogView({
        text: text,
        duration:duration,
        respond: (response: Response) => {
          response.genericWork()
        }
      }),
      autoCancel: false,
      alignment: DialogAlignment.Center,
      customStyle: true
    })
    loadingDialogController.open()
  }

  /**
   * 关闭弹窗
   */
  close() {
    if (loadingDialogController) {
      loadingDialogController.close()
    }
  }
}

export default new LoadingDialog()

@CustomDialog
struct LoadingDialogView {
  dialogController: CustomDialogController
  text: string = 'loading...'
  duration: number = 1500
  respond: (response: Response) => void = () => {
  } //回应

  aboutToAppear() {
    setTimeout(() => {
      this.dialogController.close()
    }, this.duration)
  }

  build() {
    Column({ space: 10 }) {
      Progress({ value: 0, total: 100, type: ProgressType.Ring })
        .width(50).height(50)
        .style({ strokeWidth: 7, status: ProgressStatus.LOADING })
      Text(this.text)
    }.padding(16).backgroundColor(Color.White).borderRadius(8)
  }
}

用法

              LoadingDialog.open('正在获取最新版本...', 1000)
              setTimeout(() => {
                LoadingDialog.close()
                TipDialog.open('温馨提示', '已是最新版本')
              }, 1000)