鸿蒙应用开发从入门到实战（二十）：ArkUI内置弹窗组件

大家好，我是潘Sir，持续分享IT技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容、欢迎关注！
弹窗是移动应用中常见的一种用户界面元素，常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS提供了多种内置的弹窗供开发者使用，除此之外还支持自定义弹窗，来满足各种不同的需求。
一、消息提示Toast

1.1 概述

Toast（消息提示），常用于显示一些简短的消息或提示，一般会在短暂停留后自动消失。具体效果如下

1.2 使用说

可使用@ohos.promptAction模块中的showToast()方法显示 Toast 提示，使用时需要先导入@ohos.promptAction模块，如下

1. import promptAction from '@ohos.promptAction'

复制代码

showToast()方法的参数定义如下

1. showToast(options: { message: string | Resource,duration?: number,bottom?: string | number})

复制代码

• message
  

message属性用于设置提示信息

• duration
  

duration属性用于设置提示信息停留时长，单位为毫秒，取值范围是[1500,10000]

• bottom
  

bottom属性用于设置提示信息到底部的距离
示例代码
pages/component目录下新建dialog目录，新建ToastPage.ets文件

1. import promptAction from '@ohos.promptAction';
3. @Entry
4. @Component
5. struct ToastPage {
6.   build() {
7.     Column() {
8.       Button('提示信息')
9.         .onClick(() => {
10.           promptAction.showToast({
11.             message: '网络连接已断开',
12.             duration: 2000,
13.             bottom: 50
14.           });
15.         })
16.     }.width('100%')
17.     .height('100%')
18.     .justifyContent(FlexAlign.Center)
19.   }
20. }

复制代码

二、警告对话框AlertDialog

2.1 概述

AlertDialog（警告对话框）用于向用户发出警告或确认操作的提示，确保用户在敏感操作前进行确认。具体效果如下

示例代码
pages/component/dialog/新建AlertDialogPage.ets文件

1. @Entry
2. @Component
3. struct AlertDialogPage {
4.   build() {
5.     Column() {
6.       Button('删除')
7.         .backgroundColor(Color.Red)
8.         .onClick(() => {
9.           AlertDialog.show(
10.             {
11.               title: '删除该记录？', //弹窗标题
12.               message: '删除后无法恢复，您确认要删除吗？', //弹窗信息
13.               autoCancel: true, //点击遮障层时，是否关闭弹窗
14.               alignment: DialogAlignment.Bottom, //弹窗位置
15.               offset: { dx: 0, dy: -20 }, //相对于弹窗位置的偏移量
16.               primaryButton: { //主要按钮，位于左侧
17.                 value: '确认', //按钮内容
18.                 fontColor: Color.Red, //字体颜色
19.                 action: () => { //点击回调
20.                   console.log('确认删除')
21.                 }
22.               },
23.               secondaryButton: { //次要按钮，位于右侧
24.                 value: '取消',
25.                 action: () => {
26.                   console.log('取消删除')
27.                 }
28.               },
29.               cancel: () => { //点击遮罩层取消时的回调
30.                 console.info('Closed callbacks')
31.               }
32.             }
33.           )
34.         })
36.     }.width('100%')
37.     .height('100%')
38.     .justifyContent(FlexAlign.Center)
39.   }
40. }

复制代码

2.2 使用说明

可使用全局方法AlertDialog.show()显示警告对话框。
官网说明：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-methods-alert-dialog-box-0000001478341185-V2
三、操作列表弹窗ActionSheet

3.1 概述

ActionSheet（操作列表弹窗）用于提供一组选项给用户选择，用户从中选择后，可执行相应的操作。具体效果如下

示例代码
拷贝icon_copy.png、icon_cut.png、icon_delete.png到resources/base/media目录
pages/component/dialog/新建ActionSheetPage.ets文件

1. @Entry
2. @Component
3. struct ActionSheetPage {
4.   build() {
5.     Column() {
6.       Button('选择操作')
7.         .onClick(() => {
8.           ActionSheet.show({
9.             title: '文件操作', //弹窗标题
10.             message: '请选择你要对该文件执行的操作', //弹窗内容
11.             autoCancel: true, //点击遮障层时，是否关闭弹窗
12.             alignment: DialogAlignment.Bottom, //弹窗位置
13.             offset: { dx: 0, dy: -20 }, //弹窗相对alignment位置的偏移量
14.             confirm: { //底部按钮
15.               value: '取消', //按钮文本内容
16.               action: () => { //按钮回调函数
17.                 console.log('点击按钮取消')
18.               }
19.             },
20.             // cancel: () => { //点击遮障层关闭弹窗时的回调
21.             //   console.log('点击遮障层取消')
22.             // },
23.             sheets: [ //操作选项列表
24.               {
25.                 icon: $r('app.media.icon_copy'), //图标
26.                 title: '复制', //文本
27.                 action: () => { //回调
28.                   console.log('复制文件')
29.                 }
30.               },
31.               {
32.                 icon: $r('app.media.icon_cut'),
33.                 title: '剪切',
34.                 action: () => {
35.                   console.log('剪切文件')
36.                 }
37.               },
38.               {
39.                 icon: $r('app.media.icon_delete'),
40.                 title: '删除',
41.                 action: () => {
42.                   console.log('删除文件')
43.                 }
44.               }
45.             ]
46.           })
47.         })
48.     }.width('100%')
49.     .height('100%')
50.     .justifyContent(FlexAlign.Center)
51.   }
52. }

