首页 星云 工具 资源 星选 资讯 热门工具
:

PDF转图片 完全免费 小红书视频下载 无水印 抖音视频下载 无水印 数字星空

鸿蒙系统(HarmonyOS)全局弹窗实现

编程知识
2024年09月10日 10:47

全局弹窗相对于自定义弹窗有以下优点:

  • 封装更彻底,一行代码就能调用
  • 跟组件耦合度低,只需要传入组件的UIContext对象,不需要跟自定义弹窗一样需要在组件内部实例化CustomDialogController对象

全局弹窗是鸿蒙在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("取消按钮点击");
    }
})

效果图:

延伸阅读,@Builder 装饰器

在鸿蒙的 ArkUI 开发中,@Builder 装饰器是一种用于简化组件构建的标记,它通常用于函数上,指示该函数返回一个 UI 组件。

@Builder 装饰器的作用:

  1. 生成UI组件:@Builder 装饰器标记的函数主要用于构建 UI 组件。它将函数体内定义的 UI 布局和组件树返回给调用方,以便在应用程序中使用这些组件。
  2. 提高代码可读性和模块化: 通过使用 @Builder,可以把复杂的 UI 构建逻辑封装到一个函数中,使得代码更简洁和模块化,便于复用。例如,常见的对话框、弹窗、复杂组件可以通过这样的函数构建,并在不同的地方调用。
  3. 函数式UI构建: 鸿蒙的 ArkUI 是声明式 UI 框架,@Builder 提供了一种函数式的 UI 组件创建方式。开发者可以通过定义函数和内部组件来构建界面,并使用该函数返回的组件进行显示。

源码下载

全局弹窗的代码都提交到github上了,这个库我会一直维护,这个一个鸿蒙API使用案例的工具库,后续会陆续增加功能以及维护。

https://github.com/ansen666/harmony_tools


扫一扫 关注我的公众号

From:https://www.cnblogs.com/yishaochu/p/18406128
本文地址: http://www.shuzixingkong.net/article/1891
0评论
提交 加载更多评论
其他文章 Locust 进行分布式负载测试
什么是 Locust Locust 是一个开源的负载测试工具,用于测试网站和其他应用程序的性能。它通过编写 Python 脚本来定义虚拟用户的行为,模拟这些用户对目标系统发起请求。Locust 提供了一个直观的 Web 界面,允许用户实时监控测试进度和性能指标。 主要特性包括: Python 编写测
一文轻松搞定 tarjan 算法(二)(附带 tarjan 题单)
完结篇:tarjan 求割点、点双连通分量、割边(桥)(附 40 道很好的 tarjan 题目)。 上一篇(tarjan 求强连通分量,缩点,求边双) tarjan 求割点 还是求强联通分量的大致思路捏. 算法思路: 我们把图中的点分为两种: 每一个联通子图搜索开始的根节点 和 其他点。 判断是不是
一文轻松搞定 tarjan 算法(二)(附带 tarjan 题单)
.NET 8 微软免费开源的 Blazor UI 组件库
前言 .NET 8 的发布,微软推出了官方免费且开源的 Blazor UI 组件库 —— Fluent UI Blazor。 组件库提供了Web应用程序所需的工具,确保应用程序能够与 Microsoft 产品保持一致的外观和感觉。Fluent UI Blazor 不仅包含了对微软官方 Fluent
.NET 8 微软免费开源的 Blazor UI 组件库 .NET 8 微软免费开源的 Blazor UI 组件库 .NET 8 微软免费开源的 Blazor UI 组件库
LLog:Spring轻量级请求日志监控组件,集成管理面板,支持多条件查询检索
开源地址 https://gitee.com/lboot/LLog 简介 LLog是基于AOP构建的请求日志记录和查询工具库,通过引入该工具库,完成配置,实现对接口请求日志的记录、查询检索等功能。 请求状态、时间、来源、耗时,请求参数,响应结果,作用接口记录 支持与鉴权服务结合,记录请求来源为用户I
LLog:Spring轻量级请求日志监控组件,集成管理面板,支持多条件查询检索 LLog:Spring轻量级请求日志监控组件,集成管理面板,支持多条件查询检索 LLog:Spring轻量级请求日志监控组件,集成管理面板,支持多条件查询检索
在 Web 中判断页面是不是刷新
在 Web 开发中,我们经常需要区分用户是否通过刷新操作重新加载了页面。这一操作可能是由用户手动刷新(如按下 F5 键或点击浏览器刷新按钮)或通过浏览器自动重新加载。判断页面是否刷新有助于开发者优化用户体验,例如在使用 vue 的时候需要进行权限控制,就需要判断在刷新后根据登录者的权限去添加对应的路
在 Web 中判断页面是不是刷新 在 Web 中判断页面是不是刷新 在 Web 中判断页面是不是刷新
架构师备考的一些思考(二)
前言 以我的视野来看,部长或技术总监这种岗位还是比较难竞争的,换言之,程序员的上升空间比较窄,如果想要拿到高级岗位,最好的是工作三五年后就转项目经理,然后再往上爬。 架构师倒是也能晋升高级岗位,但就效率而言,是非常低的。就我的经验而言,架构师系的高级职位通常是技术管理一手抓,但这也代表着,责任更大,
架构师备考的一些思考(二)
痞子衡嵌入式:在MDK开发环境下自定义安装与切换不同编译器版本的方法
大家好,我是痞子衡,是正经搞技术的痞子。今天痞子衡给大家分享的是在MDK开发环境下自定义安装与切换不同编译器版本的方法。 Keil MDK 想必是嵌入式开发者最熟悉的工具之一了,自 2005 年 Arm 公司收购 Keil 公司之后,MDK 就走上了发展快车道,从 v2.50a 一路狂奔到现在最新的
痞子衡嵌入式:在MDK开发环境下自定义安装与切换不同编译器版本的方法 痞子衡嵌入式:在MDK开发环境下自定义安装与切换不同编译器版本的方法 痞子衡嵌入式:在MDK开发环境下自定义安装与切换不同编译器版本的方法
设计模式之状态模式(三分钟学会一个设计模式)
状态模式(State Pattern)的定义是这样的:类的行为是基于它的状态改变的。注意这里的状态不是狭义的指对象维护了一个“状态”字段,我们传入了不同的枚举值,对象整体的表现行为(对外方法)就改变了。而是指内部的(任意)字段如果发生了变化,那么它的状态就变了,那么它对外的表现形式就变了。它是面向对
设计模式之状态模式(三分钟学会一个设计模式)