当前位置: 首页 > news >正文

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

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

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

这里用户捐款成功或者捐赠物品成功,相当于用户获得一份爱心的回馈。这里会弹出有图片和文字的对话框,有图片和文字的对话框是通过@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才可以控制对话框的显示和关闭。

实例化过程如下图所示。

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

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

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

相关文章:

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

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

Elasticsearch-分词器详解

什么是分词器 1、分词器介绍 对文本进行分析处理的一种手段,基本处理逻辑为按照预先制定的分词规则,把原始文档分割成若干更小粒度的词项,粒度大小取决于分词器规则。 常用的中文分词器有ik按照切词的粒度粗细又分为:ik_max_word和ik_smart&…...

Android笔试面试题AI答之Android基础(3)

文章目录 1.谈一谈 Android 的安全机制一、系统架构层面的安全设计二、核心安全机制三、其他安全机制与措施 2.Android 的四大组件是哪四大?3.Android 的四大组件都需要在清单文件中注册吗?4.介绍几个常用的Linux命令一、文件和目录管理二、用户和权限管…...

酷黑金色配色 影片素材不过时 色彩丰富 电影主题html

本套大作业共计8个HTML页面,网页中包含:DIVCSS、下拉菜单栏、banner轮播图、图片放大效果、鼠标滑过效果、视频、小图标及按钮设计、登录注册页等,同时设计了logo;本作品花费大量时间去整理素材,大部分素材均使用Photo…...

《Go 语言变量》

《Go 语言变量》 介绍 Go 语言是一种静态类型、编译型的编程语言,由 Google 开发。它以其简洁的语法、高效的并发处理和强大的标准库而闻名。在 Go 语言中,变量是存储数据的基本单位,它们可以是各种数据类型,如整数、浮点数、布…...

Tool之Excalidraw:Excalidraw(开源的虚拟手绘风格白板)的简介、安装和使用方法、艾米莉应用之详细攻略

Tool之Excalidraw:Excalidraw(开源的虚拟手绘风格白板)的简介、安装和使用方法、艾米莉应用之详细攻略 目录 Excalidraw 简介 1、Excalidraw 的主要特点: Excalidraw 安装和使用方法 1、Excalidraw的安装 T1、使用 npm 安装: T2、使用 …...

Llama 3 模型系列解析(一)

目录 1. 引言 1.1 Llama 3 的简介 1.2 性能评估 1.3 开源计划 1.4 多模态扩展 ps 1. 缩放法则 2. 超额训练(Over-training) 3. 计算训练预算 4. 如何逐步估算和确定最优模型? 2. 概述 2.1 Llama 3 语言模型开发两个主要阶段 2.2…...

重拾设计模式--观察者模式

