鸿蒙(HarmonyOS)常见的三种弹窗方式

最近有一个想法，做一个针对鸿蒙官方API的工具箱项目，介绍常用的控件，以及在项目中如何使用，今天介绍Harmony中如何实现弹窗功能。
警告弹窗

警告弹窗是一个App中非常常用的弹窗，比方：

• 删除一条记载，提示一下用户：您确定要删除吗？
  
• 在App首页，点击返回时，提示一下用户：您确定要退出App吗？
  

使用AlertDialog.show方法举行弹窗，这个方法支持传入以下三个类中的恣意一个对象

• AlertDialogParamWithConfirm
  
• AlertDialogParamWithButtons
  
• AlertDialogParamWithOptions
  

以AlertDialogParamWithButtons对象举行说明，下面表格介绍常用属性：
参数名参数类型必填参数描述titleResourceStr否弹窗标题messageResourceStr是弹窗内容autoCancelboolean否点击遮障层时，是否关闭弹窗。默认值：trueprimaryButton{value: ResourceStr,fontColor?: ResourceColor,backgroundColor?: ResourceColor,action: () => void;}否按钮的文本内容、文本色、按钮背景致和点击回调secondaryButton{value: ResourceStr,fontColor?: ResourceColor,backgroundColor?: ResourceColor,action: () => void;}否按钮的文本内容、文本色、按钮背景致和点击回调cancel() => void否点击遮障层关闭dialog时的回调alignmentDialogAlignment否弹窗在竖直方向上的对齐方式。默认值：DialogAlignment.Default 接下来，我们用代码来实现一下：

1. AlertDialog.show({
2.     title:"弹窗标题",
3.     message:"这是弹窗内容",
4.     autoCancel:true,//点击遮障层时，是否关闭弹窗。默认值：true
5.     alignment: DialogAlignment.Center,//弹窗在竖直方向上的对齐方式。默认值：DialogAlignment.Default
6.     primaryButton: {
7.         value: "取消",
8.         fontColor: '#181818',
9.         action: () => {
10.             AppUtil.showToast("点击了取消按钮");
11.         }
12.     },
13.     secondaryButton: {
14.         value: "确定",
15.         fontColor: $r('app.color.mainColor'),
16.         action: () => {
17.             AppUtil.showToast("点击了确定按钮");
18.         }
19.     },
20.     cornerRadius:12,//弹窗边框弧度
21.     width:'80%', //弹窗宽度
22.     cancel:()=>{
23.         AppUtil.showToast("点击遮障层关闭dialog时的回调");
24.     }
25. })

复制代码

结果图：

参考官方链接:
   https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-methods-alert-dialog-box-0000001478341185-V2
  自界说弹窗

自界说弹窗相比警告弹窗更为灵活，支持自界说弹窗的样式与内容。
自界说弹窗的参数:

参数名参数类型必填参数描述builderCustomDialog是自界说弹窗内容构造器。cancel() => void否点击遮障层退出时的回调。autoCancelboolean否是否答应点击遮障层退出。默认值：truealignmentDialogAlignment否弹窗在竖直方向上的对齐方式。默认值：DialogAlignment.DefaultoffsetOffset否弹窗相对alignment所在位置的偏移量。customStyleboolean否弹窗容器样式是否自界说。默认值：false，弹窗容器的宽度根据栅格系统自适应，不跟随子节点；高度自适应子节点，最大为窗口高度的90%；圆角为24vp。gridCount8+number否弹窗宽度占栅格宽度的个数。默以为按照窗口巨细自适应，异常值按默认值处理，最大栅格数为系统最大栅格数。 代码实现
我们使用自界说弹窗实现隐私政策弹窗，新建PrivacyPolicyDialogBackUp类，也就是内容构造器，使用@CustomDialog修饰，内部有一个属性controller: CustomDialogController，这些都是常规写法，然后在build中实现界面布局。

