登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›鸿蒙应用开发从入门到实战（二十）：ArkUI内置弹窗组件 ...

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

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

1.1 概述

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

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（警告对话框）用于向用户发出警告或确认操作的提示，确保用户在敏感操作前进行确认。具体效果如下
2.gif

示例代码
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（操作列表弹窗）用于提供一组选项给用户选择，用户从中选择后，可执行相应的操作。具体效果如下
3.gif

示例代码
拷贝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（文本滑动选择器弹窗）
4.gif

示例代码
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（日期滑动选择期弹窗）
5.gif

示例代码
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（时间滑动选择器弹窗）
6.gif

示例代码
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+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！

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

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
俏挺喳
9 小时前

0

粉丝关注

24

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