HarmonyOS学习ArkUI之弹框工具类记录后续补充

1.Dialog 弹框的整理

import { TipsDialog, SelectDialog, ConfirmDialog, AlertDialog, LoadingDialog, CustomContentDialog } from '@kit.ArkUI'

export  class DialogUtils {
  /**
   * 显示一个提示对话框
   * @param title 对话框标题
   * @param message 对话框消息
   * @param buttonText 按钮文本
   * @param onButtonClicked 按钮点击回调
   */
  static showAlertDialog(title: string, message: string, cancelText: string, sureText: string, sureClicked: () => void) :CustomDialogController{
   let dialogControllerConfirm: CustomDialogController = new CustomDialogController({
      builder: AlertDialog({
        primaryTitle: title,
        content: message,
        primaryButton: {
          value: cancelText,
          action: () => {
          },
        },
        secondaryButton: {
          value: sureText,
          role: ButtonRole.ERROR,
          action: () => {
            sureClicked()
          }
        },
      }),
    })

    return dialogControllerConfirm
  }


/**
 * 文本与勾选弹出框
 * @param title
 * @param message
 * @param isChecked
 * @param arrowClicked
 * @returns
 */
  static showControllerCheckBox(title: string, message: string, isChecked : boolean,  arrowClicked: (isChecked:boolean) => void) :CustomDialogController{
    let dialogControllerCheckBox: CustomDialogController = new CustomDialogController({
      builder: ConfirmDialog({
        title: title,
        content: message,
        // 勾选框选中状态
        isChecked: isChecked,
        // 勾选框说明文本
        checkTips: '禁止后不再提示',
        primaryButton: {
          value: '禁止',
          action: () => {
            dialogControllerCheckBox.close()
          },
        },
        secondaryButton: {
          value: '允许',
          action: () => {
            isChecked = false
            arrowClicked(isChecked)
            dialogControllerCheckBox.close()
          }
        },
        onCheckedChange: () => {

        },
      }),
      autoCancel: true,
      alignment: DialogAlignment.Bottom
    })

    return dialogControllerCheckBox
  }

  /**
   * 等待框
   * @param title
   * @param message
   * @param isChecked
   * @param arrowClicked
   * @returns
   */
  static showControllerWait(message: string) :CustomDialogController{
    let   dialogControllerProgress: CustomDialogController = new CustomDialogController({
      builder: LoadingDialog({
        content: message,
        themeColorMode: ThemeColorMode.LIGHT // 默认浅色主题
      }),
    })
    return dialogControllerProgress
  }
  /**
   * 时间选择弹窗
   * @param date
   * @param okClick
   */
  static showCalendarPicker(date: Date, okClick: (newDate:string) => void) {
    // let selectedDate: Date = new Date('2024-04-23')
    CalendarPickerDialog.show({
      selected: date,
      onAccept: (value) => {
        console.info("calendar onAccept:" + JSON.stringify(value))
        okClick(JSON.stringify(value))
      },
      onCancel: () => {

      },
      onChange: (value) => {
        console.info("calendar onChange:" + JSON.stringify(value))
      },

    })

  }


  /**
   * 日期选择弹窗
   * @param date
   * @param okClick
   */
  static showDatePickerDialog(curDate: Date,startDate: Date,endDate: Date, okClick: (newDate:Date) => void) {
    // let selectedDate: Date = new Date('2024-04-23')
    DatePickerDialog.show({ // 建议使用 this.getUIContext().showDatePickerDialog()接口
      start: startDate,
      end: endDate,
      selected: curDate,
      showTime:false,//     是否展示时间项，true表示显示时间，false表示不显示
      lunar:false,//是否是农历
      useMilitaryTime:true,//展示时间是否为24小时制
      disappearTextStyle: {color: Color.Pink, font: {size: '22fp', weight: FontWeight.Bold}},
      textStyle: {color: '#ff00ff00', font: {size: '18fp', weight: FontWeight.Normal}},
      selectedTextStyle: {color: '#ff182431', font: {size: '14fp', weight: FontWeight.Regular}},
      onDateAccept: (value: Date) => {
        // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
        okClick(value)
      },
      onCancel: () => {

      },
      onDateChange: (value: Date) => {
        console.info("DatePickerDialog:onDateChange()" + value.toString())
      },

    })


  }

  /**
   * 日期选择弹窗
   * @param date
   * @param okClick
   */
  static showTipsDialog(topRes:ResourceStr,content: string, sureClick: () => void) :CustomDialogController{
  let   dialogControllerImage: CustomDialogController = new CustomDialogController({
      builder: TipsDialog({
        imageRes: topRes,
        content: content,
        primaryButton: {
          value: '取消',
          action: () => {
            console.info('Callback when the first button is clicked')
          },
        },
        secondaryButton: {
          value: '确认',
          role: ButtonRole.ERROR,
          action: () => {
            sureClick()
          }
        }

      }),
    })
return dialogControllerImage

  }

}

2.倒计时工具列

// CountdownUtil.ets
export class CountdownUtil {
  private static instance: CountdownUtil | undefined = undefined;
  private intervalId: number | undefined = undefined; // 添加实例变量存储 intervalId

  // 私有构造函数，防止外部实例化
  private constructor() {}

  // 获取唯一实例的方法
  public static getInstance(): CountdownUtil {
    if (!CountdownUtil.instance) {
      CountdownUtil.instance = new CountdownUtil();
    }
    return CountdownUtil.instance;
  }

  //开始倒计时  单位s
  public startCountdown(duration: number, onTick: (remaining: number) => void, onComplete: () => void): void {
    if (this.intervalId !== undefined) {
      clearInterval(this.intervalId); // 清除之前的定时器（如果存在）
    }

    let remainingTime = duration;
    this.intervalId = setInterval(() => {
      remainingTime--;
      onTick(remainingTime);
      if (remainingTime <= 0) {
        clearInterval(this.intervalId);
        this.intervalId = undefined; // 清除 intervalId
        onComplete();
      }
    }, 1000);
  }

  // 停止倒计时
  public stopCountdown(): void {
    if (this.intervalId !== undefined) {
      clearInterval(this.intervalId);
      this.intervalId = undefined; // 清除 intervalId
    }
  }
}