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

ops/2024/12/22 20:40:14/

文章目录

      • 一、消息提示框(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/ops/86263.html

相关文章

视频主题Qinmei 3.0视频站源码_WordPress影视视频主题/附详细安装教程

Qinmei 3.0主题主要是将 wordpress 改造成纯 api 的站点&#xff0c;以便实现前后端分离的技术栈&#xff0c;目前的进度已经大致完成&#xff0c;唯一的问题就是需要安装 JWT token 插件。 功能介绍&#xff1a; 支持豆瓣以及 bangumi 的一键获取信息, 豆瓣 api 目前使用的是…

经典文献阅读之--LIV-GaussMap(实时3D辐射场地图渲染的LiDAR惯性视觉融合算法)

Tip: 如果你在进行深度学习、自动驾驶、模型推理、微调或AI绘画出图等任务&#xff0c;并且需要GPU资源&#xff0c;可以考虑使用UCloud云计算旗下的Compshare的GPU算力云平台。他们提供高性价比的4090 GPU&#xff0c;按时收费每卡2.6元&#xff0c;月卡只需要1.7元每小时&…

axure10的安装与使用教程,问题整理

前言&#xff1a; axure10的安装与激活使用教程。 1、百度网盘下载相关资料 链接&#xff1a;https://pan.baidu.com/s/1OSD9J1wVuIptGxeRzwjlpA?pwddkbj 提取码&#xff1a;dkbj 2、开始安装&#xff0c;点击setup的安装包 除了更改地址外&#xff0c;其他的默认就行&…

【边缘计算与IoT】边缘计算的概念和在IoT中的应用

边缘计算与IoT&#xff1a;边缘计算的概念和在IoT中的应用 目录 引言边缘计算的概念 什么是边缘计算边缘计算的工作原理 边缘计算的优势 低延迟带宽优化数据隐私和安全高可靠性 边缘计算在IoT中的应用 智能家居工业自动化智慧城市医疗健康 边缘计算的技术挑战 计算资源限制数…

算法力扣刷题记录 五十七【236. 二叉树的最近公共祖先】和【235. 二叉搜索树的最近公共祖先】

前言 公共祖先解决。二叉树和二叉搜索树条件下的最近公共祖先。 二叉树篇继续。 一、【236. 二叉树的最近公共祖先】题目阅读 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个节点 p、q&#xff…

javaweb后端学习--Maven

场景引入 我们在进行一些开发时&#xff0c;总会需要引入一些依赖&#xff0c;那么这些依赖总是需要我们手动添加jar包&#xff0c;还要添加为库&#xff0c;烦死了&#xff0c;有时候这个依赖还要其他依赖&#xff0c;而且版本有时候不兼容。唉&#xff0c;算了&#xff0c;不…

sql-libs通关详解

1-4关 1.第一关 我们输入?id1 看回显&#xff0c;通过回显来判断是否存在注入&#xff0c;以及用什么方式进行注入&#xff0c;直接上图 可以根据结果指定是字符型且存在sql注入漏洞。因为该页面存在回显&#xff0c;所以我们可以使用联合查询。联合查询原理简单说一下&…

【分布式系统】 单机架构 | 分布式架构 | 集群 | 主从架构 | 分库分表 | 冷热分离 | 微服务

文章目录 [toc] 分布式系统一、单机架构二、分布式系统三、应用服务器集群四、读写分离 / 主从分离架构五、引入缓存/冷热分离架构六、垂直分库七、微服务架构——业务拆分代价优势 八、名词解释1.应用&#xff08;Application&#xff09;/系统(System)2.模块&#xff08;Mode…