HarmonyOS ArkTS 应用添加弹窗（八）

概述

在我们日常使用应用的时候，大概会进行一些敏感的操作，好比删除联系人，这时候我们给应用添加弹窗来提示用户是否需要执行该操作，如下图所示：

弹窗是一种模态窗口，通常用来展示用户当前需要的或用户必须关注的信息或操作。在弹出框消散之前，用户无法操作其他界面内容。ArkUI为我们提供了丰富的弹窗功能，弹窗按照功能可以分为以下两类：

• 确认类：例如警告弹窗AlertDialog。
  
• 选择类：包括文本选择弹窗TextPickerDialog 、日期滑动选择弹窗DatePickerDialog、时间滑动选择弹窗TimePickerDialog等。
  

您可以根据业务场景，选择差别类型的弹窗。部分弹窗结果图如下：

此外，如果上述弹窗还不能满足您的需求，或者需要对弹窗的布局和样式进行自定义，您还可以使用自定义弹窗CustomDialog。
下文将分别介绍AlertDialog 、TextPickerDialog 、DatePickerDialog以及CustomDialog的使用。
警告弹窗

警告弹窗AlertDialog由以下三部分区域构成，对应下面的示意图：

• 标题区：为可选的。
  
• 内容区：显示提示消息。
  
• 操作按钮区：用户做”确认“或者”取消“等操作。
  

以下示例代码，演示了如何使用AlertDialog 实现上图所示的警告弹窗。AlertDialog可以设置两个操作按钮，示例代码中分别使用primaryButton和secondaryButton实现了“取消”和“删除”操作按钮，操作按钮可以通过action响应点击变乱

1. Button('点击显示弹窗')
2.   .onClick(() => {
3.     AlertDialog.show(
4.       {
5.         title: '删除联系人', // 标题
6.         message: '是否需要删除所选联系人?', // 内容
7.         autoCancel: false, // 点击遮障层时，是否关闭弹窗。
8.         alignment: DialogAlignment.Bottom, // 弹窗在竖直方向的对齐方式
9.         offset: { dx: 0, dy: -20 }, // 弹窗相对alignment位置的偏移量
10.         primaryButton: {
11.           value: '取消',
12.           action: () => {
13.             console.info('Callback when the first button is clicked');
14.           }
15.         },
16.         secondaryButton: {
17.           value: '删除',
18.           fontColor: '#D94838',
19.           action: () => {
20.             console.info('Callback when the second button is clicked');
21.           }
22.         },
23.         cancel: () => { // 点击遮障层关闭dialog时的回调
24.           console.info('Closed callbacks');
25.         }
26.       }
27.     )
28.   })

复制代码

此外，您还可以使用AlertDialog，构建只包含一个操作按钮的确认弹窗，使用confirm响应操作按钮回调。

1. AlertDialog.show(
2.   {
3.     title: '提示',
4.     message: '提示信息',
5.     autoCancel: true,
6.     alignment: DialogAlignment.Bottom,
7.     offset: { dx: 0, dy: -20 },
8.     confirm: {
9.       value: '确认',
10.       action: () => {
11.         console.info('Callback when confirm button is clicked');
12.       }
13.     },
14.     cancel: () => {
15.       console.info('Closed callbacks')
16.     }
17.   }
18. )

复制代码

选择类弹窗

选择类弹窗用于方便用户选择相干数据，好比选择喜欢吃的水果、出生日期等等。下面我们以TextPickerDialog和DatePickerDialog为例，来介绍选择类弹窗的使用。
文本选择弹窗

TextPickerDialog为文本滑动选择器弹窗，根据指定的选择范围创建文本选择器，展示在弹窗上，例如下面这段示例代码使用TextPickerDialog实现了一个水果选择弹窗。示例代码中使用selected指定了弹窗的初始选择项索引为2，对应的数据为“香蕉”。当用户点击“确定”操作按钮后，会触发onAccept变乱回调，在回调中将选中的值，通报给宿主中的select变量。

