多种弹窗实现方法鸿蒙示例代码

本文原创发布在华为开发者社区。
介绍

本示例介绍以下五种常见的弹窗场景化案例。

• 应用启动时的隐私政策和用户协议弹窗
  
• 网络哀求完成的结果提示弹窗
  
• 应用返回上一级页面的退出确认弹窗
  
• 个人信息填写的信息弹窗
  
• 应用使用过程中出现的付费类广告弹窗
  

弹窗场景化源码链接
效果预览

使用说明

• 进入应用会立马弹出一个隐私协议窗口，点同意关闭该窗口，点不同意退出应用。
  
• 点击网络哀求完成的结果提示弹窗，会弹出一个等待的子窗口弹窗，网络哀求完毕之后，会提示网络哀求的结果。
  
• 点击应用返回上一级页面的退出确认弹窗，手势滑动退出时会弹出一个确认退出的弹窗，只有点击确认了才会返回上一级页面。
  
• 点击个人信息填写的信息弹窗，点弹窗中的确认，会将弹窗中选择的数据返回给所需出现的页面。
  
• 点击应用使用过程中出现的付费类广告弹窗，会有一个自下而上的动画弹出广告弹窗，点击关闭时，同样会有一个自上而下的动画关闭弹窗。
  

实现思绪

应用启动时的隐私政策和用户协议弹窗

基于NavDestination组件的DIALOG模式实现此弹窗，点击《用户协议》或《隐私政策》跳转到对应网址，展现更加详细信息，同时使用用户所选项方式长期化保存到用户的选择，并通过onBackPressed拦截到退出操作，实现用户必须点击同意或者不同意才能使用App。焦点代码如下，源码参考PrivacyPolicyDialog.ets

1. NavDestination() {
2.   Column() {
3.     Text() {
4.       Span('《用户协议》')
5.         .onClick(() => {    // 点击跳转到具体链接
6.           this.pageInfos.pushPathByName('WebPage',
7.             'https://id1.cloud.huawei.com/AMW/portal/agreements/userAgreement/zh-cn_userAgreement.html');
8.         })
9.       Span('《隐私政策》')
10.         .onClick(() => {    // 点击跳转到具体链接
11.           this.pageInfos.pushPathByName('WebPage',
12.             'https://id1.cloud.huawei.com/AMW/portal/agreements/accPrivacyStatement/zh-cn_accPrivacyStatement.html');
13.         })
14.     }
15.     Button('同意')
16.       .onClick(() => {      // 点击持久化保存到用户的选择
17.         PreferenceMgr.getInstance().setValueSync<boolean>('isAgreePrivacyPolicy', true);
18.         this.pageInfos.pop();
19.       })
20.     Button('不同意')
21.       .onClick(() => {      // 点击持久化保存到用户的选择
22.         PreferenceMgr.getInstance().setValueSync<boolean>('isAgreePrivacyPolicy', false);
23.         const context = getContext(this) as common.UIAbilityContext;
24.         context.terminateSelf();
25.       })
26.   }
27. }
28. .backgroundColor('#33000E03')       // 设置一个具有透明度的背景，已达到蒙层的效果
29. .mode(NavDestinationMode.DIALOG)    // 设置mode为DIALOG
30. .onBackPressed(() => {
31.   return true;                      // 返回true，则拦截到退出该页面的操作
32. })

复制代码

网络哀求完成的结果提示弹窗

通过全局子窗口和全局自定义弹窗实现此弹窗。网络哀求过程中会先加载一个正在哀求样式的全局子窗口弹窗，哀求完毕之后，会加载哀求结果的一个全局自定义弹窗。焦点代码如下，源码参考HttpRequestDialog.ets，GlobalSubWindow.ets，GlobalCustomDialog.ets

