ArkUI 组件-内置弹窗组件
大家好，我是潘 Sir，持续分享 IT 技术，帮你少走弯路。《鸿蒙应用开发从入门到项目实战》系列文章持续更新中，陆续更新 AI+编程、企业级项目实战等原创内容、欢迎关注！
弹窗是移动应用中常见的一种用户界面元素，常用于显示一些重要的信息、提示用户进行操作或收集用户输入。ArkTS 提供了多种内置的弹窗供开发者使用，除此之外还支持自定义弹窗，来满足各种不同的需求。
一、消息提示 Toast
1.1 概述
Toast（消息提示），常用于显示一些简短的消息或提示，一般会在短暂停留后自动消失。具体效果如下
1.2 使用说
可使用@ohos.promptAction模块中的showToast()方法显示 Toast 提示，使用时需要先导入@ohos.promptAction模块，如下
import promptAction from '@ohos.promptAction'
复制代码
showToast()方法的参数定义如下
showToast(options: { message: string | Resource,duration?: number,bottom?: string | number})
复制代码
message属性用于设置提示信息
duration属性用于设置提示信息停留时长，单位为毫秒，取值范围是[1500,10000]
bottom属性用于设置提示信息到底部的距离
示例代码
pages/component 目录下新建 dialog 目录，新建 ToastPage.ets 文件
import promptAction from '@ohos.promptAction';
@Entry@Componentstruct ToastPage { build() { Column() { Button('提示信息') .onClick(() => { promptAction.showToast({ message: '网络连接已断开', duration: 2000, bottom: 50 }); }) }.width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
二、警告对话框 AlertDialog
2.1 概述
AlertDialog（警告对话框）用于向用户发出警告或确认操作的提示，确保用户在敏感操作前进行确认。具体效果如下
示例代码
pages/component/dialog/新建 AlertDialogPage.ets 文件
@Entry@Componentstruct AlertDialogPage { build() { Column() { Button('删除') .backgroundColor(Color.Red) .onClick(() => { AlertDialog.show( { title: '删除该记录？', //弹窗标题 message: '删除后无法恢复，您确认要删除吗？', //弹窗信息 autoCancel: true, //点击遮障层时，是否关闭弹窗 alignment: DialogAlignment.Bottom, //弹窗位置 offset: { dx: 0, dy: -20 }, //相对于弹窗位置的偏移量 primaryButton: { //主要按钮，位于左侧 value: '确认', //按钮内容 fontColor: Color.Red, //字体颜色 action: () => { //点击回调 console.log('确认删除') } }, secondaryButton: { //次要按钮，位于右侧 value: '取消', action: () => { console.log('取消删除') } }, cancel: () => { //点击遮罩层取消时的回调 console.info('Closed callbacks') } } ) })
}.width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
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 文件
@Entry@Componentstruct ActionSheetPage { build() { Column() { Button('选择操作') .onClick(() => { ActionSheet.show({ title: '文件操作', //弹窗标题 message: '请选择你要对该文件执行的操作', //弹窗内容 autoCancel: true, //点击遮障层时，是否关闭弹窗 alignment: DialogAlignment.Bottom, //弹窗位置 offset: { dx: 0, dy: -20 }, //弹窗相对alignment位置的偏移量 confirm: { //底部按钮 value: '取消', //按钮文本内容 action: () => { //按钮回调函数 console.log('点击按钮取消') } }, // cancel: () => { //点击遮障层关闭弹窗时的回调 // console.log('点击遮障层取消') // }, sheets: [ //操作选项列表 { icon: $r('app.media.icon_copy'), //图标 title: '复制', //文本 action: () => { //回调 console.log('复制文件') } }, { icon: $r('app.media.icon_cut'), title: '剪切', action: () => { console.log('剪切文件') } }, { icon: $r('app.media.icon_delete'), title: '删除', action: () => { console.log('删除文件') } } ] }) }) }.width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
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内置了多种选择器弹窗，例如文本选择器、日期选择器、时间选择器等等，各选择器效果如下
示例代码
pages/component/dialog/新建 TextPickerDialogPage.ets 文件
@Entry@Componentstruct TextPickerDialogPage { fruits: string[] = ['苹果', '橘子', '香蕉', '鸭梨', '西瓜'] @State selectedIndex: number = 0
build() { Column({ space: 50 }) { Text(this.fruits[this.selectedIndex]) .fontWeight(FontWeight.Bold) .fontSize(30)
Button("选择文本") .margin(20) .onClick(() => { TextPickerDialog.show({ range: this.fruits, //设置文本选择器的选择范围 selected: this.selectedIndex, //设置选中的索引 onAccept: (value: TextPickerResult) => { //确定按钮的回调函数 this.selectedIndex = value.index; }, onCancel: () => { //取消按钮的回调函数 console.info('取消选择') }, onChange: (value: TextPickerResult) => { //选择器选中内容发生变化时触发的回调函数 console.info(`当前文本:${JSON.stringify(value)}`) } }) }) }.width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
示例代码
pages/component/dialog/新建 DatePickerDialogPage.ets 文件
@Entry@Componentstruct DatePickerDialogPage { @State date: Date = new Date("2010-1-1");
build() { Column({ space: 50 }) { Text(`${this.date.getFullYear()}年${this.date.getMonth() + 1}月${this.date.getDate()}日`) .fontWeight(FontWeight.Bold) .fontSize(30)
Button("选择日期") .margin(20) .onClick(() => { DatePickerDialog.show({ start: new Date("2000-1-1"), //设置选择器的其实日期 end: new Date("2100-12-31"), //设置选择器的结束日期 selected: this.date, //设置当前选中的日期 onAccept: (value: DatePickerResult) => { //确定按钮的回调 this.date.setFullYear(value.year, value.month, value.day) }, onCancel: () => { //取消按钮的回调 console.info('取消选择') }, onChange: (value: DatePickerResult) => { //选择器当前内容发生变化时触发的回调函数 console.info(`当前日期:${JSON.stringify(value)}`) } }) })
}.width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
示例代码
pages/component/dialog/新建 TimePickerDialogPage.ets 文件
@Entry@Componentstruct TimePickerDialogPage { @State time: Date = new Date('2020-01-01T00:00:00')
build() { Column({ space: 50 }) {
Text(`${this.time.getHours()}:${this.time.getMinutes()}`) .fontWeight(FontWeight.Bold) .fontSize(30)
Button("选择时间") .margin(20) .onClick(() => { TimePickerDialog.show({ selected: this.time, //设置当前选中的时间 useMilitaryTime: true, //是否使用24小时制 onAccept: (value: TimePickerResult) => { //确认按钮的回调 this.time.setHours(value.hour, value.minute); }, onCancel: () => { //取消按钮的回调 console.info('取消选择') }, onChange: (value: TimePickerResult) => { //选择器当前内容发生变化时触发的回调函数 console.info(`当前时间:${JSON.stringify(value)}`) } }) }) }.width('100%') .height('100%') .justifyContent(FlexAlign.Center) }}
复制代码
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+编程、企业级项目实战等原创内容，防止迷路，欢迎关注！
评论