鸿蒙项目云捐助第十一讲鸿蒙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才可以控制对话框的体现和关闭。

实例化过程如下图所示。

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

如许当点击“直接捐款”的按钮后，就会弹出对应的捐款乐成的光彩对话框。

背面连续完成我的及华为云的干系功能页面，请连续关注。