HarmonyOS 鸿蒙应用开发( 六、实现自定义弹窗CustomDialog）

自定义弹窗（CustomDialog）可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗。具体用法请参考自定义弹窗。

在应用的使用和开发中，弹窗是一个很常见的场景，自定义弹窗又因为极高的自由度得以广泛应用。本文以橘子购物中一个应用更新提示的弹窗介绍OpenHarmony的自定义弹窗。 

​

简单使用

1.1 创建自定义弹窗

使用@CustomDialog装饰器装饰自定义弹窗。
@CustomDialog装饰器用于装饰自定义弹框，此装饰器内进行自定义内容（也就是弹框内容）。

@CustomDialog
struct CustomDialogExample {controller: CustomDialogControllerbuild() {Column() {Text('我是内容').fontSize(20).margin({ top: 10, bottom: 10 })}}
}

1.2 创建构造器，与装饰器呼应相连

在创建好自定义弹窗之后，我们New出来它的对象，他的类型是CustomDialogController。

dialogController: CustomDialogController = new CustomDialogController({builder: CustomDialogExample({}),
})

CustomDialogController参数详解

接口函数原型：

CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount?: number, maskColor?: ResourceColor, openAnimation?: AnimateParam, closeAnimation?: AnimateParam})

这其中最重要的就是builder，我们需要自己实现一个构造器，也就是这个弹窗的页面。上述简单示例的CustomDialogExample，就是一个弹窗页面。

简单示例代码：

// xxx.ets
@CustomDialog
struct CustomDialogExample {@Link textValue: string@Link inputValue: stringcontroller: CustomDialogController// 若尝试在CustomDialog中传入多个其他的Controller，以实现在CustomDialog中打开另一个或另一些CustomDialog，那么此处需要将指向自己的controller放在最后cancel: () => voidconfirm: () => voidbuild() {Column() {Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 })TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%').onChange((value: string) => {this.textValue = value})Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })Flex({ justifyContent: FlexAlign.SpaceAround }) {Button('cancel').onClick(() => {this.controller.close()this.cancel()}).backgroundColor(0xffffff).fontColor(Color.Black)Button('confirm').onClick(() => {this.inputValue = this.textValuethis.controller.close()this.confirm()}).backgroundColor(0xffffff).fontColor(Color.Red)}.margin({ bottom: 10 })}// dialog默认的borderRadius为24vp，如果需要使用border属性，请和borderRadius属性一起使用。}
}@Entry
@Component
struct CustomDialogUser {@State textValue: string = ''@State inputValue: string = 'click me'dialogController: CustomDialogController = new CustomDialogController({builder: CustomDialogExample({cancel: this.onCancel,confirm: this.onAccept,textValue: $textValue,inputValue: $inputValue}),cancel: this.existApp,autoCancel: true,alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -20 },gridCount: 4,customStyle: false})// 在自定义组件即将析构销毁时将dialogControlle删除和置空aboutToDisappear() {delete this.dialogController, // 删除dialogControllerthis.dialogController = undefined // 将dialogController置空}onCancel() {console.info('Callback when the first button is clicked')}onAccept() {console.info('Callback when the second button is clicked')}existApp() {console.info('Click the callback in the blank area')}build() {Column() {Button(this.inputValue).onClick(() => {if (this.dialogController != undefined) {this.dialogController.open()}}).backgroundColor(0x317aff)}.width('100%').margin({ top: 5 })}
}

升级弹窗界面示例

定义CustomDialogController

首先，我们需要定义一个CustomDialogController：

UpdateDialogController: CustomDialogController = new CustomDialogController({builder: UpdateDialog(),customStyle: true
})

这个CustomDialogController就代表弹窗，UpdateDialog()是弹窗的具体实现，customStyle为ture就表示弹窗样式可以自定义。 

设置调用时机

在这个场景中，我们想要每次打开应用的时候弹窗，其他时候不弹窗，我们需要在首页组件的aboutToAppear中加入以下代码：

aboutToAppear() {if(AppStorage.Get('nowIndex') === undefined || AppStorage.Get('nowIndex') === 0){this.UpdateDialogController.open()}
}

aboutToAppear函数的调用时机是创建自定义组件的新实例后，执行其build()函数之前，所以在首页组件的aboutToAppear加入CustomDialogController的打开开逻辑可使弹窗仅在应用打开的时候触发。

aboutToAppear参考文档：自定义组件的生命周期

实现builder实例

实现实例可以直接在builder后面直接实现，也可以定义在其他文件中，然后通过调用的方式获取，本文以调用方式实现。

实例组件的定义前需加export才能暴露出去：

export struct UpdateDialog {}