1. @Entry
2. @Component
3. struct TextPickerDialogDemo {
4.   @State select: number = 2;
5.   private fruits: string[] = ['苹果', '橘子', '香蕉', '猕猴桃', '西瓜'];
7.   build() {
8.     Column() {
9.       Button("TextPickerDialog")
10.         .margin(20)
11.         .onClick(() => {
12.           TextPickerDialog.show({
13.             range: this.fruits, // 设置文本选择器的选择范围
14.             selected: this.select, // 设置初始选中项的索引值。
15.             onAccept: (value: TextPickerResult) => { // 点击弹窗中的“确定”按钮时触发该回调。
16.               // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
17.               this.select = value.index;
18.               console.info("TextPickerDialog:onAccept()" + JSON.stringify(value));
19.             },
20.             onCancel: () => { // 点击弹窗中的“取消”按钮时触发该回调。
21.               console.info("TextPickerDialog:onCancel()");
22.             },
23.             onChange: (value: TextPickerResult) => { // 滑动弹窗中的选择器使当前选中项改变时触发该回调。
24.               console.info("TextPickerDialog:onChange()" + JSON.stringify(value));
25.             }
26.           })
27.         })
28.     }
29.     .width('100%')
30.   }
31. }

复制代码

结果图如下：

日期选择弹窗

下面我们介绍另一种常用的选择类弹窗DatePickerDialog，它是日期滑动选择器弹窗，根据指定的日期范围创建日期滑动选择器，展示在弹窗上。DatePickerDialog的使用非常广泛，好比当我们需要输入个人出生日期的时候，就可以使用DatePickerDialog。下面的示例代码实现了一个日期选择弹窗：

1. @Entry
2. @Component
3. struct DatePickerDialogDemo {
4.   selectedDate: Date = new Date("2010-1-1")
6.   build() {
7.     Column() {
8.       Button("DatePickerDialog")
9.         .margin(20)
10.         .onClick(() => {
11.           DatePickerDialog.show({
12.             start: new Date("1900-1-1"), // 设置选择器的起始日期
13.             end: new Date("2023-12-31"), // 设置选择器的结束日期
14.             selected: this.selectedDate, // 设置当前选中的日期
15.             lunar: false,
16.             onAccept: (value: DatePickerResult) => { // 点击弹窗中的“确定”按钮时触发该回调
17.               // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
18.               this.selectedDate.setFullYear(value.year, value.month, value.day)
19.               console.info("DatePickerDialog:onAccept()" + JSON.stringify(value))
20.             },
21.             onCancel: () => { // 点击弹窗中的“取消”按钮时触发该回调
22.               console.info("DatePickerDialog:onCancel()")
23.             },
24.             onChange: (value: DatePickerResult) => { // 滑动弹窗中的滑动选择器使当前选中项改变时触发该回调
25.               console.info("DatePickerDialog:onChange()" + JSON.stringify(value))
26.             }
27.           })
28.         })
29.     }
30.     .width('100%')
31.   }
32. }

复制代码

结果图如下：

自定义弹窗

自定义弹窗的使用更加灵活，适用于更多的业务场景，在自定义弹窗中您可以自定义弹窗内容，构建更加丰富的弹窗界面。自定义弹窗的界面可以通过装饰器@CustomDialog定义的组件来实现，然后结合CustomDialogController来控制自定义弹窗的显示和潜伏。下面我们通过一个兴趣爱好的选择框来介绍自定义弹窗的使用。

从上面的结果图可以看出，这个选择框是一个多选的列表弹窗，我们可以使用装饰器@CustomDialog，结合List组件来完成这个弹窗布局，实现步调如下：
1、初始化弹窗数据。

先准备好资源文件和数据实体类。此中资源文件stringarray.json创建在resources/base/element目次下，文件根节点为strarray。

1. {
2.   "strarray": [
3.     {
4.       "name": "hobbies_data",
5.       "value": [
6.         {
7.           "value": "Soccer"
8.         },
9.         {
10.           "value": "Badminton"
11.         },
12.         {
13.           "value": "Travelling"
14.         },
15.         ...
16.       ]
17.     }
18.   ]
19. }

复制代码

实体类HobbyBean用来封装自定义弹窗中的"兴趣爱好"数据。

1. export default class HobbyBean {
2.   label: string;
3.   isChecked: boolean;
4. }

