harmony-dialog Effect Preview

harmony-dialog An extremely simple and easy-to-use zero-invasion pop-up window, which can be easily implemented with just one line of code, and can be easily popped up no matter where you are. It covers AlertDialog, TipsDialog, ConfirmDialog, SelectDialog, CustomContentDialog, TextInputDialog, TextAreaDialog, BottomSheetDialog, ActionSheetDialog, TextPickerDialog, DatePickerDialog, CustomDialog, LoadingDialog, LoadingProgress, Toast, ToastTip Various types can meet various pop-up development needs.

1. AlertDialog operation confirmation class pop-up box

2. ConfirmDialog information confirmation class pop-up box

3. TipsDialog prompt pop-up box, which is a graphic confirmation box

4. SelectDialog Select class pop-up box

5. TextInputDialog Single-line text input pop-up box

6. TextAreaDialog Multi-line text input box

7. BottomSheetDialog Action Panel

8. ActionSheetDialog Action Panel (IOS Style)

9. TextPickerDialog selector pop-up box

10. DatePickerDialog date selector pop-up box

11. LoadingDialog load class pop-up box

12. LoadingProgress Progress Progress Box

13. Toast Toast

13. ToastTip Toast with Graphics

Full Code Example

---

import { AreaHelper } from '@nutpi/china_area';
import { AnimationHelper, DateType, DialogAction, DialogHelper, Orientation } from '@pura/harmony-dialog';
import { DateUtil, DisplayUtil, LogUtil, ToastUtil } from '@pura/harmony-utils';
import { SpinType } from '@pura/spinkit';
import { CardButton } from '../../component/CardButton';
import { CustomImageView } from '../../component/CustomImageView';
import { CustomTextViewBuilder } from '../../component/CustomTextView';
import { DrawerBuilder } from '../../component/DrawerLayout';
import { LottieBuilder } from '../../component/LottieView';
import { MenuBuilder } from '../../component/MenuLayout';
import { MenuSheetBuilder } from '../../component/MenuSheetLayout';
import { TipBuilder } from '../../component/TipLayout';
import { TitleView } from '../../component/TitleView';
import { DrawerOptions } from '../../model/DrawerOptions';
import { LoadOptions } from '../../model/LoadOptions';
import { MenuOptions } from '../../model/MenuOptions';
import { MenuSheetOptions } from '../../model/MenuSheetOptions';
import { TipOptions } from '../../model/TipOptions';
import { Utils } from '../../utils/Utils';
import { LevelMode, router } from '@kit.ArkUI';


/**
 * TODO 弹窗工具
 * author: 桃花镇童长老ᥫ᭡
 * since: 2024/08/18
 */
@Preview
@Component
export struct DialogPage {
  private scroller: Scroller = new Scroller();
  @State menuArray: Array<ResourceStr> = [$r('app.string.str_camera'), $r('app.string.str_album'), "文件管理器"];
  @State inputText: string = ""; //输入框内容
  @State progress: number = 1;
  private likes: string[] = ['乒乓球', '鸿蒙手机', 'ArkTS', 'Mate70Pro', '三折叠手机', '小米su7', '红米K80pro', '广东名菜烤乳猪'];
  private apfruits: string[] = ['apple1', 'apple2', 'apple3', 'apple4']
  private orfruits: string[] = ['orange1', 'orange2', 'orange3', 'orange4']
  private pefruits: string[] = ['peach1', 'peach2', 'peach3', 'peach4']
  private multis: string[][] = [this.apfruits, this.orfruits, this.pefruits]
  @BuilderParam customTextBuilderParam: (str: string | Resource) => void = CustomTextViewBuilder; //自定义文本内容
  private rangeContent: TextPickerRangeContent[] = [{
    icon: $r('sys.media.ohos_ic_normal_white_grid_doc'),
    text: 'DOC'
  }, {
    icon: $r('sys.media.ohos_ic_normal_white_grid_pdf'),
    text: 'PDF'
  }, {
    icon: $r('sys.media.ohos_ic_normal_white_grid_xls'),
    text: 'XLS'
  }, {
    icon: $r('sys.media.ohos_ic_normal_white_grid_image'),
    text: 'IMAGE'
  }, {
    icon: $r('sys.media.ohos_ic_normal_white_grid_html'),
    text: 'HTML'
  }];




  /**
   * 统一配置一
   */
  customConfig1() {
    DialogHelper.setDefaultConfig((config) => {
      config.autoCancel = false; //点击遮障层时，是否关闭弹窗，true表示关闭弹窗。
      config.backCancel = false; //点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。
      config.actionCancel = true; //点击操作按钮时，是否关闭弹窗。false表示不关闭弹窗。
      config.alignment = DialogAlignment.Center; //弹窗的对齐方式。
      config.offset = { dx: 0, dy: 0 }; //弹窗相对alignment所在位置的偏移量。默认值：{ dx: 0, dy: 0 }
      config.maskColor = 0x11000000; //自定义蒙层颜色。默认值 0x33000000
      config.backgroundColor = Color.White; //弹窗背板颜色。默认值：Color.White
      config.backgroundBlurStyle = BlurStyle.NONE; //弹窗背板模糊材质
      config.cornerRadius = 35; //设置背板的圆角半径。可分别设置4个圆角的半径。
      // config.maskRect={ x: 'auto', y: 'auto', width: 'auto', height: 'auto' };

      config.title = $r("app.string.dialog_tip"); //弹框标题
      config.primaryButton = $r("app.string.btn_cancel"); //弹框左侧按钮。
      config.secondaryButton = $r("app.string.btn_sure"); //弹框右侧按钮。
      config.imageRes = undefined; //TipsDialog用到，展示的图片。
      config.imageSize = { width: '64vp', height: '64vp' }; //TipsDialog用到，自定义图片尺寸。默认值：64*64vp

      config.loading_loadSize = 60; //加载动画或进度条的大小
      config.loading_loadColor = Color.White; //加载动画或进度条的颜色
      config.loading_content = ''; //加载动画的提示文字
      config.loading_fontSize = 16; //文字大小
      config.loading_fontColor = Color.White; //文字颜色
      config.loading_backgroundColor = '#CC094CD1'; //背景颜色，八位色值前两位为透明度
      config.loading_borderRadius = 10; //背景圆角

      config.toast_fontSize = 16; //文字大小
      config.toast_fontColor = Color.White; //文字颜色
      config.toast_backgroundColor = '#CC56D866'; //背景颜色，建议八位色值前两位为透明度
      config.toast_alignment = Alignment.Center; //土司居中显示
      config.toast_borderRadius = 8; //背景圆角
      config.toast_padding = { left: 16, right: 16, top: 12, bottom: 12 }; //Padding
      config.toast_imageSize = { width: 45, height: 45 }; //Tip图片尺寸。默认值：45*45vp
      config.toast_duration = 1500; //显示时长(1500ms-10000ms)
      config.toast_durationLong = 5000; //显示时长
    });
    ToastUtil.showToast("统一配置设置成功！");
  }

