- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
全局弹窗相对于自定义弹窗有以下优点:
全局弹窗是鸿蒙在API 12增加的,PromptAction对象增加了openCustomDialog方法.
首先创建一个接口,用于参数的传递,弹窗内按钮的点击 。
interface GlobalDialogParam {
content:string; //弹窗显示内容
onConfirm: () => void //确认按钮的回调函数
onCancel: () => void// 取消按钮的回调函数
}
自定义弹窗内容,使用@Builder装饰器表明该函数将返回一个 UI 组件树,弹窗内容根据您的需求自己实现。本例中就显示一个简单的对话框.
@Builder function buildGlobalDialogComponent(param: GlobalDialogParam){
Column() {
Text(param.content).fontSize(17).fontColor("#181818")
.lineHeight(24).margin({
bottom:29,top:29,left:31,right:31
})
Divider().color("#D8D8D8").height(0.5)
RowSplit() {
Text("取消").fontSize(17).fontColor("#181818")
.fontWeight(FontWeight.Bold).onClick(event=>{
param.onCancel();
}).textAlign(TextAlign.Center).padding({
top:15,bottom:15
}).width('50%')
Text("确定").fontSize(17).fontColor($r('app.color.mainColor'))
.fontWeight(FontWeight.Bold).onClick(event=>{
param.onConfirm();
}).textAlign(TextAlign.Center).padding({
top:15,bottom:15
}).width('50%')
}
}.backgroundColor($r('app.color.white')).width('80%').borderRadius(12)
}
在GlobalDialog类中增加两个静态方法,用来显示弹窗跟关闭弹窗,关键代码都增加来注释,这里就不过多解释了 。
export class GlobalDialog {
static contentNode:ComponentContent<GlobalDialogParam>;
//显示弹窗
static show(context: UIContext,dialogParam: GlobalDialogParam){
//ComponentContent对象有三个参数
//参数1:UI 上下文
//参数2:使用 wrapBuilder 包装 buildGlobalDialogComponent 函数,这个函数用于构建对话框的实际内容
//参数3:传递给对话框的参数,包含内容文本和按钮的回调函数
GlobalDialog.contentNode = new ComponentContent(context, wrapBuilder(buildGlobalDialogComponent), dialogParam);
const promptAction = context.getPromptAction()//通过 context 获取 promptAction,用于操作对话框显示
//显示弹窗
promptAction.openCustomDialog(GlobalDialog.contentNode,{
alignment: DialogAlignment.Center,//对话框在屏幕中央显示
autoCancel: false,//点击弹窗外区域是否取消弹窗
});
}
//关闭弹窗
static close(context: UIContext){
const promptAction = context.getPromptAction()
promptAction.closeCustomDialog(GlobalDialog.contentNode)
}
}
通过以上三个步骤,全局弹窗的代码就封装好了,接下来在组件中如何调用呢?其实代码很简单,调用GlobalDialog.show方法显示弹窗,在确定跟取消按钮的回调函数中调用GlobalDialog.close取消弹窗.
GlobalDialog.show(this.getUIContext(),{
content:"您确定要删除这条记录吗?",
onConfirm:()=>{
GlobalDialog.close(this.getUIContext())//关闭弹窗
AppUtil.showToast("确定按钮点击");
},
onCancel:()=>{
GlobalDialog.close(this.getUIContext())//关闭弹窗
AppUtil.showToast("取消按钮点击");
}
})
效果图:
在鸿蒙的 ArkUI 开发中,@Builder 装饰器是一种用于简化组件构建的标记,它通常用于函数上,指示该函数返回一个 UI 组件.
@Builder 装饰器的作用:
全局弹窗的代码都提交到github上了,这个库我会一直维护,这个一个鸿蒙API使用案例的工具库,后续会陆续增加功能以及维护.
https://github.com/ansen666/harmony_tools 。
扫一扫 关注我的公众号 。
最后此篇关于鸿蒙系统(HarmonyOS)全局弹窗实现的文章就讲到这里了,如果你想了解更多关于鸿蒙系统(HarmonyOS)全局弹窗实现的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我在用户控件内有一个带有“边框”500x500 的弹出窗口...当用户单击按钮打开此弹出窗口时,我希望边框显示在应用程序的中心(水平/垂直)而不是用户控件。 我该怎么做? 最佳答案 您可以获取根视觉对
我生成的代码有什么问题?我试图让 UIPickerView 在点击文本字段时弹出,然后在做出选择后消失。文本字段应该显示之后选择的内容。 import UIKit class CreateAJob_V
我目前正在开发一个网站。 让我叙述一下我面临的问题: 当用户打开网站时,他们会在一个小弹出窗口中看到两个选项。 弹出窗口中的第一个选项将指向子域 1 弹出窗口中的第二个选项将指向子域 2 现在我的问题
JavaScript 有三种弹窗 Alert (只有确定按钮), Confirmation (确定,取消等按钮), Prompt (有输入对话框),而且弹出的窗口是不能通过前端工具对其进行定位的,这
我希望能够在弹出窗口外单击以使其消失。 此代码运行良好 - 在打开另一个弹出窗口时关闭一个弹出窗口,当然当您再次单击该按钮时它会消失。 var $visiblePopover; $('body').o
我想看看 stackoverflow 是否使用单独的插件来执行那些亮黄色的弹出窗口,上面写着“请考虑将此答案标记为已接受 或“请考虑添加评论以说明您为什么投了反对票” 这是为此使用了一个 jquery
以下样式定义以某种方式破坏了我的屏幕并使 R 类变为红色。看截图here和 here ?android:attr/ratingB
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post . 关闭 4 年前。 Improve this qu
有没有办法绕过下面的IE弹框: The webapge you are viewing is trying to close the window. Do you want to close this
我的 iOS 应用程序出现问题:当我触摸“购买”按钮购买 IAP 产品时,弹出窗口显示此消息: This In-App purchase has already been bought. It wil
我正在 Windows 上学习 OpenCV,我正在使用 Code::bloks。当我调用 imshow() 的函数时,它会显示一个弹出窗口,其中有图像。问题是我无法缩放此窗口,因此看不到像素值。 最
我使用以下前端代码导出 .csv 文档。 HTML {% csrf_token %} DOWNLOAD JS $('#export-link').click(function(e
我是一名优秀的程序员,十分优秀!