鸿蒙HarmonyOS开发:多种内置弹窗及自定义弹窗的详细使用指南

文章目录

      • 一、消息提示框(showToast)
        • 1、导入模块
        • 2、语法
        • 3、参数
        • 4、示例
        • 5、效果
      • 二、对话框(showDialog)
        • 1、导入模块
        • 2、语法
        • 3、参数
        • 4、示例
        • 5、效果
      • 三、警告弹窗(AlertDialog)
        • 1、语法
        • 2、参数
        • 3、AlertDialogParam对象说明
        • 4、示例
        • 5、效果
      • 四、操作菜单(showActionMenu
        • 1、导入模块
        • 2、语法
        • 3、参数
        • 4、ActionMenuOptions选项
        • 5、示例
        • 6、效果
      • 五、操作列表弹窗(ActionSheet)
        • 1、语法
        • 2、参数
        • 3、ActionSheetOptions对象说明
        • 4、SheetInfo接口说明
        • 5、示例
        • 6、效果
      • 六、文本滑动选择器弹窗 (TextPickerDialog)
        • 1、语法
        • 2、参数
        • 3、TextPickerDialogOptions对象说明
        • 4、TextPickerResult对象说明
        • 5、示例
        • 6、效果
      • 七、自定义弹窗 (CustomDialog)
        • 1、语法
        • 2、参数
        • 3、CustomDialogController
        • 4、方法
        • 5、创建自定义弹窗
        • 6、示例
        • 7、效果

一、消息提示框(showToast)

Toast(消息提示),常用于显示一些简短的消息或提示,一般会在短暂停留后自动消失。

1、导入模块
import promptAction from '@ohos.promptAction';
2、语法
showToast(options: ShowToastOptions): void
3、参数
名称类型必填说明
messagestring、Resource显示的文本信息。
durationnumber默认值1500ms,取值区间:1500ms-10000ms。
bottomstring、number设置弹窗边框距离屏幕底部的位置。默认值:80vp,设置了Alignment后不生效。
showModeToastShowMode设置弹窗是否显示在应用之上。默认值:ToastShowMode.DEFAULT,默认显示在应用内。
alignment12+Alignment对齐方式。默认值:undefined,默认底部偏上位置。
offset12+Offset在对齐方式上的偏移。默认值:{dx:0, dy:0},默认没有偏移。
4、示例
Button("提示信息")
.onClick(() => {promptAction.showToast({message: '网络连接已断开!'//弹窗内容});
})
5、效果

在这里插入图片描述

二、对话框(showDialog)

1、导入模块
import promptAction from '@ohos.promptAction';
2、语法
showDialog(options: ShowDialogOptions): Promise<ShowDialogSuccessResponse>
3、参数
名称类型必填说明
titlestring、Resource标题文本。
messagestring、Resource显示的文本信息。
buttonsArray对话框中按钮的数组,结构为:{text:‘button’, color: ‘#666666’},支持大于1个按钮。
alignment10+DialogAlignment弹窗在竖直方向上的对齐方式。默认值:DialogAlignment.Default。
offset10+Offset弹窗相对alignment所在位置的偏移量。默认值:{ dx: 0 , dy: 0 }
4、示例
Button("删除")
.onClick(() => {promptAction.showDialog({title: '删除该记录?',//弹窗标题message: '删除后无法恢复,您确认要删除吗?',//弹窗内容buttons: [// 按钮的数组{text: '确认',color: '#ff0000'},{text: '取消',color: '#0000ff'},],}).then(data => {console.info('click button: ' + data.index);}).catch((err: Error) => {console.info('showDialog error: ' + err);})
})
5、效果

在这里插入图片描述

三、警告弹窗(AlertDialog)

AlertDialog(警告对话框)用于向用户发出警告或确认操作的提示,确保用户在敏感操作前进行确认。

1、语法
AlertDialog.show(value: AlertDialogParamWithConfirm | AlertDialogParamWithButtons | AlertDialogParamWithOptions)
2、参数
名称类型必填说明
valueAlertDialogParamWithConfirm、AlertDialogParamWithButtons、AlertDialogParamWithOptions10+定义并显示AlertDialog组件。
3、AlertDialogParam对象说明
名称类型必填说明
titleResourceStr弹窗标题。
subtitle10+ResourceStr弹窗副标题。
messageResourceStr弹窗内容。
autoCancelboolean点击遮障层时,是否关闭弹窗,true表示关闭弹窗。false表示不关闭弹窗。默认值:true
cancel() => void点击遮障层关闭dialog时的回调。
alignmentDialogAlignment弹窗在竖直方向上的对齐方式。默认值:DialogAlignment.Default
offsetOffset弹窗相对alignment所在位置的偏移量。默认值:{ dx: 0 , dy: 0 }
gridCountnumber弹窗容器宽度所占用栅格数。默认值:4
confirm{
value: ResourceStr,
fontColor?: ResourceColor,
backgroundColor?: ResourceColor,
action: () => void
}
确认按钮的文本内容、文本色、按钮背景色和点击回调。
4、示例
Button('删除').onClick(() => {AlertDialog.show({title: '删除该记录?',//弹窗标题message: '删除后无法恢复,您确认要删除吗?',//弹窗内容autoCancel: true,//点击遮罩层,是否关闭弹窗primaryButton: { // 主要按钮,左侧value: '确认',fontColor:'#ff0000',action: () => {console.info('Button-clicking callback')}},secondaryButton: { // 次要按钮,右侧value: '取消',fontColor:'#0000ff',action: () => {console.info('Button-clicking callback')}},cancel: () => {console.info('showDialog cancel');}})})
5、效果

在这里插入图片描述

showActionMenu_187">四、操作菜单(showActionMenu

showActionMenu(操作菜单弹窗)用于提供一组选项给用户选择,用户从中选择后,可执行相应的操作。

1、导入模块
import promptAction from '@ohos.promptAction';
2、语法
showActionMenu(options: ActionMenuOptions): Promise<ActionMenuSuccessResponse>
3、参数
名称类型必填说明
optionsActionMenuOptions操作菜单选项。
4、ActionMenuOptions选项
名称类型必填说明
titlestring、Resource标题文本。
buttonsArray对话框中按钮的数组,结构为:{text:‘button’, color: ‘#666666’},支持1-6个按钮。按钮数量大于6个时,仅显示前6个按钮,之后的按钮不显示。
showInSubWindow11+boolean某弹框需要显示在主窗口之外时,是否在子窗口显示此弹窗。默认值:false,在子窗口不显示弹窗。
isModal11+boolean弹窗是否为模态窗口,模态窗口有蒙层,非模态窗口无蒙层。默认值:true,此时弹窗有蒙层。
5、示例
Button("操作菜单")
.onClick(() => {promptAction.showActionMenu({title: '上传图片',buttons: [{text: '拍照',color: '#909399'},{text: '从相册选择',color: '#E6A23C'},{text: '微信记录',color: '#67C23A'},]}).then(data => {console.info('click button: ' + data.index);}).catch((err: Error) => {console.info('showActionMenu error: ' + err);})})
6、效果

在这里插入图片描述

五、操作列表弹窗(ActionSheet)

ActionSheet(操作列表弹窗)用于提供一组选项给用户选择,用户从中选择后,可执行相应的操作。

1、语法
ActionSheet.show(value: ActionSheetOptions)
2、参数
名称类型必填说明
valueActionSheetOptions配置列表选择弹窗的参数。
3、ActionSheetOptions对象说明
名称类型必填说明
titleResourceStr弹窗标题。
subtitle10+ResourceStr弹窗副标题。
messageResourceStr弹窗内容。
autoCancelboolean点击遮障层时,是否关闭弹窗,true表示关闭弹窗。false表示不关闭弹窗。默认值:true
cancel() => void点击遮障层关闭dialog时的回调。
alignmentDialogAlignment弹窗在竖直方向上的对齐方式。默认值:DialogAlignment.Bottom
offset{
dx: number
stringResource,
dy: number
confirm{
enabled10+?: boolean,
defaultFocus10+?: boolean,
style10+?: DialogButtonStyle,
value: Resource、string,
action: () => void
}
确认Button的使能状态、默认焦点、按钮风格、文本内容和点击回调。在弹窗获焦且未进行tab键走焦时,该按钮默认响应Enter键。
enabled:点击Button是否响应,true表示Button可以响应,false表示Button不可以响应。
默认值:true
defaultFocus:设置Button是否是默认焦点,true表示Button是默认焦点,false表示Button不是默认焦点。
默认值:false
style:设置Button的风格样式。
默认值:DialogButtonStyle.DEFAULT
value:Button文本内容。
action: Button选中时的回调。
sheetsArray设置选项内容,每个选择项支持设置图片、文本和选中的回调。
4、SheetInfo接口说明
名称类型必填说明
titlestring 、 Resource选项的文本内容。
iconstring 、 Resource选项的图标,默认无图标显示。
action()=>void选项选中的回调。
5、示例
Button("选择操作").onClick(() => {ActionSheet.show({title: '文件操作',message: '请选择你要对该文件执行的操作',confirm: {value: '取消',action: () => {console.log('Get Alert Dialog handled')}},cancel: () => {console.log('actionSheet canceled')},sheets: [{title: '复制',icon: $r("app.media.copy"),action: () => {console.log('apples')}},{title: '剪切',icon: $r("app.media.shear"),action: () => {console.log('bananas')}},{title: '删除',icon: $r("app.media.delete"),action: () => {console.log('pears')}}]})})
6、效果

在这里插入图片描述

六、文本滑动选择器弹窗 (TextPickerDialog)

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

1、语法
TextPickerDialog.show(options: ShowToastOptions): void
2、参数
名称类型必填说明
optionsTextPickerDialogOptions配置文本选择器弹窗的参数。
3、TextPickerDialogOptions对象说明
名称类型必填说明
rangestring[] 、 Resource设置文本选择器的选择范围。
selectednumber设置选中项的索引值。默认值:0
valuestring设置选中项的文本内容。当设置了selected参数时,该参数不生效。如果设置的value值不在range范围内,则默认取range第一个元素。
defaultPickerItemHeightnumber 、 string设置选择器中选项的高度。
onAccept(value: TextPickerResult) => void点击弹窗中的“确定”按钮时触发该回调。
onCancel() => void点击弹窗中的“取消”按钮时触发该回调。
onChange(value: TextPickerResult) => void滑动弹窗中的选择器使当前选中项改变时触发该回调。
4、TextPickerResult对象说明
名称类型说明
valuestring选中项的文本内容。
indexnumber选中项在选择范围数组中的索引值。
5、示例
Text(this.message)
Button("选择文本").onClick(() => {TextPickerDialog.show({range: ['苹果', '西瓜', '鸭梨', '香蕉', '橙子'],selected: this.selected,onAccept: (value: TextPickerResult) => {this.selected = value.indexthis.message = value.value},onCancel: () => {console.info("TextPickerDialog:onCancel()")}})})
6、效果

在这里插入图片描述

CustomDialog_424">七、自定义弹窗 (CustomDialog)

自定义弹窗(CustomDialog)可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。

当现有组件不满足要求时,可考虑自定义弹窗,自定义弹窗允许开发者自定义弹窗内容和样式。

1、语法
CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number})
2、参数
名称类型必填说明
builderCustomDialog自定义弹窗内容构造器。
cancel() => void点击遮障层退出时的回调。
autoCancelboolean是否允许点击遮障层退出。默认值:true
alignmentDialogAlignment弹窗在竖直方向上的对齐方式。默认值:DialogAlignment.Default
offsetOffset弹窗相对alignment所在位置的偏移量。
customStyleboolean弹窗容器样式是否自定义。
默认值:false,弹窗容器的宽度根据栅格系统自适应,不跟随子节点;高度自适应子节点,最大为窗口高度的90%;圆角为24vp。
gridCount8+number弹窗宽度占栅格宽度的个数。默认为按照窗口大小自适应
CustomDialogController_451">3、CustomDialogController
dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean})
4、方法
  • open():显示自定义弹窗内容,允许多次使用,但如果弹框为SubWindow模式,则该弹框不允许再弹出SubWindow弹框。

  • close():关闭显示的自定义弹窗,若已关闭,则不生效。

5、创建自定义弹窗
  • 使用@CustomDialog装饰器装饰自定义弹窗。

  • @CustomDialog装饰器用于装饰自定义弹框,此装饰器内进行自定义内容(也就是弹框内容)。

@CustomDialog
struct CustomDialogExample {controller: CustomDialogControllerbuild() {Column() {Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })}}
}
  • 创建构造器,与装饰器呼应相连。
dialogController: CustomDialogController = new CustomDialogController({builder: CustomDialogExample({}),
})
  • 点击与onClick事件绑定的组件使弹窗弹出
Button('click me').onClick(() => {this.dialogController.open()})
6、示例
@Entry
@Component
struct CustomDialog {@State answer: string = '?'// 创建构造器,与装饰器呼应相连。dialogController: CustomDialogController = new CustomDialogController({builder: CustomDialogExample({// 确认按钮回调函数confirm: (val) => {this.onAccept(val)},})})// 确认onAccept(val: string) {this.answer = val}build() {Column({ space: 20 }) {Row() {Text('1+1=')Text(this.answer)}Button('作答').onClick(() => {// 打开自定义弹窗this.dialogController.open()})}.width('100%').height('100%').padding(20)}
}// @CustomDialog装饰器用于装饰自定义弹框,此装饰器内进行自定义内容(也就是弹框内容)。
@CustomDialog
struct CustomDialogExample {controller: CustomDialogControllerconfirm: (val: string) => voidanswer: string = ''build() {Column({ space: 20 }) {Text('请输入你的答案').fontSize(20)TextInput({ placeholder: "请输入数字" }).type(InputType.Number).onChange((value: string) => {this.answer = value})Row({ space: 40 }) {Button('取消').onClick(() => {// 关闭弹窗this.controller.close()})Button('确定').onClick(() => {// 关闭弹窗this.controller.close()// 确认按钮回调函数this.confirm(this.answer)})}}.padding(20)}
}
7、效果

在这里插入图片描述


http://www.ppmy.cn/news/1507166.html

相关文章

docker安装redis单机部署的redis.conf配置

下面是一个简单的 Redis 配置文件 (redis.conf) 示例&#xff0c;它适合docker单机部署环境&#xff0c;并且启用了密码保护。这个配置文件包含了最基本的设置&#xff0c;您可以根据需要进行扩展。 # 服务器监听的地址 bind 0.0.0.0# 服务器监听的端口 port 6379# 设置密码 r…

期权价格的奥秘:深入理解影响因素

在金融市场中&#xff0c;期权作为一种衍生工具&#xff0c;为投资者提供了风险管理和资产增值的多种可能性。期权价格的波动往往令人着迷&#xff0c;但其背后的定价机制却充满了复杂性。本文将带您探索期权价格变化的奥秘&#xff0c;并尝试以浅显易懂的方式&#xff0c;解析…

Oceanbase 执行计划

test100 CREATE TABLE `test100` ( `GRNT_CTR_NO` varchar(32) COLLATE utf8mb4_bin NOT NULL COMMENT 担保合同编号, `GRNT_CTR_TYP` varchar(3) COLLATE utf8mb4_bin NOT NULL COMMENT 担保合同类型, `COLC_GRNT_IND` varchar(1) COLLATE utf8mb4_bin DEFAULT NULL …

1.Windows安装Maven和搭建Nexus私服

一、Windows安装Maven 首先安装jdk。这个没什么说的。接着安装Maven 下载Maven的安装包&#xff0c;解压到 D:\apache-maven-3.5.2 然后新建用户环境变量M2_HOME&#xff1a; 接着编辑用户环境变量Path&#xff0c;增加%M2_HOME%\bin&#xff08;下图中少写了一个%&#xff…

Postman接口测试工具使用方法

Postman 是一个强大的 API 开发和测试工具&#xff0c;广泛用于开发、测试和文档编写。 安装 Postman&#xff1a; 前往 https://www.postman.com/ 官网 下载适用于你的操作系统的安装包。安装完成后&#xff0c;启动 Postman。 创建账户&#xff08;可选&#xff09;&#…

视频号直播回放怎么下载?

一、如果是下载自己直播回放视频&#xff1a; 方法一&#xff1a;视频号助手 打开网址&#xff1a;视频号助手 登陆账号后。下面路径&#xff0c;先点击成回放&#xff0c; 后就可以在下面路径&#xff0c;下载全场回放 但是这种有个缺点&#xff0c;就是不能分段下载。这样…

【ES6】使用Set和Map进行全组合判断

判断数据集是否为全组合关系 例如下列表格&#xff0c;字段1包含&#xff08;甲、乙&#xff09;值&#xff0c;字段2包含&#xff08;a、b&#xff09;值&#xff0c;字段3包含&#xff08;1、2、3&#xff09;值&#xff0c;每种组合情况都可以在数据集的行记录中找到有且仅…

QT实现一个系统参数管理窗口

为了实现一个管理系统参数的设计&#xff0c;我们可以创建一个配置参数类来封装配置的读取和写入操作&#xff0c;并使用一个 QWidget 作为用户界面来管理这些参数。以下是如何设计一个这样的系统&#xff0c;包括配置参数类和管理界面。 1. 配置参数类 我们创建一个 ConfigM…

数据库篇--八股文学习第十八天| MySQL和Redis的区别是什么;Redis有什么优缺点?为什么用Redis查询会比较快

1、MySQL和Redis的区别是什么 答&#xff1a; Redis基于键值对&#xff0c;支持多种数据结构&#xff1b;而MySQL是一种关系型数据库&#xff0c;使用表来组织数据。Redis将数据存在内存中&#xff0c;通过持久化机制将数据写入磁盘&#xff0c;MySQL通常将数据存储在磁盘上。…

Ubuntu安装 IDEA

一、在官网下载 IDEA 下载IDEA For LinuxDownload the latest version of IntelliJ IDEA for Windows, macOS or Linux.https://www.jetbrains.com/idea/download/?sectionlinux下载好的安装包解压到/opt/中&#xff0c;目录名更改为 idea 二、对/opt/idea 目录下所有文件授予…

Java开发工具IDEA

IDEA概述 Intellij IDEA IDEA全称Intellij IDEA&#xff0c;是用于Java语言开发的集成环境&#xff0c;它是业界公认的目前用于Java程序开发最好的工具。 集成环境 把代码编写&#xff0c;编译&#xff0c;执行&#xff0c;调试等多种功能综合到一起的开发工具。 IDEA下载和安…

Unity自带的UGUI ScrollView刷新不及时问题

self:RefreshCommentsList()self.scrollView self.CommentsView:GetComponent(ScrollRect) self.scrollView.verticalNormalizedPosition 0如上所示&#xff0c;当我想刷新Unity中的一个ScrollView的列表后&#xff0c;将这个列表瞬间移至底部。但是上述这三行代码会出现一个…

关于网络数据的一些思考

为了给游戏用户带来更好的体验&#xff0c;但又想兼顾稳定性&#xff0c;因此有了kcp这样的技术&#xff0c;可如果是面临海外产品这是远远不够的 不同国家&#xff0c;不同地区&#xff0c;不同企业&#xff0c;不同用户所使用的设备千奇百怪。甚至与安装师傅的配置也有关系。…

支持二次开发的在线客服系统-高性能客服程序源码

首先&#xff0c;咱们这个客服系统是用 Go 语言开发的&#xff0c;Go 语言是 Google 大佬们搞出来的&#xff0c;它特别适合写并发程序&#xff0c;性能杠杠的。 如果你想改前端页面&#xff1a; 咱们的前端页面是用 HTML、CSS、JavaScript 这些传统技术做的&#xff0c;不是…

第一章 NoSQL之Redis配置与优化

关系数据库与非关系型数据库 关系型数据库 一个结构化的数据库&#xff0c;创建在关系模型基础上一般面向于记录包括Oracle、MySQL、SQLServer、Microsoft Access、DB2等 非关系型数据库 除了主流的关系型数据库外的数据库&#xff0c;都认为是非关系型包括Redis、MongoDB、…

【QML】Qt.rgba()的正确使用方法

1. 问题 设置颜色 color: Qt.rgba(65,105,225,255) &#xff0c;应该是蓝色&#xff0c;却显示白色。 2. 正确方法 //正确代码 color: Qt.rgba(65/255, 105/255, 225/255, 255/255)

如何在 K8s 中实现指定数据库实例下线?

上期文章介绍了 InstanceSet&#xff0c;同时也介绍了 InstanceSet 针对数据库高可用等需求衍生出的一系列特性。本期我们将介绍 指定实例下线 这一特性&#xff0c;一起来了解这一特性诞生的背景和使用方式吧&#xff5e; 指定实例下线解决了什么问题&#xff1f; 早期版本中…

Cisco ACL 中的通配符掩码详解

注&#xff1a;机翻&#xff0c;未校。 Wildcard Masks in ACLs Explained This tutorial explains what the ACL wildcard masks are and how they are used. Learn the differences and similarities between wildcard masks and subnet masks. 本教程介绍了什么是 ACL 通配…

HTML学习笔记——用HTML记录学习过程4——非主体结构元素

非主体结构元素主要是为了表达逻辑结构或者附加信息的元素 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>非主体结构元素</title> </head> <body> <header><h1>head…

http的发展历史,各版本的差异点,以及和https的区别

### HTTP的发展历史及各版本的差异点 HTTP/0.9 - **发布时间**&#xff1a;1991年 - **特点**&#xff1a; - 最初的HTTP协议版本&#xff0c;非常简单。 - 只支持GET方法&#xff0c;不支持请求头和响应头。 - 响应仅为纯文本&#xff0c;无法传输图片、音频等多媒体资…