【拥抱鸿蒙】HarmonyOS之构建一个自定义弹框

​
​

弹窗是一种模态窗口，通常用来展示用户当前需要的或用户必须关注的信息或操作。在UI开发中，弹框是重要且不可忽视的组件。

HarmonyOS内置了多种系统弹框，分别有AlertDialog 、TextPickerDialog 、DatePickerDialog以及TimePickerDialog等。

​
本文将详细介绍系统弹框的封装和使用，并着重展现自定义弹框的实现。
​
​
系统弹框

AlertDialog

AlertDialog是警告弹窗，一般由App主动弹出，用于警告和确认用户的操作行为，需用户手动点击操作按钮来取消或进行下一步。
​
AlertDialog的实现

如下图中的“删除联系人”弹框，一个AlertDialog包含标题、内容和操作区三个部分组成，操作区包含两个按钮，我们可以在按钮的点击事件里添加对应响应逻辑。
​

​
以上弹框的实现代码如下：
​

1. AlertDialog.show(
3.       {
5.         title: '删除联系人', // 标题
7.         message: '是否需要删除所选联系人?', // 内容
9.         autoCancel: false, // 点击遮障层时，是否关闭弹窗。
11.         alignment: DialogAlignment.Bottom, // 弹窗在竖直方向的对齐方式
13.         offset: { dx: 0, dy: -20 }, // 弹窗相对alignment位置的偏移量
15.         primaryButton: {
17.           value: '取消',
19.           action: () => {
21.             console.info('Callback when the first button is clicked');
23.           }
25.         },
27.         secondaryButton: {
29.           value: '删除',
31.           fontColor: '#D94838',
33.           action: () => {
35.             console.info('Callback when the second button is clicked');
37.           }
39.         },
41.         cancel: () => { // 点击遮障层关闭dialog时的回调
43.           console.info('Closed callbacks');
45.         }
47.       }
49.     )
51.   })

复制代码

​
AlertDialog的封装

我们可以对AlertDialog进行封装，作为工具类调用。
​

1. export class CommonUtils {
3. /\*\*
5.    \* Common alert dialog
7.    \* @param title 标题
9.    \* @param msg 提示信息
11.    \* @param context 需要保存状态的UIAbility所对应的context
13.    \* @param primaryCallback 第一个按钮点击事件的回调
15.    \* @param secondCallback 第二个按钮点击事件的回调
17.    \*/
19.   commonAlertDialog(title:ResourceStr, msg: ResourceStr, context: common.UIAbilityContext, primaryCallback: Function, secondCallback: Function) {
21.     AlertDialog.show({
23.       title: title,
25.       message: msg,
27.       alignment: DialogAlignment.Bottom,
29.       offset: {
31.         dx: 0,
33.         dy: CommonConstants.DY\_OFFSET
35.       },
37.       primaryButton: {
39.         value: $r('app.string.cancel\_button'),
41.         action: () => {
43.           primaryCallback();
45.         }
47.       },
49.       secondaryButton: {
51.         value: $r('app.string.definite\_button'),
53.         action: () => {
55.           context.terminateSelf()
57.           secondCallback();
59.         }
61.       }
63.     });
65.   }
67. }

复制代码

这里创建了CommonUtils的工具类，把标题、提示信息作为创建自定义弹框的参数，按钮的点击事件可在回调里分别实现。
​
有了这种封装，我们就能很容易地在App里调用一个风格统一的AlertDialog弹框了。
​

1. CommonUtils.commonAlertDialog("提示", "是否退出登录", context, () => {
3.   // 取消
5.   
7. }, () => {
9.   // 确认
11.   
13. });

复制代码

​
TextPickerDialog

这是一种文本滑动选择弹窗，一般用于从多个选项中单选内容，再将用户所选的内容返回给调用方。
如下图所示，这里实现了一个选择“足球主队”的弹窗，用户上下滑动滑块再点击“确认”就可以完成选择。

TextPickerDialog的实现

​