  /**
   * 统一配置二
   */
  customConfig2() {
    DialogHelper.setDefaultConfig((config) => {
      config.autoCancel = false; //点击遮障层时，是否关闭弹窗，true表示关闭弹窗。
      config.backCancel = false; //点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。
      config.actionCancel = true; //点击操作按钮时，是否关闭弹窗。false表示不关闭弹窗。
      config.alignment = DialogAlignment.Bottom; //弹窗的对齐方式。
      config.offset = { dx: 0, dy: -35 }; //弹窗相对alignment所在位置的偏移量。
      config.maskColor = 0x11000000; //自定义蒙层颜色。默认值 0x33000000
      config.backgroundColor = Color.White; //弹窗背板颜色。默认值：Color.White
      config.backgroundBlurStyle = BlurStyle.COMPONENT_ULTRA_THICK; //弹窗背板模糊材质
      config.cornerRadius = 20; //设置背板的圆角半径。可分别设置4个圆角的半径。

      config.title = '提示'; //弹框标题
      config.primaryButton = '取消'; //弹框左侧按钮。
      config.secondaryButton = '确定'; //弹框右侧按钮。
      config.imageRes = undefined; //TipsDialog用到，展示的图片。
      config.imageSize = { width: '64vp', height: '64vp' }; //TipsDialog用到，自定义图片尺寸。

      config.loading_loadSize = 60; //加载动画或进度条的大小
      config.loading_loadColor = Color.White; //加载动画或进度条的颜色
      config.loading_content = ''; //加载动画的提示文字
      config.loading_fontSize = 16; //文字大小
      config.loading_fontColor = Color.White; //文字颜色
      config.loading_backgroundColor = '#CC56D866'; //背景颜色，八位色值前两位为透明度
      config.loading_borderRadius = 10; //背景圆角

      config.toast_fontSize = 16; //文字大小
      config.toast_fontColor = Color.Black; //文字颜色
      config.toast_backgroundColor = '#CC0FCEE3'; //背景颜色，建议八位色值前两位为透明度
      config.toast_alignment = Alignment.Top; //土司Top显示
      config.toast_borderRadius = 8; //背景圆角
      config.toast_padding = { left: 16, right: 16, top: 12, bottom: 12 }; //Padding
      config.toast_imageSize = { width: 45, height: 45 }; //Tip图片尺寸。默认值：45*45vp
      config.toast_duration = 1500; //显示时长(1500ms-10000ms)
      config.toast_durationLong = 5000; //显示时长
    });
    ToastUtil.showToast("统二配置设置成功！");
  }

  /**
   * 默认的配置
   */
  defaultConfig() {
    DialogHelper.setDefaultConfig((config) => {
      config.autoCancel = true; //点击遮障层时，是否关闭弹窗，true表示关闭弹窗。false表示不关闭弹窗。默认值：true
      config.backCancel = true; //点击返回键或手势返回时，是否关闭弹窗；实现onWillDismiss函数时，该参数不起作用。true表示关闭弹窗。false表示不关闭弹窗。默认值：true。
      config.actionCancel = true; //点击操作按钮时，是否关闭弹窗。false表示不关闭弹窗。默认值：true。
      config.alignment = DialogAlignment.Default; //弹窗的对齐方式。
      config.offset = { dx: 0, dy: 0 }; //弹窗相对alignment所在位置的偏移量。默认值：{ dx: 0, dy: 0 }
      config.maskColor = 0x33000000; //自定义蒙层颜色。默认值 0x33000000
      config.backgroundColor = Color.White; //弹窗背板颜色。默认值：Color.White
      config.backgroundBlurStyle = BlurStyle.COMPONENT_ULTRA_THICK; //弹窗背板模糊材质。默认值：BlurStyle.COMPONENT_ULTRA_THICK
      config.cornerRadius = 20; //设置背板的圆角半径。可分别设置4个圆角的半径。

      config.title = '温馨提示'; //弹框标题
      config.primaryButton = '取消'; //弹框左侧按钮。
      config.secondaryButton = '确定'; //弹框右侧按钮。
      config.imageRes = undefined; //TipsDialog用到，展示的图片。
      config.imageSize = { width: '64vp', height: '64vp' }; //TipsDialog用到，自定义图片尺寸。默认值：64*64vp

      config.loading_loadSize = 60; //加载动画或进度条的大小
      config.loading_loadColor = Color.White; //加载动画或进度条的颜色
      config.loading_content = ''; //加载动画的提示文字
      config.loading_fontSize = 16; //文字大小
      config.loading_fontColor = Color.White; //文字颜色
      config.loading_backgroundColor = '#CC000000'; //背景颜色，八位色值前两位为透明度
      config.loading_borderRadius = 10; //背景圆角

      config.toast_fontSize = 16; //文字大小
      config.toast_fontColor = Color.White; //文字颜色
      config.toast_backgroundColor = '#CC000000'; //背景颜色，建议八位色值前两位为透明度
      config.toast_alignment = undefined; //土司显示位置
      config.toast_borderRadius = 8; //背景圆角
      config.toast_padding = { left: 16, right: 16, top: 12, bottom: 12 }; //Padding
      config.toast_imageSize = { width: 45, height: 45 }; //Tip图片尺寸。默认值：45*45vp
      config.toast_duration = 2000; //显示时长(1500ms-10000ms)
      config.toast_durationLong = 10000; //显示时长(10000ms)
    });
    ToastUtil.showToast("默认配置,设置成功！");
  }