文章目录 观察者模式(Observer Pattern)概述观察者模式UML图作用:实现对象间的解耦支持一对多的依赖关系易于维护和扩展 观察者模式的结构抽象主题(Subject):具体主题(Concrete Subject&#xf…...

3-Gin 渲染 --[Gin 框架入门精讲与实战案例]

在 Gin 框架中,渲染指的是将数据传递给模板,并生成 HTML 或其他格式的响应内容。Gin 支持多种类型的渲染,包括 String HTML、JSON、XML 等。 String 渲染 在 Gin 框架中,String 渲染方法允许你直接返回一个字符串作为 HTTP 响应…...

回溯---java---黑马

回溯 概念 程序在运行过程中分成了多个阶段 通过某些手段,将数据恢复到某一阶段,称之为回溯 手段包括:方法栈、自定义栈 使用基本数据类型n public class Backtracking{public static void main(String[] args) {rec(1);}public void r…...

【数据结构】排序(附测试源码)

【数据结构】排序(附测试源码) 本节是数据结构排序版(不完整版,没有C语言版的哈希表) 1.排序概念: 1.1所谓排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增…...

【翻译】大型 Transformer 模型推理优化

翻译原文:Large Transformer Model Inference Optimization | LilLog 原文作者:Lilian Weng 目录 方法概述蒸馏 Distillation量化 Quantization Transformer 量化的挑战训练后量化 (PTQ) 混合精度量化 Mixed-precision quantization细粒度量化量化的二…...

RabbitMQ概述

目录 RabbitMQ概述 前言 MQ MQ的作用 为什么选择RabbitMQ RabbitMQ的介绍 RabbitMQ概述 前言 Rabbit, 兔⼦的意思 互联⽹⾏业很多公司, 都喜欢⽤动物命名产品, 或者作为公司的logo, 吉祥物. ⽐如: 腾讯的企鹅, 京东的狗, 美团的袋⿏, 携程的海豚,阿⾥就更多了, 蚂蚁, ⻜…...

《PCI密码卡技术规范》题目

单选1 在《PCI密码卡技术规范》中,下列哪项不属于PCI密码卡的功能()。 A.密码运算功能 B.密钥管理功能 C.物理随机数产生功能 D.随主计算机可信检测功能 正确答案:D. <font style="color:#DF2A3F;">解析:</font> 单选 2 在《PCI密码卡技术规…...

AI开发:使用支持向量机(SVM)进行文本情感分析训练 - Python

支持向量机是AI开发中最常见的一种算法。之前我们已经一起初步了解了它的概念和应用&#xff0c;今天我们用它来进行一次文本情感分析训练。 一、概念温习 支持向量机&#xff08;SVM&#xff09;是一种监督学习算法&#xff0c;广泛用于分类和回归问题。 它的核心思想是通过…...

ECharts柱状图-柱图42,附视频讲解与代码下载

引言&#xff1a; 在数据可视化的世界里&#xff0c;ECharts凭借其丰富的图表类型和强大的配置能力&#xff0c;成为了众多开发者的首选。今天&#xff0c;我将带大家一起实现一个柱状图图表&#xff0c;通过该图表我们可以直观地展示和分析数据。此外&#xff0c;我还将提供…...

呼入机器人:24小时客户服务的未来趋势

呼入机器人&#xff1a;24小时客户服务的未来趋势 作者&#xff1a;开源大模型智能呼叫中心系统FreeAICC&#xff0c;Github&#xff1a;https://github.com/FreeIPCC/FreeAICC 在当今快节奏的商业环境中&#xff0c;客户服务已成为企业竞争的核心要素之一。随着人工智能技术…...

FFmpeg 安装教程(Windows 系统)

1. 前言 FFmpeg 是一个用于处理视频、音频等多媒体文件的开源工具包。它支持几乎所有的多媒体格式转换、剪辑和编辑&#xff0c;是开发者和多媒体工作者必备的工具。本文详细讲解如何在 Windows 系统上安装 FFmpeg 并进行基本配置。 2. 下载 FFmpeg 安装包 打开 Dpwnload FFmp…...

左神算法基础巩固--1

文章目录 时间复杂度常数时间的操作时间复杂度的定义时间复杂度的作用剖析递归行为和递归行为时间复杂度的估算 排序选择排序冒泡排序插入排序归并排序小和问题问题描述解题思路 快速排序荷兰国旗问题问题描述 堆排序堆结构大根堆小根堆 桶排序 二分二分搜索 ^的运用不用额外空…...

基于鲲鹏服务器的打砖块小游戏部署

案例介绍 鲲鹏服务器是基于鲲鹏处理器的新一代数据中心服务器&#xff0c;适用于大数据、分布式存储、高性能计算和数据库等应用。鲲鹏服务器具有高性能、低功耗、灵活的扩展能力&#xff0c;适合大数据分析、软件定义存储、Web等应用场景。 本案例将指导开发者如何在鲲鹏服务…...

STM32F407寄存器点灯

背景描述&#xff1a; 最近用32开发遇到问题不得不看寄存器了&#xff0c;就回顾了一下寄存器手册的查看方式和寄存器的使用方法&#xff1b; 上一次这么细致的记录还是在刚学习STM32的时候&#xff0c;之前觉得看寄存器手册以及配置寄存器是有点难度的事情&#xff0c;现在回头…...

电子电气架构 --- 队列刷写场景及刷写上位机浅析

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 所谓鸡汤,要么蛊惑你认命,要么怂恿你拼命,但都是回避问题的根源,以现象替代逻辑,以情绪代替思考,把消极接受现实的懦弱,伪装成乐观面对不幸的…...

kubernates实战

使用k8s来部署tomcat 1、创建一个部署&#xff0c;并指定镜像地址 kubectl create deployment tomcat6 --imagetomcat:6.0.53-jre82、查看部署pod状态 kubectl get pods # 获取default名称空间下的pods kubectl get pods --all-namespaces # 获取所有名称空间下的pods kubect…...

换工作,如何退出微软账户???(删除注册表数据)

1.Winr 进入 输入. 2.删除 注意路径. 3.删除 注意路径. 4.效果如下&#xff0c;清空成功...

vscode+编程AI配置、使用说明

文章目录 [toc]1、概述2、github copilot2.1 配置2.2 使用文档2.3 使用说明 3、文心快码&#xff08;Baidu Comate&#xff09;3.1 配置3.2 使用文档3.3 使用说明 4、豆包&#xff08;MarsCode&#xff09;4.1 配置4.2 使用文档4.3 使用说明 5、通义灵码&#xff08;TONGYI Lin…...

60.基于SSM的个人网站的设计与实现(项目 + 论文)

项目介绍 本站是一个B/S模式系统&#xff0c;个人网站是在MySQL中建立数据表保存信息&#xff0c;运用SSMVue框架和Java语言编写。并按照软件设计开发流程进行设计实现充分保证系统的稳定性。系统具有界面清晰、操作简单&#xff0c;功能齐全的特点&#xff0c;使得基于SSM的网…...

myexcel的使用

参考&#xff1a; &#xff08;1&#xff09;api文档&#xff1a;https://www.bookstack.cn/read/MyExcel-2.x/624d8ce73162300b.md &#xff08;2&#xff09;源代码&#xff1a; https://github.com/liaochong/myexcel/issues 我&#xff1a; &#xff08;1&#xff09;m…...

CSDN外链失效3:

参考我之前的博客&#xff1a; 外链失效博客1&#xff1a;随想笔记1&#xff1a;CSDN写博客经常崩溃&#xff0c;遇到外链图片转存失败怎么办_csdn外链图片转存失败-CSDN博客 外链失效博客2&#xff1a;网络随想2&#xff1a;转语雀_md格式转语雀lake格式-CSDN博客 markdown…...

SSM 医院预约挂号系统:Vue 技术驱动下的设计与实现飞跃

3系统分析 3.1可行性分析 通过对本医院预约挂号系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本医院预约挂号系统采用SSM框架&#xff0c;JAVA作为开发语…...

如何在centos系统上挂载U盘

在CentOS上挂载NTFS格式的U盘,需要执行一系列步骤,包括识别U盘设备、安装必要的软件、创建挂载点,并最终挂载U盘。以下是在CentOS上挂载NTFS格式U盘的详细步骤: 一、准备工作 确认CentOS版本: 确保你的CentOS系统已经安装并正常运行。不同版本的CentOS在命令和工具方面可能…...

lshw学习——简单介绍

文章目录 简介核心结构扫描设备原理scan_abiscan_burnerscan_cdromscan_cpufreqscan_cpuidscan_cpuinfoscan_device_treescan_diskscan_displayscan_dmiscan_fatscan_fbscan_graphicsscan_idescan_ideraidscan_inputscan_isapnpscan_lvmscan_memoryscan_mmcscan_mountsscan_net…...

UI自动化概念+Web自动化测试框架

1.UI自动化测试概念:我们先明确什么是UI UI&#xff0c;即(User Interface简称UI用户界面)是系统和用户之间进行交互和信息交换的媒介 UI自动化测试:Web自动化测试和移动自动化测试都属于UI自动化测试&#xff0c;UI自动化测试就是借助自动化工具对程序UI层进行自动化的测试 …...

java: 无效的目标发行版: xx

java: 无效的目标发行版: xx 背景java: 无效的目标发行版: xx 在 Intellij 的修复 背景 这里单独针对Intellij开发工具对 “java: 无效的目标发行版: xx”错误的修复。 java: 无效的目标发行版: xx 在 Intellij 的修复 同一台电脑使用多个JDK的时候容易出现在运行程序时容易…...

【QSS样式表 - ③】:QSS常用属性

文章目录 QSS常用属性字体样式QSS示例 边框样式QSS示例 盒子模型背景颜色、背景图片background-QSS示例 border-imageQSS示例1QSS示例2 QObject属性QSS示例 QSS常用属性 字体样式 以上也可以直接写成一行&#xff1a; font: 字体风格 字体粗细 字体大小 字体名称;QSS示例 新…...

WPF Binding 绑定

绑定是 wpf 开发中的精髓&#xff0c;有绑定才有所谓的数据驱动。 1 . 背景 目前 wpf 界面可视化的控件&#xff0c;继承关系如下&#xff0c; 控件的数据绑定&#xff0c;基本上都要借助于 FrameworkElement 的 DataContext 属性。 只有先设置了控件的 DataContext 属性&…...

掌握Java分支结构:if和switch详解

在编程中&#xff0c;顺序结构确实只能按照代码的书写顺序依次执行&#xff0c;而无法根据条件进行判断和选择。为了实现程序根据不同情况执行不同代码块的功能&#xff0c;我们需要使用分支结构。Java提供了两种主要的分支结构来帮助开发者实现这一目标&#xff1a; if 语句&…...

ES学习Promise对象(九)

这里写目录标题 一、概念二、示例基本使用使用 Promise 对象封装Ajaxthen() 方法catch() 方法 一、概念 简单说就是一个容器&#xff0c;里面保存着某个未来才会结束的事件&#xff08;通常是一个异步操作&#xff09;的结果。Promise 是一个对象&#xff0c;Promise 提供统一…...

ssh 密钥对文件登录

首先提供我生成的密钥对【test-241222.pem】: -----BEGIN RSA PRIVATE KEY----- MIIEowIBAAKCAQEAkrx1O 【.....】 -----END RSA PRIVATE KEY----- 1. 验证私钥格式 首先,确认test-241222.pem确实是有效的RSA私钥。你可以通过以下命令来验证(在Linux/Mac上): openssl …...

电流、电压,串联电路中,电流为什么处处相等?

电流是什么&#xff1f;串、并联中&#xff0c;电流的关系 飞书链接&#xff0c;看这个&#xff0c;格式更好&#xff0c;提供书籍下载 电流的本质定义&#xff1a; 电流 (I) 是 单位时间内&#xff0c;通过导体截面的电荷量。它的数学定义是&#xff1a; I Δ Q Δ t I \f…...

Python生成学生管理系统,使用qt组件,MySQL 数据库,-1

创建一个基于 Python 的学生管理系统&#xff0c;使用 Qt 组件&#xff08;通过 PyQt5 或 PySide2&#xff09;和 MySQL 数据库&#xff0c;是一个综合性的项目。以下是一个详细的指南&#xff0c;包括环境设置、数据库设计、Python 代码示例以及如何使用 Qt 设计用户界面。 #…...

接口测试Day03-postman断言关联

postman常用断言 注意&#xff1a;不需要手敲&#xff0c;点击自动生成 断言响应状态码 Status code&#xff1a;Code is 200 //断言响应状态码为 200 pm.test("Status code is 200", function () {pm.response.to.have.status(200); });pm: postman的实例 test() …...

微服务分布式(二、注册中心Consul)

首先我们需要安装consul,到官网下载Consul Install | Consul | HashiCorp Developer 在解压的consul目录下 执行启动命令 consul agent -dev 启动服务 -dev表示开发模式 -server表示服务模式 启动后在浏览器访问8500端口http://localhost:8500/可以看到服务管理界面 项目…...

sh cmake-linux.sh -- --skip-license --prefix = $MY_INSTALL_DIR

本文来自天工AI --------- 命令用于安装CMake的脚本&#xff0c;其中--skip-license参数表示跳过许可协议的显示&#xff0c;--prefix参数指定了CMake的安装目录。$MYINSTALLDIR是一个环境变量&#xff0c;应该在运行命令之前设置为您想要安装CMake的目录。 -------- sh xx…...

信创技术栈发展现状与展望:机遇与挑战并存

一、引言 在信息技术应用创新&#xff08;信创&#xff09;战略稳步推进的大背景下&#xff0c;我国信创技术栈已然在诸多关键层面收获了亮眼成果&#xff0c;不过也无可避免地遭遇了一系列亟待攻克的挑战。信创产业作为我国达成信息技术自主可控这一目标的关键一招&#xff0c…...

文本图像多模态基础-clip的细节解读

目录 一、我写的目的 二、原文出处 三、方法和benchmark 3.1 方法原理 3.2 值得注意的代码细节 实际的损失函数计算&#xff1a; evaluation的计算&#xff1a; backbone的类型&#xff1a; 3.3 benchamrk 推理时的细节-benchmark比较&#xff1a; 经典benchmark对…...

c4d动画怎么导出mp4视频,c4d动画视频格式设置

宝子们&#xff0c;今天来给大家讲讲 C4D 咋导出mp4视频的方法。通过用图文教程的形式给大家展示得明明白白的&#xff0c;让你能轻松理解和掌握&#xff0c;不管是理论基础&#xff0c;还是实际操作和技能技巧&#xff0c;都能学到&#xff0c;快速入门然后提升自己哦。 c4d动…...

Mysql复习(二)

一、 DBMS&#xff1a;是管理数据库的软件的集合&#xff0c;是用户访问数据库的接口。主要功能&#xff1a;数据定义、数据操纵、数据库运行管理、数据库建立与维护等 二、 关系模式的完整性规则包括&#xff08;实体完整性、参照完整性和用户自定义完整性&#xff09; 实体…...

【芯片设计- RTL 数字逻辑设计入门 番外篇 13 -- FAB厂中PE工程师和PIE工程师的区别】

文章目录 Overview岗位职责的核心区别PE工程师:岗位要求的差异PE工程师接触面和协作关系后期职业发展方量产与研发的区别转自: 老虎说芯 老虎说芯 2024年12月20日 12:30 广东 Overview 在导体制造行业中,PE工程师(Process Engineer,工艺工程师)和PIE工程师(Process Int…...

java中的输入输出

目录 1.基本概念1.标准输入流&#xff08;System.in&#xff09;&#xff1a;2.标准输出流&#xff08;System.out&#xff09;&#xff1a;3.Scanner 类&#xff1a;4.File 类&#xff1a;&#xff16;.BufferedReader 和 BufferedWriter&#xff1a;7.PrintWriter&#xff1a…...

java抽奖系统(八)

9. 抽奖模块 9.1 抽奖设计 抽奖过程是抽奖系统中最重要的核⼼环节&#xff0c;它需要确保公平、透明且⾼效。以下是详细的抽奖过程设计&#xff1a; 对于前端来说&#xff0c;负责控制抽奖的流程&#xff0c;确定中奖的人员 对于后端来说&#xff1a; 接口1&#xff1a;查询完…...