1. @Entry
3. @Component
5. struct TextPickerDialogDemo {
7.   @State select: number = 2;
9.   private fruits: string[] = ['巴塞罗那', '曼城', '利物浦', '迈阿密国际', '拜仁慕尼黑', '多特蒙德', 'AC米兰', '那不勒斯'];
11. ​
13.   build() {
15.     Column() {
17.       Button('TextPickerDialog')
19.         .margin(20)
21.         .onClick(() => {
23.           TextPickerDialog.show({
25.             range: this.fruits, // 设置文本选择器的选择范围
27.             selected: this.select, // 设置初始选中项的索引值。
29.             onAccept: (value: TextPickerResult) => { // 点击弹窗中的“确定”按钮时触发该回调。
31.               // 设置select为按下确定按钮时候的选中项index，这样当弹窗再次弹出时显示选中的是上一次确定的选项
33.               this.select = value.index;
35.               console.info("TextPickerDialog:onAccept()" + JSON.stringify(value));
37.             },
39.             onCancel: () => { // 点击弹窗中的“取消”按钮时触发该回调。
41.               console.info("TextPickerDialog:onCancel()");
43.             },
45.             onChange: (value: TextPickerResult) => { // 滑动弹窗中的选择器使当前选中项改变时触发该回调。
47.               console.info('TextPickerDialog:onChange()' + JSON.stringify(value));
49.             }
51.           })
53.         })
55.     }
57.     .width('100%')
59.   }
61. }

复制代码

​
TextPickerDialog的封装

​
我们可以将选项作为参数进行TextPickerDialog的封装，并提供用户确认选项的回调。
这里的range的类型为：string[] | string[][] | Resource | TextPickerRangeContent[] | TextCascadePickerRangeContent[]，提供了多种数据源类型，我们一般使用Resource方便多语言适配。
​

1. export class CommonUtils {
3.   /\*\*
5.    \* Text picker dialog
7.    \* @param items 选项
9.    \* @param textCallback 选中返回
11.    \*/
13.   textPickerDialog(items: Resource, textCallback: Function) {
15.     if (this.isEmpty(items)) {
17.       Logger.error(CommonConstants.TAG\_COMMON\_UTILS, 'item is null')
19.       return;
21.     }
23. ​
25.     TextPickerDialog.show({
27.       range: items,
29.       canLoop: false,
31.       selected: 0,
33.       onAccept: (result: TextPickerResult) => {
35.         textCallback(result.value);
37.       },
39.       onCancel: () => {
41.         Logger.info(CommonConstants.TAG\_COMMON\_UTILS, 'TextPickerDialog canceled')
43.       }
45.     });
47.   }
49. }

复制代码

​
对工具类中的TextPickerDialog的调用如下：
​

1. CommonUtils.textPickerDialog($r('app.strarray.club\_array'), (selectedValue: string) => {
3.             this.club = selectedValue;
5.           })
7.         }

复制代码

​
这里的app.strarray.club\_array指向resources中的配置文件stringarray.json5，其内容如下：
​

1. {
3.     "strarray": [
5.         {
7.             "name": "club\_array",
9.             "value": [
11.                 {
13.                     "value": "巴塞罗那"
15.                 },
17.                 {
19.                     "value": "曼城"
21.                 },
23.                 {
25.                     "value": "利物浦"
27.                 },
29.                 {
31.                     "value": "迈阿密国际"
33.                 },
35.                 {
37.                     "value": "拜仁慕尼黑"
39.                 },
41.                 {
43.                     "value": "AC米兰"
45.                 },
47.                 {
49.                     "value": "多特蒙德"
51.                 },
53.                 {
55.                     "value": "阿贾克斯"
57.                 }
59.             ]
61.         }
63.     ]
65. }

复制代码

​
DatePickerDialog

DatePickerDialog是日期选择器弹框，用于选择特定格式的日期，并返回给调用方。
​

​
​
​
DatePickerDialog的实现

以“出生日期”选择器弹框为例，我们通过如下代码可以实现：
​

1. let selectedDate = new Date('1949-10-1');
3. DatePickerDialog.show({
5.             start: new Date('1900-1-1'), // 设置选择器的起始日期
7.             end: new Date('2000-12-31'), // 设置选择器的结束日期
9.             selected: selectedDate, // 设置当前选中的日期
11.             lunar: false,
13.             onDateAccept: (value: Date) => { // 点击弹窗中的“确定”按钮时触发该回调
15.               // 通过Date的setFullYear方法设置按下确定按钮时的日期，这样当弹窗再次弹出时显示选中的是上一次确定的日期
17.               selectedDate.setFullYear(value.getFullYear(), value.getMonth() + 1, value.getDate())
19.               console.info('DatePickerDialog:onDateAccept()' + JSON.stringify(value))
21.             },
23.             onCancel: () => { // 点击弹窗中的“取消”按钮时触发该回调
25.               console.info('DatePickerDialog:onCancel()')
27.             },
29.             onDateChange: (value: Date) => { // 滑动弹窗中的滑动选择器使当前选中项改变时触发该回调
31.               console.info('DatePickerDialog:onDateChange()' + JSON.stringify(value))
33.             }
35.           })
37.         })

