最受欢迎的三方库之 SpinKit
作者：桃花镇童长老
- 2025-06-26 安徽
本文字数：22309 字
阅读完需：约 73 分钟
SpinKit(API12)
🏆简介与推荐
SpinKit 是一个适用于 OpenHarmony/HarmonyOS 的加载动画库。
harmony-utils 一款功能丰富且极易上手的 HarmonyOS 工具库，借助众多实用工具类，致力于助力开发者迅速构建鸿蒙应用。
harmony-dialog 一款极为简单易用的零侵入弹窗，仅需一行代码即可轻松实现，无论在何处都能够轻松弹出。
📚下载安装
ohpm i @pura/spinkit
OpenHarmony ohpm
环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包
📚效果图
效果图略有卡顿，请运行源码或添加依赖，查看效果。
📚SpinKit 组件
| 属性 | 介绍 ||:----------|:-----------|| spinType | 动画的类型 || spinSize | 动画的大小，默认60 || spinColor | 动画的颜色，默认白色 |复制代码
SpinKit() SpinKit({ spinType: SpinType.spinA }) SpinKit({ spinType: SpinType.spinH }) SpinKit({ spinType: SpinType.spinA, spinColor: Color.Pink, spinSize: 70 })
复制代码
加载弹框请移步 harmony-dialog
示例代码
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@Componentexport 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 }) }
}
复制代码
💖沟通与交流🙏
使用过程中发现任何问题都可以提 Issue给我们；
当然，我们也非常欢迎你给我们发 PR 。
https://gitee.com/tongyuyan/harmony-utils
🌏开源协议
本项目基于 Apache License 2.0 ，在拷贝和借鉴代码时，请大家务必注明出处。
划线
评论
复制
发布于: 2025-06-26阅读数: 429
桃花镇童长老
关注
还未添加个人签名 2025-05-14 加入
还未添加个人简介
评论