复制代码

3.2 使用说明

可使用全局方法ActionSheet.show()显示操作列表弹窗
官网地址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-methods-action-sheet-0000001478061737-V2
四、选择器弹窗TextPickerDialog&DatePickerDialog&TimePickerDialog

4.1 概述

选择器弹窗用于让用户从一个列表中选择一个具体的值。ArkTS内置了多种选择器弹窗，例如文本选择器、日期选择器、时间选择器等等，各选择器效果如下

• TextPickerDialog（文本滑动选择器弹窗）
  

示例代码
pages/component/dialog/新建TextPickerDialogPage.ets文件

1. @Entry
2. @Component
3. struct TextPickerDialogPage {
4.   fruits: string[] = ['苹果', '橘子', '香蕉', '鸭梨', '西瓜']
5.   @State selectedIndex: number = 0
7.   build() {
8.     Column({ space: 50 }) {
9.       Text(this.fruits[this.selectedIndex])
10.         .fontWeight(FontWeight.Bold)
11.         .fontSize(30)
13.       Button("选择文本")
14.         .margin(20)
15.         .onClick(() => {
16.           TextPickerDialog.show({
17.             range: this.fruits, //设置文本选择器的选择范围
18.             selected: this.selectedIndex, //设置选中的索引
19.             onAccept: (value: TextPickerResult) => { //确定按钮的回调函数
20.               this.selectedIndex = value.index;
21.             },
22.             onCancel: () => { //取消按钮的回调函数
23.               console.info('取消选择')
24.             },
25.             onChange: (value: TextPickerResult) => { //选择器选中内容发生变化时触发的回调函数
26.               console.info(`当前文本:${JSON.stringify(value)}`)
27.             }
28.           })
29.         })
30.     }.width('100%')
31.     .height('100%')
32.     .justifyContent(FlexAlign.Center)
33.   }
34. }

复制代码

• DatePickerDialog（日期滑动选择期弹窗）
  

示例代码
pages/component/dialog/新建DatePickerDialogPage.ets文件

1. @Entry
2. @Component
3. struct DatePickerDialogPage {
4.   @State date: Date = new Date("2010-1-1");
6.   build() {
7.     Column({ space: 50 }) {
8.       Text(`${this.date.getFullYear()}年${this.date.getMonth() + 1}月${this.date.getDate()}日`)
9.         .fontWeight(FontWeight.Bold)
10.         .fontSize(30)
12.       Button("选择日期")
13.         .margin(20)
14.         .onClick(() => {
15.           DatePickerDialog.show({
16.             start: new Date("2000-1-1"), //设置选择器的其实日期
17.             end: new Date("2100-12-31"), //设置选择器的结束日期
18.             selected: this.date, //设置当前选中的日期
19.             onAccept: (value: DatePickerResult) => { //确定按钮的回调
20.               this.date.setFullYear(value.year, value.month, value.day)
21.             },
22.             onCancel: () => { //取消按钮的回调
23.               console.info('取消选择')
24.             },
25.             onChange: (value: DatePickerResult) => { //选择器当前内容发生变化时触发的回调函数
26.               console.info(`当前日期:${JSON.stringify(value)}`)
27.             }
28.           })
29.         })
31.     }.width('100%')
32.     .height('100%')
33.     .justifyContent(FlexAlign.Center)
34.   }
35. }

复制代码

• TimePickerDialog（时间滑动选择器弹窗）
  

示例代码
pages/component/dialog/新建TimePickerDialogPage.ets文件

1. @Entry
2. @Component
3. struct TimePickerDialogPage {
4.   @State time: Date = new Date('2020-01-01T00:00:00')
6.   build() {
7.     Column({ space: 50 }) {
9.       Text(`${this.time.getHours()}:${this.time.getMinutes()}`)
10.         .fontWeight(FontWeight.Bold)
11.         .fontSize(30)
13.       Button("选择时间")
14.         .margin(20)
15.         .onClick(() => {
16.           TimePickerDialog.show({
17.             selected: this.time, //设置当前选中的时间
18.             useMilitaryTime: true, //是否使用24小时制
19.             onAccept: (value: TimePickerResult) => { //确认按钮的回调
20.               this.time.setHours(value.hour, value.minute);
21.             },
22.             onCancel: () => { //取消按钮的回调
23.               console.info('取消选择')
24.             },
25.             onChange: (value: TimePickerResult) => { //选择器当前内容发生变化时触发的回调函数
26.               console.info(`当前时间:${JSON.stringify(value)}`)
27.             }
28.           })
29.         })
30.     }.width('100%')
31.     .height('100%')
32.     .justifyContent(FlexAlign.Center)
33.   }
34. }

复制代码

4.2 使用说明

具体用法可参考相关案例或者官方文档，各选择器的官方文档地址如下
TextPickerDialog（文本滑动选择器弹窗）
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-methods-textpicker-dialog-0000001427584912-V2
DatePickerDialog（日期滑动选择期弹窗）
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-methods-datepicker-dialog-0000001427902500-V2
TimePickerDialog（时间滑动选择器弹窗）
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V2/ts-methods-timepicker-dialog-0000001428061780-V2
《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新AI+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

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