复制代码

​
DatePickerDialog的封装

​
日期选择器包含起始日期、截止日期和默认选中日期三个参数，我们只需对用户确认选择后的回调里响应即可。
​

1. export class CommonUtils {
3.   /\*\*
5.    \* Date picker dialog
7.    \* @param dateCallback 确认选中日期回调
9.    \*/
11.   datePickerDialog(dateCallback: Function) {
13.     DatePickerDialog.show({
15.       start: new Date(CommonConstants.START\_TIME),
17.       end: new Date(),
19.       selected: new Date(CommonConstants.SELECT\_TIME),
21.       lunar: false,
23.       onDateAccept: (value: Date) => {
25.         let year: number = value.getFullYear();
27.         let month: number = value.getMonth() + 1;
29.         let day: number = value.getDate();
31.         let selectedDate: string = `${year}${CommonConstants.DATE\_YEAR}`+`${month}${CommonConstants.DATE\_MONTH}`+`${day}${CommonConstants.DATE\_DAY}`;
33.         dateCallback(selectedDate);
35.       }
37.     });
39.   }
41. }

复制代码

​
基于以上封装，datePickerDialog的调用可以简单地实现如下：
​

1. CommonUtils.datePickerDialog((dateValue: string) => {
3.     this.birthdate = dateValue;
5. })

复制代码

​
自定义弹框

除了系统弹框，还可以对弹框进行自定义。自定义弹框更加灵活，适用于更多的业务场景。
​
这里，我们实现一个包含多选器的自定义弹框，其实现效果如下图所示。

不难看出，这个弹框由标题、选择列表和按钮操作区构成。
​
自定义弹框需要使用装饰器@CustomDialog，
我们创建一个名为CustomDialogWidget的struct，并添加三个属性。
​
* items是数据源；
* selectedContent是选中结果拼接而成的字符串；
* controller是自定义弹框的控制器，其类型为CustomDialogController。
​

1. export default struct CustomDialogWidget {
3.   @State items: Array<CustomItem> = [];
5.   @Link selectedContent: string;
7.   private controller?: CustomDialogController;
9. }

复制代码

​
在组件的aboutToAppear()中实现数据源的获取，使用到resmgr.ResourceManager的getStringArrayValue方法。
​

1. aboutToAppear(): void {
3.     let context: Context = getContext(this);
5.     if (CommonUtils.isEmpty(context) || CommonUtils.isEmpty(context.resourceManager)) {
7.       Logger.error(CommonConstants.TAG\_CUSTOM, 'context or resourceManager is null');
9.       return;
11.     }
13. ​
15.     let manager = context.resourceManager;
17.     manager.getStringArrayValue($r('app.strarray.hobbies\_data').id, (error, hobbyArray) => {
19.       if (!CommonUtils.isEmpty(error)) {
21.         Logger.error(CommonConstants.TAG\_CUSTOM, 'error = ' + JSON.stringify(error));
23.       } else {
25.         hobbyArray.forEach((itemTitle: string) => {
27.           let item = new CustomItem();
29.           item.title = itemTitle;
31.           item.isChecked = false;
33.           this.items.push(item);
35. ​
37.           Logger.info(item.title);
39.         });
41.       }
43.     });
45.   }

复制代码

​
然后在Build()中实现其界面的搭建：
​