复制代码

然后创建一个ArkTS文件CustomDialogWidget，用来封装自定义弹窗，使用装饰器@CustomDialog修饰CustomDialogWidget表示这是一个自定义弹窗。使用资源管理对象manager获取数据，并将数据封装到hobbyBeans。

1. @CustomDialog
2. export default struct CustomDialogWidget {
3.   @State hobbyBeans: HobbyBean[] = [];
5.   aboutToAppear() {
6.     let context: Context = getContext(this);
7.     let manager = context.resourceManager;
8.     manager.getStringArrayValue($r('app.strarray.hobbies_data'), (error, hobbyResult) => {
9.       ...
10.       hobbyResult.forEach((hobbyItem: string) => {
11.         let hobbyBean = new HobbyBean();
12.         hobbyBean.label = hobbyItem;
13.         hobbyBean.isChecked = false;
14.         this.hobbyBeans.push(hobbyBean);
15.       });
16.     });
17.   }
19.   build() {...}
20. }

复制代码

2、 创建弹窗组件。

controller对象用于控制弹窗的控制和潜伏，hobbies表示弹窗选中的数据结果。setHobbiesValue方法用于筛选出被选中的数据，赋值给hobbies。

1. @CustomDialog
2. export default struct CustomDialogWidget {
3.   @State hobbyBeans: HobbyBean[] = [];
4.   @Link hobbies: string;
5.   private controller: CustomDialogController;
7.   aboutToAppear() {...}
9.   setHobbiesValue(hobbyBeans: HobbyBean[]) {
10.     let hobbiesText: string = '';
11.     hobbiesText = hobbyBeans.filter((isCheckItem: HobbyBean) =>
12.     isCheckItem?.isChecked)
13.       .map((checkedItem: HobbyBean) => {
14.         return checkedItem.label;
15.       }).join(',');
16.     this.hobbies = hobbiesText;
17.   }
19.   build() {
20.     Column() {
21.       Text($r('app.string.text_title_hobbies'))...
22.       List() {
23.         ForEach(this.hobbyBeans, (itemHobby: HobbyBean) => {
24.           ListItem() {
25.             Row() {
26.               Text(itemHobby.label)...
27.               Toggle({ type: ToggleType.Checkbox, isOn: false })...
28.                 .onChange((isCheck) => {
29.                   itemHobby.isChecked = isCheck;
30.                 })
31.             }
32.           }
33.         }, itemHobby => itemHobby.label)
34.       }
36.       Row() {
37.         Button($r("app.string.cancel_button"))...
38.           .onClick(() => {
39.             this.controller.close();
40.           })
41.         Button($r("app.string.definite_button"))...
42.           .onClick(() => {
43.             this.setHobbiesValue(this.hobbyBeans);
44.             this.controller.close();
45.           })
46.       }
47.     }
48.   }
49. }

复制代码

3、 使用自定义弹窗。

在自定义弹窗的使用页面HomePage中先定义一个变量hobbies，使用装饰器@State修饰，和自定义弹窗中的@Link 装饰器修饰的变量进行双向绑定。然后我们使用alignment和offset设置弹窗的位置在屏幕底部，并且间隔底部20vp。末了我们在自定义组件TextCommonWidget（详细实现可以参考《构建多种样式弹窗》Codelab源码）的点击变乱中，调用customDialogController的open方法，用于显示弹窗。

1. @Entry
2. @Component
3. struct HomePage {
4.   customDialogController: CustomDialogController = new CustomDialogController({
5.     builder: CustomDialogWidget({
6.       onConfirm: this.setHobbiesValue.bind(this),
7.     }),
8.     alignment: DialogAlignment.Bottom,
9.     customStyle: true,
10.     offset: { dx: 0,dy: -20 }
11.   });
13.   setHobbiesValue(hobbyArray: HobbyBean[]) {...}
15.   build() {
16.     ...
17.       TextCommonWidget({
18.         ...
19.         title: $r("app.string.title_hobbies"),
20.         content: $hobby,
21.         onItemClick: () => {
22.           this.customDialogController.open();
23.         }
24.       })
25.     ...
26.   }
27. }

复制代码

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