• 全局子窗口
  a) 获取应用的WindowStage，使用AppStorage方式保存
  
  1. onWindowStageCreate(windowStage: window.WindowStage): void {
  2.     AppStorage.setOrCreate<window.WindowStage>('windowStage', windowStage);     // 在应用生命周期内，保存WindowStage
  3.     windowStage.loadContent('pages/DialogEntry', (err) => {
  4.       if (err.code) {
  5.         return;
  6.       }
  7.     });
  8.   }
  10. export class GlobalSubWindow {
  11.   // 全局子窗口中去获取上一步保存的WindowStage
  12.   private windowStage: window.WindowStage | undefined = AppStorage.get<window.WindowStage>('windowStage');
  13. }

  复制代码
  b) 显示全局子窗口
  
  1. public showWindow(): void {
  2.   if (this.subWindow) {
  3.     return;
  4.   }
  5.   try {
  6.     if (!this.windowStage) {
  7.       return;
  8.     }
  10.     // 创建子窗口
  11.     this.windowStage.createSubWindow('GlobalSubWindow', (err: BusinessError, data) => {
  12.       if (err.code) {
  13.         hilog.error(0x0000, 'GlobalSubWindowTag', 'create subWindow failed. %{public}s', JSON.stringify(err));
  14.         return;
  15.       }
  16.       this.subWindow = data;
  17.       if (this.subWindow) {
  18.         this.subWindow.setWindowSystemBarEnable([]);
  19.         this.subWindow.setWindowTouchable(true);
  20.         this.loadContent(entryName);    // 子窗口创建成功，去加载命名路由页面
  21.       }
  22.     })
  23.   } catch (exception) {
  24.     hilog.error(0x0000, 'GlobalSubWindowTag', 'create subWindow catch. %{public}s', JSON.stringify(exception));
  25.   }
  26. }

  复制代码
  c) 关闭全局子窗口
  
  1. // 通过回调函数形式，是否需要在关闭后进行其他操作
  2. public closeWindow(callback?: CloseCallback): void {
  3.   if (this.subWindow) {
  4.     this.subWindow.destroyWindow((err: BusinessError) => {
  5.       if (err.code) {
  6.         hilog.error(0x0000, 'GlobalSubWindowTag', 'destroy subWindow failed. %{public}s', JSON.stringify(err));
  7.         return;
  8.       }
  9.       this.subWindow = undefined;
  10.       callback instanceof Function ? callback(err.message) : null;
  11.     })
  12.   } else {
  13.     hilog.error(0x0000, 'GlobalSubWindowTag', 'close subWindow failed.');
  14.     callback instanceof Function ? callback('close subWindow failed.') : null;
  15.   }
  16. }

  复制代码
• 全局自定义弹窗
  

1. export class GlobalCustomDialog {
2.   private static instance: GlobalCustomDialog = new GlobalCustomDialog();
3.   private dialogId: number = 0;
5.   public static getInstance(): GlobalCustomDialog {
6.     return GlobalCustomDialog.instance;
7.   }
9.   public getDialogId() {
10.     return this.dialogId;
11.   }
13.   public open(content: string) {
14.     const that = GlobalContext.getInstance().getUIContext() as UIContext;
15.     promptAction.openCustomDialog({
16.       builder: CustomDialogBuilder.bind(that, content),
17.       alignment: DialogAlignment.Bottom,
18.       width: '45%',
19.       height: 36
20.     }).then((id: number) => {
21.       this.dialogId = id;
22.     })
24.     setTimeout(() => {
25.       result = '通过eventHub方法将结果返回';
26.       this.close();
27.     }, 1000);
28.   }
30.   public close() {
31.     const that = GlobalContext.getInstance().getUIContext() as UIContext;
32.     getContext(that).eventHub.emit('dialogReturnResult', result);
33.     promptAction.closeCustomDialog(this.dialogId);
34.   }
35. }

复制代码

应用返回上一级页面的退出确认弹窗

通过onBackPressed拦截到退出操作，并将弹窗弹出。焦点代码如下，源码参考SideGestureInterceptDialog.ets