1.   build() {
3.     Column() {
5.       // 标题
7.       Text($r('app.string.title\_hobbies'))
9.         .fontSize($r('app.float.title\_hobbies\_size'))
11.         .fontColor($r('app.color.custom\_color'))
13.         .lineHeight($r('app.float.title\_line\_height'))
15.         .fontWeight(CommonConstants.BIGGER)
17.         .alignSelf(ItemAlign.Start)
19.         .margin({ left: $r('app.float.title\_left\_distance') })
21. ​
23.       // 选项列表
25.       List() {
27.        ForEach(this.items, (item: CustomItem) => {
29.          ListItem() {
31.           Row() {
33.             Text(item.title)
35.               .fontSize($r('app.float.label\_size'))
37.               .fontColor($r('app.color.custom\_color'))
39.               .layoutWeight(CommonConstants.WEIGHT\_ONE)
41.               .textAlign(TextAlign.Start)
43.               .fontWeight(CommonConstants.BIGGER)
45.               .margin({ left: $r('app.float.label\_left\_distance') })
47.             Toggle({ type: ToggleType.Checkbox, isOn: false })
49.               .onChange((isCheck) => {
51.                 item.isChecked = isCheck;
53.               })
55.               .width($r('app.float.toggle\_size'))
57.               .height($r('app.float.toggle\_size'))
59.               .margin({ right: $r('app.float.toggle\_right\_distance') })
61.           }
63.          }
65.          .height($r('app.float.options\_height'))
67.          .margin({
69.            top: $r('app.float.options\_top\_distance'),
71.            bottom:$r('app.float.options\_bottom\_distance')
73.          })
75.        }, (item: CustomItem) => JSON.stringify(item.title))
77.       }
79.       .margin({
81.         top: $r('app.float.list\_top\_distance'),
83.         bottom: $r('app.float.list\_bottom\_distance')
85.       })
87.       .divider({
89.         strokeWidth: $r('app.float.divider\_height'),
91.         color: $r('app.color.divider\_color')
93.       })
95.       .listDirection(Axis.Vertical)
97.       .edgeEffect(EdgeEffect.None)
99.       .width(CommonConstants.FULL\_WIDTH)
101.       .height($r('app.float.options\_list\_height'))
103. ​
105.       // 操作按钮
107.       Row() {
109.         Button($r('app.string.cancel\_button'))
111.           .dialogButtonStyle()
113.           .onClick(() => {
115.             this.controller?.close();
117.           })
119. ​
121.         Blank()
123.           .backgroundColor($r('app.color.custom\_blank\_color'))
125.           .width($r('app.float.blank\_width'))
127.           .opacity($r('app.float.blank\_opacity'))
129.           .height($r('app.float.blank\_height'))
131. ​
133.         Button($r('app.string.definite\_button'))
135.           .dialogButtonStyle()
137.           .onClick(() => {
139.             this.setSelectedItems(this.items);
141.             this.controller?.close();
143.           })
145.       }
147.     }
149.   }

复制代码

​
在确定按钮的回调中，我们调用setSelectedItems()，其实现如下：
​

1.   setSelectedItems(items: CustomItem[]) {
3.     if (CommonUtils.isEmpty(items)) {
5.       Logger.error(CommonConstants.TAG\_HOME, "Items is empty")
7.       return;
9.     }
11. ​
13.     let selectedText: string = items.filter((isCheckedItem: CustomItem) => isCheckedItem?.isChecked)
15.       .map<string>((checkedItem: CustomItem) => {
17.         return checkedItem.title!;
19.       })
21.       .join(CommonConstants.COMMA);
23. ​
25.     if (!CommonUtils.isEmpty(selectedText)) {
27.       this.selectedContent = selectedText;
29.     }
31.   }
33. }

复制代码

​
这里我们还用到了组件的属性扩展方法封装（用于提取重复的属性代码进行复用）：
​

1. @Extend(Button)
3. function dialogButtonStyle() {
5.   .fontSize($r('app.float.button\_text\_size'))
7.   .fontColor(Color.Blue)
9.   .layoutWeight(CommonConstants.WEIGHT\_ONE)
11.   .height($r('app.float.button\_height'))
13.   .backgroundColor(Color.White)
15. }

复制代码

​
自定义弹框的调用

​
自定义弹框的调用基于CustomDialogController，将CustomDialogWidget作为它的参数builder即可实现控制器调出我们预期的自定义弹框。
​

1. @State birthdate: string = '';
3. @State sex: string = '';
5. @State hobbies: string = '';
7. private sexArray: Resource = $r('app.strarray.sex\_array');
9. ​
11. customDialogController: CustomDialogController = new CustomDialogController({
13.     builder: CustomDialogWidget({
15.       selectedContent: this.hobbies
17.     }),
19.     alignment: DialogAlignment.Bottom,
21.     customStyle: true,
23.     offset: {
25.       dx: 0,
27.       dy: CommonConstants.DY\_OFFSET
29.     }
31.   });

复制代码

​
以上，我们总结了HarmonyOS系统弹框和自定义弹框的实现、封装及调用。
​

我是郑知鱼
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！