1. @CustomDialog
2. export default struct PrivacyPolicyDialogBackUp{
3.     controller: CustomDialogController
5.     cancel!: () => void
6.     confirm!: () => void
8.     build() {
9.         Column() {
10.             Text($r('app.string.simple_user_policy')).fontSize(18).fontColor($r('app.color.title_color')).margin({ top: 30, bottom: 19 })
12.             Scroll(){
13.                 Text(){
14.                     Span($r('app.string.privacy_policy_start'))
15.                     Span($r('app.string.user_agreement_two')).fontColor($r('app.color.mainColor')).onClick(() => {
16.                         this.openWebUrl("/useragreement.html");
17.                     })
18.                     Span($r('app.string.and'))
19.                     Span($r('app.string.privacy_policy_two')).fontColor($r('app.color.mainColor')).onClick(() => {
20.                         this.openWebUrl("/privacypolicy.html");
21.                     })
22.                     Span($r('app.string.simple_privacy_policy'))
23.                 }.fontSize(16).fontColor($r('app.color.body_color')).margin({
24.                     left:25,
25.                     right:25
26.                 })
27.             }.height(120)
29.             Column(){
30.                 Button($r('app.string.disagree_privacy_policy')).onClick(() => {
31.                     this.controller.close();
32.                     this.cancel();
33.                 }).fontColor($r('app.color.other_color')).fontSize(15).backgroundColor(Color.Transparent)
35.                 Button($r('app.string.agree_privacy_policy')).onClick(() => {
36.                     this.controller.close();
37.                     this.confirm();
38.                 }).fontColor($r('app.color.white')).fontSize(17)
39.                     .linearGradient({
40.                         direction: GradientDirection.Right, colors:[[$r('app.color.start_main_color'),0.0],[$r('app.color.end_main_color'),1.0]]
41.                     }).width('80%').margin({
42.                     top:15,bottom:21
43.                 }).borderRadius(24)
44.             }
45.         }
46.     }
48.     openWebUrl(urlSuffix:string){
49.         let url= AppConstant.URL+urlSuffix;
50.         logger.info("url:"+url)
51.         router.pushUrl({
52.             url: Pages.WebViewPage,
53.             params:{
54.                 data1: 'message',
55.                 url: url,  // 传递的 URL 参数
56.             }
57.         }, router.RouterMode.Single)
58.     }
59. }

复制代码

在组件中创建CustomDialogController实例，指定builder属性，就是上面写的内容构造器

1. privacyPolicyDialog: CustomDialogController = new CustomDialogController({
2.   builder: PrivacyPolicyDialog({
3.     cancel:this.onCancel.bind(this),
4.     confirm:this.onAgree.bind(this)
5.   }),
6.   alignment: DialogAlignment.Default,  // 可设置dialog的对齐方式，设定显示在底部或中间等，默认为底部显示
7.   cornerRadius:13,
8.   autoCancel:false
9. })

复制代码

体现弹窗

1. this.privacyPolicyDialog.open();

复制代码

关闭弹窗

1. this.privacyPolicyDialog.close();

复制代码

结果图：

参考官方链接:
   https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-methods-custom-dialog-box-0000001477981237-V2
  加载中弹窗

加载中弹窗弹窗其实就是自界说弹窗实现，只是内容构造器不一样而已，给Image组件设置animation动画，无穷循环图片

1. @CustomDialog
2. export default struct LoadingDialog {
3.     controller: CustomDialogController
5.     private loadingText: string|Resource = "加载中..."
6.     @State angle:number = 10
8.     aboutToAppear(){
9.         setTimeout(()=>{
10.             this.angle = 1440 // 设定一个大的旋转角度，确保动画执行
11.         },100)
12.     }
14.     build() {
15.         Column(){
16.             Image($r('app.media.icon_loading_3'))
17.                 .width(70)
18.                 .height(70)
19.                 .rotate({angle:this.angle})
20.                 .animation({
21.                     duration: 5000,
22.                     curve: Curve.Linear,
23.                     delay: 0,
24.                     iterations: -1, // 设置-1表示动画无限循环
25.                     playMode: PlayMode.Normal
26.                 })
29.             Text(this.loadingText).fontSize(14).fontColor(0xffffff).margin({top:10})
30.         }.backgroundColor(0x88000000).borderRadius(10).padding({
31.             left:20,right:20,top:10,bottom:10
32.         })
33.     }
34. }

复制代码

结果图：

源码下载：

   https://github.com/ansen666/harmony_tools
  如果您想第一时间看我的后期文章，扫码关注公众号

1.       安辉编程笔记 - 开发技术分享
2.              扫描二维码加关注

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。