1. NavDestination() {
2.   Column() {
3.     Text('Hello World!')
4.       .fontSize(50)
5.   }
6.   .height('100%')
7.   .justifyContent(FlexAlign.Center)
8. }
9. .alignSelf(ItemAlign.Center)
10. .backgroundColor('#DDDDDD')
11. .hideTitleBar(true)
12. .onReady((context: NavDestinationContext) => {
13.   this.pageInfos = context.pathStack;
14. })
15. .onBackPressed((): boolean => {
16.   promptAction.showDialog(this.dialogOptions, (err, data) => {
17.     if (err) {
18.       hilog.info(0x0000, 'DialogDemoTag', '%{public}s', err);
19.       return;
20.     }
21.     if (data.index === 0) { // 根据弹框点击的按钮确认是否返回上一层页面
22.       this.pageInfos.pop();
23.     }
24.   })
25.   return true; // 返回true则拦截
26. })

复制代码

个人信息填写的信息弹窗

通过@State和@Link关键字，实现将弹窗返回的数据通报给上一级页面。焦点代码如下，源码参考PersonInfoDialog.ets

1. @CustomDialog
2. export struct CustomDialogWidget {
3.   private controller?: CustomDialogController;
4.   private selectData: string = '';
5.   @Link result: string;
6.   @Require title: string = '';
7.   @Require dataSource: string[] = [];
9.   build() {
10.     Column({ space: 24 }) {
11.       ...
12.       Row({ space: 24 }) {
13.         Button('取消')
14.           .width('100%')
15.           .layoutWeight(1)
16.           .onClick(() => {
17.             this.controller?.close();
18.           })
19.         Button('确认')
20.           .width('100%')
21.           .layoutWeight(1)
22.           .onClick(() => {
23.             this.result = this.selectData;
24.             this.controller?.close();
25.           })
26.       }
27.       .width('100%')
28.     }
29.     ...
30.   }
31. }
33. @Component
34. export struct PersonInfoDialog {
35.   @State birthDate: string = '';
36.   @State sex: string = '';
37.   @State hobbies: string = '';
38.   private hobbiesController: CustomDialogController = new CustomDialogController({
39.     builder: CustomDialogWidget({
40.       result: this.hobbies,
41.       title: '兴趣爱好',
42.       dataSource: ['足球', '羽毛球', '旅游', '打游戏', '看书']
43.     }),
44.     alignment: DialogAlignment.Bottom,
45.     customStyle: true,
46.   });
48.   build() {
49.     NavDestination() {
50.       Column({ space: 16 })
51.         ...
52.         this.TextCommonWidget({
53.           leftImage: $r('app.media.ic_hobbies'),
54.           leftText: '兴趣爱好（多选）',
55.           rightText: this.hobbies,
56.           rightImage: $r('app.media.ic_right_arrow'),
57.           onClick: () => {
58.             this.hobbiesController.open();
59.           }
60.         })
61.       }
62.       .margin(16)
63.     }
64.     .backgroundColor('#DDDDDD')
65.     .hideTitleBar(true)
66.   }
67. }

复制代码

应用使用过程中出现的付费类广告弹窗

基于NavDestination组件的DIALOG模式实现此弹窗，弹窗弹出时出现自下而上的动画效果，关闭是出现自上而下的动画效果。焦点代码如下，源码参考AdvertDialog.ets

1. @Styles
2. clickEffectStyle() {
3.   .transition(TransitionEffect.OPACITY.animation({ duration: 300, curve: Curve.Friction }))
4.   .onClick(() => {
5.     animateTo({
6.       duration: 300,
7.       curve: Curve.Friction,
8.       onFinish: () => {
9.         this.pageInfos.pop();
10.       }
11.     }, () => {
12.       this.heightSize = '0%';
13.     })
14.   })
15. }
17. NavDestination() {
18.   Column({ space: 16 }) {
19.     Stack({ alignContent: Alignment.TopEnd }) {
20.       Image($r('app.media.advert_background'))
21.         .width('100%')
22.         .height(200)
23.         .borderRadius({ topLeft: 24, topRight: 24 })
24.       Image($r('app.media.ic_cancel'))
25.         .width(32)
26.         .height(32)
27.         .margin({ top: 24, right: 24 })
28.         .clickEffectStyle()
29.     }
30.   }
31.   .transition(
32.   TransitionEffect.move(TransitionEdge.BOTTOM)
33.     .animation({
34.       duration: 500,
35.       curve: Curve.Friction
36.     })
37.   )
38. }

复制代码

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