@CustomDialog
export struct UpdateDialog {@State currentVersion: string = ''@State richTextData: string = ''@State lastVersion: string = ''@State updateContent: string = ''private context?: AbilityContextprivate customDialogController?: CustomDialogControllerasync aboutToAppear() {this.context = getContext(this) as AbilityContextthis.richTextData = await dialogFeature.getRichTextData(this.context)Logger.info(TAG, `this.richTextData = ${this.richTextData}`)await this.getData()}async getData() {try {this.currentVersion = await dialogFeature.getCurrentVersion()let requestResponseContent: RequestResponseContent = await dialogFeature.getLastVersion()if (requestResponseContent.content === null || requestResponseContent.content === undefined) {return}this.updateContent = requestResponseContent.contentif (requestResponseContent.versionName === null || requestResponseContent.versionName === undefined) {return}this.lastVersion = requestResponseContent.versionName} catch (err) {Logger.info(TAG, `getApplicationVersion is fail`)}}...

 弹窗具体实现

自定义弹窗的实现就是在原页面的基础上再加一层页面，页面内容自定义。

弹窗页面我们可以通过stack组件实现，stack组件会使容器内的子组件堆叠布局，使用stack的好处是可以添加一层遮罩效果。

Stack() {// mask 遮罩层Column().width('100%').height('100%').backgroundColor('#000000').opacity(.4)...

以上代码在stack的第一层设置了backgroundColor和opacity属性，这样会产生如开始示意图的遮罩效果。

需要注意的是，需要在取消按钮的调用函数中关闭弹窗，具体代码如下：

Button($r('app.string.cancel')).onClick(() => {this.customDialogController.close()})

 弹窗界面完整代码

build() {Stack() {// mask 遮罩层Column().width('100%').height('100%').backgroundColor('#000000').opacity(.4)Column() {Stack({ alignContent: Alignment.TopStart }) {Text($r('app.string.update_title')).fontSize(30).fontColor('#FFFFFF').fontWeight(500).margin({ top: 70, left: 76 })Text(`V${(this.lastVersion || updateData.versionName)}`).fontSize(16).backgroundColor('#FFFFFF').textAlign(TextAlign.Center).fontColor('#E9304E').borderRadius(20).width(80).aspectRatio(2.8).margin({ top: 110, left: 76 })Column() {// 富文本容器Scroll() {Column() {if (this.richTextData) {RichText((this.updateContent || this.richTextData)).width('100%').height('100%')}}.width('100%')}.height(200)Row() {Button($r('app.string.cancel')).commonButtonStyle().fontSize(20).margin({ left: 10 }).fontColor('#E92F4F').backgroundColor('rgba(0,0,0,0.05)').margin({ right: 10 }).onClick(() => {this.customDialogController.close()}).key("cancel")Button($r('app.string.update_now')).commonButtonStyle().fontSize(20).margin({ right: 10 }).fontColor('#FFFFFF').backgroundColor('#E92F4F').margin({ left: 10 }).onClick(() => {this.customDialogController.close()}).key("Now")}.margin({ top: 30 })}.width('100%').padding({ left: 25, right: 25 }).margin({ top: 230 })}.height(600).width('100%').backgroundImage($r('app.media.update'), ImageRepeat.NoRepeat).backgroundImageSize(ImageSize.Contain)}.width(480).padding({ left: 16, right: 16 })}.width('100%').height('100%')
}

参考

本文供稿：刘家辉 (JaysonLiu3) - Gitee.com

本例参考的官方文档：橘子购物

自定义弹窗官方文档

自定义组件的生命周期-aboutToAppear

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注博主，同时可以期待后续文章ing🚀，不定期分享原创知识。
  • 想要获取更多完整鸿蒙最新VIP学习资料，请关注猫哥公众号【猫青年】，回复“鸿蒙”获取

 

其他资源 

层叠布局（Stack）-构建布局-开发布局-基于ArkTS的声明式开发范式-UI开发-开发-HarmonyOS应用开发

线性布局（Row/Column）-构建布局-开发布局-基于ArkTS的声明式开发范式-UI开发-开发-HarmonyOS应用开发

按钮（Button）-添加常用组件-添加组件-基于ArkTS的声明式开发范式-UI开发-开发-HarmonyOS应用开发

【鸿蒙软件开发】自定义弹窗（CustomDialog）_harmonyos developer自定义弹框-CSDN博客

免费的api接口网站有哪些？ - 知乎

文档中心

applications_app_samples: We provide a series of app samples to help you quickly get familiar with the APIs and app development process of the OpenHarmony SDKs. | 为帮助开发者快速熟悉OpenHarmony SDK所提供的API和应用开发流程，我们提供了一系列的应用示例

Codelabs: 分享知识与见解，一起探索HarmonyOS的独特魅力。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/648399.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

idea连接docker

idea连接docker

idea 插件无法连接docker问题 原文：idea 插件无法连接docker问题 // 修改docker配置 vi /usr/lib/systemd/system/docker.service // 加上该段配置允许任何ip访问 -H tcp://0.0.0.0:2375 -H unix://var/run/docker.sock // 重启docker即可 systemctl restart dock…
阅读更多...
虹科数字化与AR部门升级为安宝特AR子公司

虹科数字化与AR部门升级为安宝特AR子公司

致关心虹科AR的朋友们： 感谢您一直以来对虹科数字化与AR的支持和信任，为了更好地满足市场需求和公司发展的需要，虹科数字化与AR部门现已升级为虹科旗下独立子公司，并正式更名为“安宝特AR”。 ”虹科数字化与AR“自成立以来&…
阅读更多...
opencv010 卷积02（方盒滤波和均值滤波）

opencv010 卷积02（方盒滤波和均值滤波）

今天继续学习滤波器的相关知识！这篇比较简单，也短一些，明天写高斯滤波 方盒滤波 boxFilter(scr, ddepth, ksize[, dst[, anchor[, normalize[, borderType]]]]) 方盒滤波的卷积核如下： normalize（标准化&#xff0…
阅读更多...
python（fastapi） 后端请求url 获取pdf并转发给angular 前端 实现 预览功能

python（fastapi） 后端请求url 获取pdf并转发给angular 前端 实现 预览功能

写前端时，总会遇到跨域问题，解决方案单一（配置服务器代理），且效果不佳，所以面对跨域。甩给后端，简单高效，算得上“一步到位”。 python 后端接收来自其他服务器的pdf链接，并转为字节流，转发给前端； import requests from starlette.responses import StreamingRes…
阅读更多...
UDP简单的接收和发送

UDP简单的接收和发送

注释 udp简单的接收和发送&#xff0c;不分服务器和客户端&#xff0c;代码都一样&#xff0c;可以通用 using System; using System.Net; using System.Net.Sockets; using UnityEngine;public class UDPManager {/// <summary>/// 客户端/// </summary>private…
阅读更多...
Linux 挂载读取、卸载 ntfs格式硬盘

Linux 挂载读取、卸载 ntfs格式硬盘

windows常用的ntfs硬盘分区格式&#xff0c;在linux通常不能直接读取&#xff0c;不过挂载也是非常容易 一、挂载ntfs分区 1.安装 apt-get install ntfs-3g2.查看现在接上的硬盘 fdisk -l可以找到类似如下的&#xff0c;会显示microsoft basic data 3.创建挂载的目录 创…
阅读更多...
微服务JWT的介绍与使用

微服务JWT的介绍与使用

1. 无状态登录 1.1 微服务的状态 ​ 微服务集群中的每个服务&#xff0c;对外提供的都是Rest风格的接口&#xff0c;而Rest风格的一个最重要的规范就是&#xff1a;服务的无状态性。 ​ 什么是无状态&#xff1f; 服务端不保存任何客户端请求者信息客户端的每次请求必须具备…
阅读更多...
数据结构—基础知识（13）：树的存储结构

数据结构—基础知识（13）：树的存储结构

数据结构—基础知识&#xff08;13&#xff09;&#xff1a;树的存储结构 双亲表示法 这种表示方法中&#xff0c;以一组连续的存储单元存储树的结点&#xff0c;每个结点除了数据域data外&#xff0c;还附设一个parent域用以指示其双亲结点的位置。 这种存储结构利用了每个结…
阅读更多...
短信登录接口

短信登录接口

后台 urls.py path(mobile/login/, views.MobileLoginViewSet.as_view({post: login})),serializers.py import re from django.core.cache import cache class MobileLoginSerializer(serializers.ModelSerializer):# 覆盖mobile serializers.CharField(requiredTrue, wri…
阅读更多...
手搓反向迭代器

手搓反向迭代器

前言 关于反向迭代器&#xff0c;字如其名&#xff0c;就是将正向迭代器&#xff0c;从反方向再迭代一次就成了&#xff0c;所以我们如此设计反向迭代器&#xff1a; 假设我们已经拥有了一套能够使用&#xff0c;且包含模板的正向迭代器利用适配器模式&#xff0c;让反向迭代…
阅读更多...
列举MySQL对于Where子句的优化

列举MySQL对于Where子句的优化

列举MySQL对于Where子句的优化 在MySQL8之前&#xff0c;我们自己额外注意一些查询语句的写法&#xff0c;牺牲了代码的可读性。在MySQL8中&#xff0c;会自动进行类似的优化。可以保持查询的易理解性和可维护性。 这边文章会列举这些优化点。 查询语句优化 删除不必要的括号…
阅读更多...
软件测试生命周期

软件测试生命周期

本章简要介绍了软件开发项目中常用的生命周期模型&#xff0c;并解释了测试在每个模型中扮演的角色。它讨论了各种测试级别和测试类型之间的区别&#xff0c;并解释了这些在开发过程中的应用位置和方式。 大多数软件开发项目是按照事先选择的软件开发生命周期模型来计划和执行…
阅读更多...
Spring Boot + EasyExcel实现Excel文件导入导出

Spring Boot + EasyExcel实现Excel文件导入导出

Java解析、生成Excel比较有名的框架有Apache poi、jxl等&#xff0c;使用者可自行斟酌。 一、 为什么使用 EasyExcel 1.1 内存控制 Apache poi、jxl也能解析Excel&#xff0c;但他们都存在一个问题就是非常的耗内存&#xff0c;poi有一套SAX模式的API可以一定程度的解决一些…
阅读更多...
ZK监控方法以及核心指标

ZK监控方法以及核心指标

文章目录 1. 监控指标采集1.1 zk版本高于3.6.0监控指标采集1.2 zk版本低于3.6.0监控指标采集1.3 配置promethues采集和大盘 2. 核心告警指标3. 参考文章 探讨zk的监控数据采集方式以及需要关注的核心指标&#xff0c;便于日常生产进行监控和巡检。 1. 监控指标采集 3.6.0 版本…
阅读更多...
apache 前30个开源项目

apache 前30个开源项目

由于Apache软件基金会的开源项目 前30个具有代表性的项目 序号项目名称功能描述业务范围活跃度&#xff08;参考性描述&#xff09;1Apache HTTP Server高性能Web服务器提供HTTP服务支持非常活跃2Apache TomcatJava应用服务器部署Java Web应用程序非常活跃3Apache Hadoop分布式…
阅读更多...
ORA-12528: TNS: 监听程序: 所有适用例程都无法建立新连

ORA-12528: TNS: 监听程序: 所有适用例程都无法建立新连

用了网上的办法&#xff1a; 1、修改listener.ora的参数,把动态的参数设置为静态的参数,红色标注部分 位置D:\oracle\product\10.2.0\db_1\NETWORK\ADMIN SID_LIST_LISTENER (SID_LIST (SID_DESC (SID_NAME PLSExtProc) (ORACLE_HOME D:\oracle\produ…
阅读更多...
基于PHP反序列化练习

基于PHP反序列化练习

PHP创建一个以自己姓名命名的类&#xff0c;要求存在两个属性&#xff0c;name&#xff0c;age&#xff0c;进行序列化&#xff0c;输出序列化以后的数据。 <!-- PHP创建一个以自己姓名命名的类&#xff0c;要求存在两个属性&#xff0c;name&#xff0c;age --> <?…
阅读更多...
【C/C++】C/C++编程——第一个 C++ 程序：HelloWorld

【C/C++】C/C++编程——第一个 C++ 程序：HelloWorld

第一个 C 程序&#xff1a;HelloWorld 大家好&#xff0c;我是 shopeeai&#xff0c;也可以叫我虾皮&#xff0c;中科大菜鸟研究生。昨天我们成功搭建好了 C 的开发环境&#xff0c;今天我们来介绍一下第一个 C 程序,打印一个"hello world"。首先我们先贴一下示例代…
阅读更多...
《WebKit技术内幕》学习之十三（2）：移动WebKit

《WebKit技术内幕》学习之十三（2）：移动WebKit

2　移动化用户界面 HTML5为移动领域做了大量的工作&#xff0c;其中“meta”标签中的众多设置值能够帮助提供非常好的移动用户体验。一个典型的例子就是上面提到的用该标签来控制网页缩放&#xff0c;如示例代码13-2使用了一些JavaScript代码来完成&#xff0c;而实际上&#x…
阅读更多...
【FPGA Verilog开发实战指南】初识Verilog HDL-基础语法

【FPGA Verilog开发实战指南】初识Verilog HDL-基础语法

这里写目录标题 Verilog HDL简介与VHDL比较 Verilog HDL基础语法逻辑值关键字moduleendmodule 模块名输入信号输出信号既做输入也做输出线网型变量 wire寄存器型变量 reg参数 parameter参数 localparam常量赋值方式阻塞赋值非阻塞赋值 always语句assign 语句 算数运算符归元运算…
阅读更多...
最新文章

Copyright @ 2022~2023