鸿蒙项目云捐助第十一讲鸿蒙App应用的捐助成功自定义对话框组件实现

devtools/2024/12/23 0:29:49/

在生活中,用户做了一个好事后,很多场合都会收到一份感谢。在捐助的行业也是一样的,用户捐出了一片爱心,就会收获一份温情。这里的温情是通过自定义对话框实现的。

一、通过自定义对话框组件实现捐款成功的信息页

这里用户捐款成功或者捐赠物品成功,相当于用户获得一份爱心的回馈。这里会弹出有图片和文字的对话框,有图片和文字的对话框是通过@CustomDialog实现的,基本实现方法如下图所示。

这个@CustomDialog也可以是一个组件单独存在,存储在component的文件夹中,也可以作为组件代码中一部分,加到组件代码中。

在自定义@CustomDialog中做布局,这里首先引入一张图片,把图片下载到 media的目录下,然后进行布局,这个下载的素材可以使用百度ai助手进行透明处理,这里就下载了一块奖牌作为捐赠的荣誉,使用百度助手AI对奖牌进行透明处理。

这里通过百度AI处理后,可以把透明色的图片存储下来,放在media的目录下,根据得到的透明色奖牌得到的布局代码如下。

这里首先创建一个direction方向属性为FlexDirection.Clumn竖向排列backgroudColor为红色背景的弹性盒子Flex,在弹性盒子中首先有一个捐赠成功的图片,显示“爱心捐赠”的字样,在“爱心捐赠”的弹性盒子下面居中处理头像图片的弹性盒子,这里的居中将justifyContent属性设置为FlexAlign.Center进行水平居中,将alignItems属性设置为ItemAlign.Center进行竖直居中。弹性盒子中的头像图片限定宽度width和高度height都为80,并且这个图像做borderRadius的圆角处理,圆角大小恰好为width宽度和height高度的一半,这样就是一个圆形的头像,圆形头像的外边距向上走了-40个单位,向左走了-25个单位,就会在“爱心捐赠”的偏下位置,其实最重要的是希望这个头像在奖牌的中间,因为头像的外部弹性盒子背景图是一个透明色的奖牌。这个奖牌背景的弹性盒子会向上走-100个单位,让其能够在覆盖住部分“爱心捐赠”的字样,这个奖牌背景的弹性盒子也会向左走90个单位,不但覆盖住部分“爱心捐赠”的字样,也显示在屏幕的中间。最终布局效果如下图所示。

这样就有爱心捐赠后的喜庆感觉。这里在下面将会显示爱心的数值,每捐赠一份爱心,就会在头像奖牌的下面显示爱心数字,这里的数字是分块显示的,可以将要显示的数字放在数组中。代码如下图所示。

在这里定义了一个爱心化的初始数据,在布局界面中对数组进行循环,然后对每个数字进行单独显示和排版。代码如下图所示。

这里划红线的部分为显示其中一个数字的爱心数字。这里定义fontColor字体颜色为Color.White白色的字样,包含数字的弹性盒子使用backgroundImage红色的背景图片,并且背景图片设置了backgroundImageSize的背景图片尺寸大小。这里如果对数字的数组进行循环,每个数字都进行这样的布局,把爱心的小数字通过整行排列开来,代码如下所示。

这里通过ForEach循环爱心数据的数字数组,并把数组中每一个number类型的数据item显示在Text组件中,最后在弹性盒子中,通过设置的direction属性FlexDirection.Row进行横向排列。

得到的爱心捐赠数据的数字数组效果如下。

这里还可以添加爱心传递的按钮,还可以添加感谢你的捐赠相关的话语,最终得到的捐赠成功对话框组件布局代码如下图所示。

最终捐款成功的对话框效果图如下所示。

写好的自定义对话框CustomDialog后,把调试组件中的@Entry,@Component注释掉,然后使用@CustomDialog形成自定义对话框,并导出这个对话框就可以被其它组件调用了。方法如下图所示。

导出组件后,如果需要调用该对话框,可以在需要调用对话框的地方导出该对话框。

对话框的使用中,可以在需要调用对话框的地方进行实例化CustomDialogController,只有实例化CustomDialogController才可以控制对话框的显示和关闭。

实例化过程如下图所示。

在之前的捐赠物品详情页面中有一个“直接捐款”的按钮,把调用捐款成功的对话框放在这个动作中即可。代码如下图所示。

这样当点击“直接捐款”的按钮后,就会弹出对应的捐款成功的荣耀对话框。

后面持续完成我的及华为云的相关功能页面,请持续关注。


http://www.ppmy.cn/devtools/144523.html

相关文章

2024年12月17日Github流行趋势

项目名称:google-gemini / cookbook 项目维护者:MarkDaoust markmcd random-forests shilpakancharla Giom-V项目介绍:Gemini API 的使用示例和指南。项目star数:7,977项目fork数:998 项目名称:TEN-framew…

利用notepad++删除特定关键字所在的行

1、按组合键Ctrl H,查找模式选择 ‘正则表达式’,不选 ‘.匹配新行’ 2、查找目标输入 : ^.*关键字.*\r\n (不保留空行) ^.*关键字.*$ (保留空行)3、替换为:(空) 配置界面参考下图: ​​…

如何在自己的云服务器上部署mysql

如何在自己的云服务器上部署mysql 前言: 我是用的是阿里云服务器,我的服务器上安装的系统是Ubuntu 20.04,一下内容都是居于此撰写。 前期准备工作 远程链接自己的云服务器,这里给大家推荐一个好用的软件:FinalShel…

go-zero(十四)实践:缓存一致性保证、缓存击穿、缓存穿透与缓存雪崩解决方案

go zero 实践:缓存一致性保证、缓存击穿、缓存穿透与缓存雪崩解决方案 缓存 作为一种重要的技术手段,可以有效提高系统的响应速度,降低对数据库的压力。但是缓存的使用伴随一些常见问题,如缓存一致性、缓存击穿、缓存穿透和缓存雪…

项目开发实践——基于SpringBoot+Vue3实现的在线考试系统(二)

文章目录 一、登录功能实现1、前端实现1.1 创建登录组件1.2 安装和配置Element Plus1.3 安装axios和调用后端接口2、后端实现2.1 创建数据表和准备数据2.2 配置MYSQL配置信息2.3 登录功能实现2.3.1 创建实体类2.3.2 创建登录服务接口及实现2.3.3 创建Mapper2.3.4 实现登录接口A…

[maven]使用spring

为了更好理解springboot,我们先通过学习spring了解其底层。 这里讲一下简单的maven使用spring框架入门使用。因为spring这一块的东西很多都需要联合起来后才好去细讲,本篇通过spring-context大致地介绍相关内容。 注意:spring只是一个框架&am…

《探索QT 5.14.1:功能、特性与应用全解析》

《探索QT 5.14.1:功能、特性与应用全解析》 一、QT 5.14.1:强大的跨平台开发利器二、QT 5.14.1 的核心功能与特性(一)丰富的控件库(二)高效的信号槽机制(三)卓越的性能表现&#xff…

完全二叉树的权值(蓝桥杯2019年试题G)

给定一棵包含N个节点的完全二叉树,树上的每个节点都有一个权值,按从上到小、从左到右的顺序依次是A1、A2……An,(1,2,n为下标。)如下图所示。 现在,小明要把相同深度的节点的权值加到一起&#…