  /**
   * 操作确认类弹出框
   */
  alertDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showAlertDialog({
        uiContext:this.getUIContext(),
        backgroundColor: Color.Orange,
        content: "确定保存该WPS文件吗？",
        onAction: (action) => {
          if (action == DialogAction.CANCEL) {
            ToastUtil.showToast(`您点击了取消按钮`);
          } else if (action == DialogAction.SURE) {
            ToastUtil.showToast(`您点击了确认按钮`);
          }
        }
      })
    } else if (index == 1) {
      //自定义按钮颜色
      DialogHelper.showAlertDialog({
        title: "提示",
        content: "确定保存该视频文件吗？",
        // primaryButton:'取消',
        secondaryButton: {
          value: "确认",
          fontColor: Color.Brown
        },
        onAction: (action) => {
          if (action == DialogAction.CANCEL) {
            ToastUtil.showToast(`您取消了保存`);
          } else if (action == DialogAction.SURE) {
            ToastUtil.showToast(`已保存`);
          }
        }
      })
    } else if (index == 2) {
      //自定义按钮和二级标题
      DialogHelper.showAlertDialog({
        primaryTitle: "提示",
        secondaryTitle: "保存前请确认文件",
        content: "确定保存该视频文件吗",
        primaryButton: "取消",
        secondaryButton: $r('app.string.btn_save'),
        onAction: (action) => {
          if (action == DialogAction.CANCEL) {
            ToastUtil.showToast(`您取消了保存`);
          } else if (action == DialogAction.SURE) {
            ToastUtil.showToast(`已保存`);
          }
        }
      })
    } else {
      //不带标题，不主动关闭弹框
      DialogHelper.showAlertDialog({
        title: "",
        content: "确定保存该视频文件吗",
        actionCancel: false, //点击操作按钮不关闭弹框
        autoCancel: false, //点击遮障层时，不关闭弹窗
        backCancel: false, //点击返回键，不关闭弹窗
        onAction: (action, dialogId) => {
          DialogHelper.closeDialog(dialogId); //关闭弹框
          if (action == DialogAction.CANCEL) {
            ToastUtil.showToast(`您取消了保存`);
          } else if (action == DialogAction.SURE) {
            ToastUtil.showToast(`已保存`);
          }
        }
      })
    }
  }

  /**
   * 信息确认类弹出框
   */
  confirmDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showConfirmDialog({
        checkTips: "是否记住密码？",
        content: "您是否退出当前应用",
        onCheckedChange: (check) => {
          ToastUtil.showToast(`${check}`);
        },
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else if (index == 1) {
      //自定义按钮
      DialogHelper.showConfirmDialog({
        checkTips: "是否记住密码？",
        content: "您是否退出当前应用",
        primaryButton: { value: "取消", fontColor: Color.Red },
        secondaryButton: "退出",
        onCheckedChange: (check) => {
          ToastUtil.showToast(`${check}`);
        },
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else if (index == 2) {
      //不显示标题
      DialogHelper.showConfirmDialog({
        title: "",
        checkTips: "是否记住密码？",
        content: "您是否退出当前应用",
        onCheckedChange: (check) => {
          ToastUtil.showToast(`${check}`);
        },
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else {
      //底部弹出
      DialogHelper.showConfirmDialog({
        checkTips: "是否记住密码？",
        content: "您是否退出当前应用",
        alignment: DialogAlignment.Bottom, //底部弹出
        offset: { dx: 0, dy: -35 },
        autoCancel: false, //点击遮障层时，不关闭弹窗
        onCheckedChange: (check) => {
          ToastUtil.showToast(`${check}`);
        },
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    }
  }

  /**
   * 提示弹出框
   */
  tipsDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showTipsDialog({
        uiContext:this.getUIContext(),
        content: '想要卸载这个APP嘛?',
        showInSubWindow:false,
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else if (index == 1) {
      //自定义图标和图标大小
      DialogHelper.showTipsDialog({
        imageRes: $r('sys.media.ohos_app_icon'),
        imageSize: { width: 50, height: 50 },
        content: '想要卸载这个APP嘛?',
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else if (index == 2) {
      //自定义图标和按钮
      DialogHelper.showTipsDialog({
        imageRes: $r('app.media.icon_tip_warn'),
        content: '想要卸载这个APP嘛?',
        primaryButton: "卸载",
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else {
      //自定义
      DialogHelper.showTipsDialog({
        imageRes: $r('sys.media.ohos_app_icon'),
        imageSize: { width: 50, height: 50 },
        content: '想要卸载这个APP嘛?',
        checkTips: "是否删除缓存文件",
        onCheckedChange: (check) => {
          ToastUtil.showToast(`${check}`);
        },
        primaryButton: {
          value: "取消",
          fontColor: Color.Black
        },
        secondaryButton: {
          value: "卸载",
          fontColor: Color.Red
        },
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    }
  }

  /**
   * 选择类弹出框
   */
  selectDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showSelectDialog({
        radioContent: ["文本菜单选项一", "文本菜单选项二", "文本菜单选项三", "文本菜单选项四", "文本菜单选项五"],
        onCheckedChanged: (index) => {
          ToastUtil.showToast(`${index}`);
        },
        onAction: (action, dialogId, value) => {
          ToastUtil.showToast(`${action} --- ${value}`);
        }
      })
    } else if (index == 1) {
      //自定义标题，内容，底部弹出框
      let dialogID = DialogHelper.showSelectDialog({
        title: "请选择",
        content: "选择您中意的文本菜单",
        alignment: DialogAlignment.Bottom, //底部弹出
        offset: { dx: 0, dy: -35 },
        autoCancel: false, //点击遮障层时，不关闭弹窗
        radioContent: ["文本菜单选项一", "文本菜单选项二", "文本菜单选项三", "文本菜单选项四", "文本菜单选项五"],
        onCheckedChanged: (index) => {
          ToastUtil.showToast(`${index}`);
          DialogHelper.closeDialog(dialogID);
        },
        onAction: (action, dialogId, value) => {
          ToastUtil.showToast(`${action} --- ${value}`);
          DialogHelper.closeDialog(dialogId);
        }
      })
    } else if (index == 2) {
      //自定义标题，内容，底部弹出框
      DialogHelper.showSelectDialog({
        title: "请选择菜单",
        content: "选择您中意的文本菜单",
        selectedIndex: 3, //设置选中索引
        autoCancel: false, //点击遮障层时，不关闭弹窗
        radioContent: [{
          title: "文本菜单选项一",
          icon: $r('app.media.icon_tip_warn'),
          action: () => {
          }
        },
          {
            title: "文本菜单选项二",
            icon: $r('sys.media.ohos_ic_public_voice'),
            action: () => {
            }
          },
          {
            title: "文本菜单选项三",
            icon: $r('sys.media.ohos_ic_public_voice'),
            action: () => {
            }
          },
          {
            title: "文本菜单选项四",
            icon: $r('sys.media.ohos_ic_public_voice'),
            action: () => {
            }
          },
          {
            title: "文本菜单选项五",
            icon: $r('sys.media.ohos_ic_public_voice'),
            action: () => {
            }
          }],
        onCheckedChanged: (index) => {
          ToastUtil.showToast(`${index}`);
        },
        onAction: (action, dialogId, value) => {
          ToastUtil.showToast(`${action} --- ${value}`);
        }
      })
    }
  }

  /**
   * 单行文本输入弹出框
   */
  textInputDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showTextInputDialog({
        autoCancel: false,
        backCancel: false,
        actionCancel: false,
        text: this.inputText,
        onAction: (action, dialogId, content) => {
          if (action == DialogAction.SURE) {
            this.inputText = content;
            ToastUtil.showToast(content);
          }
          DialogHelper.closeDialog(dialogId);
        }
      })
    } else if (index == 1) {
      //自定义按钮、标题、边距等
      DialogHelper.showTextInputDialog({
        title: "支付密码",
        placeholder: "请输入密码",
        inputType: InputType.Password,
        showPassword: false,
        showPasswordIcon: true,
        passwordIcon: {
          onIconSrc: $r('sys.media.ohos_ic_public_voice'),
          offIconSrc: $r('sys.media.ohos_ic_public_voice_off')
        },
        passwordRules:"1234567",
        cancelButton: {
          style: CancelButtonStyle.INPUT
        },
        defaultFocus: true, //主动拉起键盘
        text: this.inputText,
        alignment: DialogAlignment.Bottom,
        offset: { dx: 0, dy: -35 },
        contentAreaPadding: { top: 12, bottom: 16, left: 15, right: 15 },
        buttons: [
          { value: "取消", fontColor: Color.Red },
          "确认"
        ],
        onChange: (text) => {
          console.error("onChange: " + text);
        },
        onAction: (action, dialogId, content) => {
          this.inputText = content;
        }
      })
    } else if (index == 2) {
      //不带标题的
      DialogHelper.showTextInputDialog({
        title: "",
        buttons: [
          '取消',
          { value: '保存', fontColor: Color.Red }
        ],
        alignment: DialogAlignment.Bottom,
        offset: { dx: 0, dy: -35 },
        contentAreaPadding: { top: 30, bottom: 10, left: 15, right: 15 },
        text: this.inputText,
        placeholder: "请输入人员年龄",
        inputType: InputType.Number,
        maxLength: 3,
        inputFilter: {
          value: "[0-9]",
          error: (value) => {
            console.error("inputFilter: " + value);
          }
        },
        onChange: (text) => {
          console.error("onChange: " + text);
        },
        onAction: (action, dialogId, content) => {
          if (action == DialogAction.SURE) {
            this.inputText = content;
            ToastUtil.showToast(content);
          } else if (action == DialogAction.CANCEL) {

          }
        }
      })
    }
  }

  /**
   * 多行文本输入弹出框
   */
  textAreaDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showTextAreaDialog({
        text: this.inputText,
        onChange: (text) => {
          console.error("onChange: " + text);
        },
        onAction: (action, dialogId, content) => {
          if (action == DialogAction.SURE) {
            this.inputText = content;
            ToastUtil.showToast(content);
          }
        }
      })
    } else if (index == 1) {
      //自定义弹框高度
      DialogHelper.showTextAreaDialog({
        title: "评论内容",
        text: this.inputText,
        defaultFocus: true,
        placeholder: "请输入，[a-z,A-Z,0-9]，长度20",
        maxLength: 20,
        inputFilter: {
          value: "[0-9A-Za-z]",
          error: (value) => {
            LogUtil.error("inputFilter: " + value);
          }
        },
        inputHeight: 160,
        alignment: DialogAlignment.Bottom,
        offset: { dx: 0, dy: -35 },
        buttons: [{
          value: "确认",
          fontColor: Color.Red
        }],
        autoCancel: false,
        onChange: (text) => {
          console.error("onChange: " + text);
        },
        onAction: (action, dialogId, content) => {
            this.inputText = content;
        }
      })
    } else if (index == 2) {
      //自定义弹框，多按钮，
      DialogHelper.showTextAreaDialog({
        primaryTitle: "批示操作弹框",
        secondaryTitle: "请填写批示意见",
        text: this.inputText,
        buttons: ["暂存", "提交"],
        autoCancel: false,
        onChange: (text) => {
          console.error("onChange: " + text);
        },
        onAction: (action, dialogId, content) => {
          if (action == DialogAction.SURE) {
            this.inputText = content;
            ToastUtil.showToast(content);
          }
        }
      })
    }
  }


  /**
   * 自定义内容区弹出框
   */
  customContentDialog(index: number) {
    if (index == 0) {
      //简单使用，局部 @Builder
      DialogHelper.showCustomContentDialog({
        contentBuilder: () => {
          this.customTextBuilder("我是一个自定义文本内的弹框！")
        },
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else if (index == 1) {
      //自定义文本内容，使用全局 @Builder 和 自定义组件
      DialogHelper.showCustomContentDialog({
        title: "哈哈哈哈哈哈",
        contentBuilder: () => {
          this.customTextBuilderParam($r('app.string.module_desc'))
        },
        buttons: [
          '取消',
          { value: '知道了', fontColor: Color.Red }
        ],
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    } else if (index == 2) {
      //自定义图文，使用局部 @Builder 和 自定义组件
      DialogHelper.showCustomContentDialog({
        primaryTitle: "爱心提示",
        secondaryTitle: "其实我是一个二级标题",
        contentBuilder: () => {
          this.customTextImgBuilder("最受欢迎的三方库，@pura/harmony-utils",$r('app.media.test_as2'))
        },
        buttons: [
          { value: '取消', fontColor: Color.Black },
          { value: '知道了', fontColor: Color.Red }
        ],
        onAction: (action) => {
          ToastUtil.showToast(`${action}`);
        }
      })
    }
  }

  /**
   * 动作面板
   */
  bottomSheetDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showBottomSheetDialog({
        sheets: this.menuArray,
        onAction: (index) => {
          ToastUtil.showToast(`您点击了，${this.menuArray[index]}`);
        }
      })
    } else if (index == 1) {
      //带标题
      DialogHelper.showBottomSheetDialog({
        title: "请选择上传方式",
        sheets: this.menuArray,
        onAction: (index) => {
          ToastUtil.showToast(`您点击了，${this.menuArray[index]}`);
        }
      })
    } else if (index == 2) {
      //自定义按钮
      DialogHelper.showBottomSheetDialog({
        title: "请选择操作方式",
        sheets: [{
          value: "文本操作选项一",
          fontColor: Color.Red,
          fontSize: 18
        }, {
          value: "文本操作选项二",
          fontColor: Color.Blue,
          fontSize: 18
        }, {
          value: "文本操作选项三",
          fontColor: Color.Brown,
          fontSize: 18
        }, {
          value: "文本操作选项四",
          fontColor: Color.Green,
          fontSize: 18
        }],
        onAction: (index) => {
          ToastUtil.showToast(`您点击了第几个按钮，${index + 1}`);
        }
      })
    }
  }

  /**
   * 动作面板（IOS风格）
   */
  actionSheetDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showActionSheetDialog({
        actionCancel: false,
        sheets: this.menuArray,
        onAction: (index) => {
          ToastUtil.showToast(`您点击了，${this.menuArray[index]}`);
        }
      })
    } else if (index == 1) {
      //带标题
      DialogHelper.showActionSheetDialog({
        title: "请选择上传方式",
        cancelFontColor: Color.Red,
        cancelFontWeight: FontWeight.Normal,
        sheets: this.menuArray,
        onAction: (index) => {
          ToastUtil.showToast(`您点击了，${this.menuArray[index]}`);
        }
      })
    } else if (index == 2) {
      //自定义按钮
      DialogHelper.showActionSheetDialog({
        title: "请选择操作方式",
        sheets: [{
          value: "文本操作选项一",
          fontColor: Color.Red,
          fontSize: 18
        }, {
          value: "文本操作选项二",
          fontColor: Color.Blue,
          fontSize: 18
        }, {
          value: "文本操作选项三",
          fontColor: Color.Brown,
          fontSize: 18
        }, {
          value: "文本操作选项四",
          fontColor: Color.Green,
          fontSize: 18
        }],
        onAction: (index) => {
          ToastUtil.showToast(`您点击了第几个按钮，${index + 1}`);
        },
        onDidDisappear: () => {
          ToastUtil.showToast("ActionSheetDialog关闭了");
        }
      })
    }
  }

  /**
   * TextPickerDialog，选择器弹框
   */
  textPickerDialog(index: number) {
    if (index == 0) {
      DialogHelper.showTextPickerDialog({
        title: "请选择",
        range: this.likes,
        // range: this.rangeContent,
        onAction: (action: number, dialogId: string, value: string | string[]) => {
          if (action == DialogAction.SURE) {
            ToastUtil.showToast(`已选择：${value as string}`);
          }
        }
      })
    } else if (index == 1) {
      DialogHelper.showTextPickerDialog({
        autoCancel: false,
        title: "请选择",
        titleFontColor: Color.Pink,
        titleBackground: "#E6E6E6",
        primaryButton: "取消",
        secondaryButton: {
          value: "确定",
          fontColor: Color.Red,
        },
        range: this.multis,
        value: ["apple2", "orange3", "peach1"], //设置选中
        onAction: (action: number, dialogId: string, value: string | string[]) => {
          if (action == DialogAction.SURE) {
            ToastUtil.showToast(`已选择：${value as string}`);
          }
        },
        onChange: (value: string | string[], index: number | number[]): void => {
          LogUtil.error(`value: ${value}`);
          LogUtil.error(`index: ${index}`);
        }
      })
    } else if (index == 2) {
      let aiHuiList = AreaHelper.getCityByNameSync("安徽省");
      DialogHelper.showTextPickerDialog({
        range: aiHuiList,
        onAction: (action: number, dialogId: string, value: string | string[]) => {
          if (action == DialogAction.SURE) {
            ToastUtil.showToast(`已选择：${value}`);
          }
        }
      })
    } else if (index == 3) {
      let areas = AreaHelper.getAreaSync();
      DialogHelper.showTextPickerDialog({
        title: "请选择收货地址",
        range: areas,
        onAction: (action: number, dialogId: string, value: string | string[]) => {
          if (action == DialogAction.SURE) {
            ToastUtil.showToast(`已选择：${value}`);
          }
        }
      })
    }
  }


  /**
   * DatePickerDialog，日期选择器弹框
   */
  datePickerDialog(index: number) {
    if (index == 0) {
      DialogHelper.showDatePickerDialog({
        dateType: DateType.YmdHms,
        onAction: (action: number, dialogId: string, date: Date): void => {
          if (action == DialogAction.SURE) {
            let dateStr = DateUtil.getFormatDateStr(date, "yyyy-MM-dd HH:mm:ss");
            ToastUtil.showToast(`选中日期：${dateStr}`);
            LogUtil.error(`选中日期：${dateStr}`);
          }
        }
      })
    } else if (index == 1) {
      DialogHelper.showDatePickerDialog({
        primaryButton: {
          value: "取消",
          fontColor: Color.Red
        },
        secondaryButton: "确认",
        title: "请选择日期",
        dateType: DateType.YmdHm,
        // selected: new Date("2999-12-16 19:20:35"),
        start:new Date("1976-01-01 00:00:00"),
        end: new Date(),
        onAction: (action: number, dialogId: string, date: Date): void => {
          if (action == DialogAction.SURE) {
            let dateStr = DateUtil.getFormatDateStr(date, "yyyy-MM-dd HH:mm");
            ToastUtil.showToast(`选中日期：${dateStr}`);
            LogUtil.error(`选中日期：${dateStr}`);
          }
        }
      })
    } else if (index == 2) {
      DialogHelper.showDatePickerDialog({
        title: "请选择年月日",
        dateType: DateType.YmdH,
        canLoop: false,
        onAction: (action: number, dialogId: string, date: Date): void => {
          if (action == DialogAction.SURE) {
            let dateStr = DateUtil.getFormatDateStr(date, "yyyy-MM-dd HH");
            ToastUtil.showToast(`选中日期：${dateStr}`);
            LogUtil.error(`选中日期：${dateStr}`);
          }
        }
      })
    } else if (index == 3) {
      DialogHelper.showDatePickerDialog({
        title: "请选择时分秒",
        transition: AnimationHelper.transitionInDown(300),
        dateType: DateType.Hms,
        onAction: (action: number, dialogId: string, date: Date): void => {
          if (action == DialogAction.SURE) {
            let dateStr = DateUtil.getFormatDateStr(date, "HH:mm:ss");
            ToastUtil.showToast(`选中日期：${dateStr}`);
            LogUtil.error(`选中日期：${dateStr}`);
          }
        }
      })
    }
  }


  /**
   * 显示自定义弹窗
   */
  customDialog(index: number) {
    if (index == 0) {
      //自定义一个Tip弹出框
      let tipOptions: TipOptions = {
        autoCancel: true,
        backCancel: true,
        title: "提交成功",
        content: "请假单已成功提交给您的领导啦",
        levelMode:LevelMode.EMBEDDED,
        onAction: (action, dialogId) => {
          router.pushUrl({ url: "pages/spinkit/SpinKit1" });
          // DialogHelper.closeDialog(dialogId);
        }
      };
      DialogHelper.showCustomDialog(wrapBuilder(TipBuilder), tipOptions);
    } else if (index == 1) {
      //自定义一个底部的MenuLayout
      let menuOptions: MenuOptions = {
        transition:AnimationHelper.transitionInDown(),
        alignment: DialogAlignment.Bottom,
        title: "分享",
        menus: Utils.getMenus(),
        onItemClick: (menu) => {
          DialogHelper.showToast(menu.text);
          DialogHelper.closeDialog(menuOptions.dialogId ?? "");
        }
      };
      DialogHelper.showCustomDialog(wrapBuilder(MenuBuilder), menuOptions);
    } else if (index == 2) {
      //自定义一个左边的DrawerLayout
      let drawer: DrawerOptions = {
        width: px2vp(DisplayUtil.getWidth()) - 50, //自定义的宽度
        autoCancel: false,
        alignment: DialogAlignment.TopStart,
        keyboardAvoidMode: KeyboardAvoidMode.NONE,
        transition: AnimationHelper.transitionInLeft(250)
      };
      DialogHelper.showCustomDialog(wrapBuilder(DrawerBuilder), drawer);
    } else {
      //基于Lottie动画的自定义加载框
      let loadOptions: LoadOptions = new LoadOptions();
      loadOptions.backCancel = true;
      DialogHelper.showCustomDialog(wrapBuilder(LottieBuilder), loadOptions);
      setTimeout(() => {
        DialogHelper.closeDialog(loadOptions.dialogId ?? "");
      }, 10000)
    }
  }


  /**
   * 显示自定义半模态
   */
  showBindSheet(index: number) {
    // let targetId = this.getUniqueId();
    let targetId = "10001";

    //自定义一个底部的MenuLayout
    let menuOptions: MenuSheetOptions = {
      dialogId: DialogHelper.generateId(),
      title: {
        title: "分享我的动态",
      },
      detents: [SheetSize.FIT_CONTENT, SheetSize.MEDIUM, SheetSize.FIT_CONTENT],
      borderWidth: 10,
      borderColor: Color.White,
      targetId: targetId,
      mode: SheetMode.EMBEDDED,
      preferType: SheetType.BOTTOM,
      menus: Utils.getMenus(),
      onItemClick: (menu) => {
        router.pushUrl({ url: "pages/spinkit/SpinKit1" });
        DialogHelper.showToast(menu.text);
      }
    };
    DialogHelper.showBindSheet(wrapBuilder(MenuSheetBuilder), menuOptions);
  }


  /**
   * 显示进度加载类弹出框
   */
  loadingDialog(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showLoadingDialog({ autoCancel: true })
    } else if (index == 1) {
      //自定义文字内容
      DialogHelper.showLoadingDialog({
        loadColor: Color.White,
        content: "努力加载中",
        fontSize: 15,
        backgroundColor: '#ED000000',
        autoCancel: true,
      })
    } else if (index == 2) {
      //指定加载动画和加载动画的颜色
      DialogHelper.showLoadingDialog({
        loadType: SpinType.spinH,
        loadColor: $r('app.color.color_main'),
        backgroundColor: '#DD000000',
        fontColor: Color.White,
        borderRadius: 8
      })
    } else {
      //禁止点击返回关闭弹窗 和 禁止点击遮蔽层关闭弹窗
      let dialogId = DialogHelper.showLoadingDialog({
        loadType: SpinType.spinU,
        loadColor: $r('app.color.color_main'),
        marginTop: 20,
        content: "努力加载中",
        fontColor: $r('app.color.color_main'),
        autoCancel: false,
        backCancel: false
      })
      //延时关闭
      let timeoutID = setTimeout(() => {
        DialogHelper.closeDialog(dialogId); //关闭加载框
        clearTimeout(timeoutID);
      }, 5000);
    }
  }

  /**
   * 进度条加载弹框
   */
  loadingProgress(index: number) {
    if (index == 0) {
      //简单使用
      this.progress = 50;
      let dialogId = DialogHelper.showLoadingProgress({
        progress: this.progress,
      });
      //模拟网络
      let intervalID = setInterval(() => {
        if (this.progress < 100) {
          this.progress = this.progress + 1
          DialogHelper.updateLoading(dialogId, "", this.progress)
          console.log("progress: " + this.progress);
        } else {
          DialogHelper.closeDialog(dialogId); //加载成功
          ToastUtil.showToast("加载成功啦~");
          clearInterval(intervalID);
        }
      }, 100);
    } else if (index == 1) {
      //自定义加载内容和主题色
      this.progress = 10;
      let dialogId = DialogHelper.showLoadingProgress({
        progress: this.progress,
        content: "努力加载中",
        loadColor: $r('app.color.color_main'),
        fontColor: $r('app.color.color_main'),
        autoCancel: false,
        shadow: { radius: 0 }
      })
      //模拟网络
      let intervalID = setInterval(() => {
        if (this.progress < 100) {
          this.progress = this.progress + 1
          DialogHelper.updateLoading(dialogId, undefined, this.progress)
          console.log("progress: " + this.progress);
        } else {
          DialogHelper.closeDialog(dialogId); //加载成功
          ToastUtil.showToast("加载成功啦~");
          clearInterval(intervalID);
        }
      }, 150);
    } else if (index == 2) {
      //自定义加载内容和主题色
      this.progress = 0;
      let dialogId = DialogHelper.showLoadingProgress({
        progress: this.progress,
        content: "文件下载中",
        loadColor: Color.White,
        autoCancel: false,
      })
      //模拟网络
      let intervalID = setInterval(() => {
        if (this.progress < 100) {
          this.progress = this.progress + 1
          DialogHelper.updateLoading(dialogId, undefined, this.progress)
          console.log("progress: " + this.progress);
        } else {
          DialogHelper.closeDialog(dialogId); //加载成功
          ToastUtil.showToast("下载成功啦~");
          clearInterval(intervalID);
        }
      }, 200);
    }
  }

  /**
   * 自定义的吐司
   */
  toast(index: number) {
    if (index == 0) {
      //简单使用,长文本
      DialogHelper.showToast("女人什么年龄是最好？任何年龄都可以。因为每个年龄段都有不一样的美。看XX的穿搭你就会发现成熟女性的魅力，反而会更加的吸引人。难道这就是传说中的可爱在性感面前真的不值得一提吗？")
    } else if (index == 1) {
      //自定义的长吐司
      DialogHelper.showToastLong("这是一个自定义的长吐司呀~~~", {
        fontColor: Color.White,
        backgroundColor: "#DD0066FF",
        bottom: "120vp"
      });
    } else if (index == 2) {
      //自定义吐司
      DialogHelper.showToast("这是一个居中的自定义吐司", {
        fontColor: Color.Red,
        backgroundColor: Color.Black,
        alignment: Alignment.Center,
      });
    } else {
      //自定义吐司
      DialogHelper.showToastLong("这是一个距离顶部100vp的自定义吐司", {
        fontColor: Color.White,
        backgroundColor: "#99FF0000",
        alignment: Alignment.Top,
        offset: { dx: 0, dy: vp2px(100) }
      });
    }
  }

  /**
   * 带图标的吐司Tip
   */
  toastTip(index: number) {
    if (index == 0) {
      //简单使用
      DialogHelper.showToastTip({
        message: "操作成功",
        imageRes: $r('app.media.icon_tip_ok')
      })
    } else if (index == 1) {
      DialogHelper.showToastTip({
        message: "操作失败",
        imageRes: $r('app.media.icon_tip_warn')
      })
    } else if (index == 2) {
      //自定义背景和圆角
      DialogHelper.showToastTip({
        message: "操作成功",
        imageRes: $r('app.media.icon_tip_info'),
        backgroundColor: $r('app.color.color_main'),
        borderRadius: 6
      })
    } else {
      //自定义颜色和时长
      DialogHelper.showToastTip({
        message: "操作成功",
        imageRes: $r('app.media.icon_tip_ok'),
        // fontColor: $r('app.color.color_main'),
        alignment: DialogAlignment.Bottom,
        offset: { dy: -100, dx: 0 },
        duration: 2000,
        orientation: Orientation.HORIZONTAL,
        imageSize: { height: 24, width: 24 },
        margin: 8,
      })
    }
  }

  build() {
    Column() {
      TitleView({ title: "弹框指南" })
      Scroll(this.scroller) {
        Column() {
          CardButton({
            label: "弹框，加载框、吐司 的统一配置",
            buttons:["配置一", "配置二", "默认的配置"],
            onClickAction: (index: number): void => {
              if (index === 0) {
                this.customConfig1();
              } else if (index === 1) {
                this.customConfig2();
              } else {
                this.defaultConfig();
              }
            }
          })

          CardButton({
            label: "AlertDialog",
            content: "操作确认类弹出框",
            onClickAction: (index: number): void => this.alertDialog(index)
          })
          CardButton({
            label: "ConfirmDialog",
            content: "信息确认类弹出框",
            onClickAction: (index: number): void => this.confirmDialog(index)
          })
          CardButton({
            label: "TipsDialog",
            content: "提示弹出框",
            onClickAction: (index: number): void => this.tipsDialog(index)
          })
          CardButton({
            label: "SelectDialog",
            content: "选择类弹出框",
            num: 3,
            onClickAction: (index: number): void => this.selectDialog(index)
          })
          CardButton({
            label: "TextInputDialog",
            content: "单行文本输入弹出框",
            num: 3,
            onClickAction: (index: number): void => this.textInputDialog(index)
          })
          CardButton({
            label: "TextAreaDialog",
            content: "多行文本输入弹出框",
            num: 3,
            onClickAction: (index: number): void => this.textAreaDialog(index)
          })
          CardButton({
            label: "CustomContentDialog",
            content: "显示自定义内容区弹出框，同时支持定义操作区按钮样式",
            num: 3,
            onClickAction: (index: number): void => this.customContentDialog(index)
          })
          CardButton({
            label: "BottomSheetDialog",
            content: "显示动作面板",
            num: 3,
            onClickAction: (index: number): void => this.bottomSheetDialog(index)
          })
          CardButton({
            label: "ActionSheetDialog",
            content: "显示动作面板（IOS风格）",
            num: 3,
            onClickAction: (index: number): void => this.actionSheetDialog(index)
          })
          CardButton({
            label: "TextPickerDialog",
            content: "选择器弹框-TextPicker",
            num: 4,
            onClickAction: (index: number): void => this.textPickerDialog(index)
          })
          CardButton({
            label: "DatePickerDialog",
            content: "日期选择器弹框",
            num: 4,
            onClickAction: (index: number): void => this.datePickerDialog(index)
          })
          CardButton({
            label: "CustomDialog",
            content: "自定义弹窗",
            onClickAction: (index: number): void => this.customDialog(index)
          })
          CardButton({
            label: "BindSheet",
            content: "自定义半模态",
            onClickAction: (index: number): void => this.showBindSheet(index)
          })
            .id("10001")
          CardButton({
            label: "LoadingDialog",
            content: "进度加载类弹出框",
            onClickAction: (index: number): void => this.loadingDialog(index)
          })
          CardButton({
            label: "LoadingProgress",
            content: "进度条加载弹框",
            num: 3,
            onClickAction: (index: number): void => this.loadingProgress(index)
          })
          CardButton({
            label: "Toast",
            content: "自定义的吐司",
            onClickAction: (index: number): void => this.toast(index)
          })
          CardButton({
            label: "ToastTip",
            content: "带图标的吐司Tip",
            onClickAction: (index: number): void => this.toastTip(index)
          })
            .margin({ bottom: 15 })
        }
      }
      .layoutWeight(1)
      .width('100%')
      .backgroundColor($r('app.color.main_background'))
    }
  }


  //自定义文本
  @Builder
  customTextBuilder(content: string) {
    Text(content)
      .fontFamily('MyFont')
      .fontColor($r('app.color.font_title'))
      .fontSize(16)
      .padding(5)
      .textShadow({
        color: Color.Brown,
        type: ShadowType.COLOR,
        radius: 3,
        offsetX: 5,
        offsetY: 5,
        fill: false
      })
  }


  //自定义文本和图片
  @Builder
  customTextImgBuilder(content: ResourceStr, src: Resource) {
    CustomImageView({ content: content, src: src })
  }


}