鸿蒙开发之ArkUI 界面篇 三十 综合案列-生肖卡抽奖

打开的时候，界面是这样子的：

6个生肖卡是6张图片，'立即抽卡'是Button，仔细观察，生肖卡列之间的距离是相等的，生肖卡和“立即抽卡的”的关系是垂直的关系，每一张生肖卡是图片，如果单纯的界面，不考虑扩展的话，Colum+两个Row，每个Row三张图片也能实现静态界面，但是这样的缺点是扩展不够好，比如要增加到12呢？界面改动会大很多，如果是ForEach遇到3的倍数就换行呢？那如果界面改成每列两个也是改动比较大的，感觉用Flex也能实现Flex的缺点是拐弯的地方不不好控制，鸿蒙提供了Grid组件，原来如下图：

感谢 学前端的小朱:鸿蒙开发中的Grid布局_鸿蒙grid-CSDN博客，这篇文章有详细的介绍

功能2，当抽中一个生肖卡的时候，右上角会有红圈加文字提示，这种的话鸿蒙提供了Badge组件，语法是Badge({Badge的属性}){需要显示提示的组件}，按照面向对象的编程思想，每个item有图片地址和抽中的次数两个属性，对象定义为：

每一项的实例化并加入到数组中，下图：

这里文件末尾用数字命名的原因是：抽奖的本质是随机产生1到6的数字，产生的数字是多少就抽中谁，每一个都集齐了才能获得奖励，抽中了哪一项会弹框提示，如下图：

做过Android开发的同学第一印象包括我想到的估计是dialog或者是FramLayout来实现，鸿蒙中有么有dialog我目前还不清楚，但是我知道要实现FramLayout的效果，需要使用zIndex，那我们首先把这个界面做好，不显示，点击的手让他显示出来，Android中不显示使用的Gone或者是invisible这里的实现是透明度+缩放动画+zIndex来实现的，也就是开始的时候是完全透明的，层级也是特别低，至少要比'立即抽卡'界面低，看不到，点击立即抽卡，同时改变透明度和提高层级，同时修改scale属性的值，记住：鸿蒙开发中，界面的更新只需要修改对应的值就行，前提是这个值需要使用@state修饰，别的任何都不用改。

抽中哪一个生肖卡，弹出框就有那个生肖卡的图片，这里图片的地址不需要设置为常量，也不需要传递，只需要随机数字前面添加@State修饰，图片的名字最后一位是随机数命名，只要名字改变，就会自动加载对应的图片，如下图：

我们点击开心收下，其实也是就是把透明度、层级、缩放值改回原来初始值，并对抽中的Item数字加1，因为这些数据都是用@State修饰的，所有界面就自动更新了，每个生肖都抽到之后，会弹出下图中奖界面，如下图：

这里的实现原理也是和上图开心收下这个实现原理一样。对于这样的成叠布局，需要的外层Stack，显示那一层就提高那一层的层级

总结：鸿蒙开发中界面的更新只需要@State修饰的变量更新界面就会相应的更新，包括透明度的变化、图片地址的变化、动画属性值的变化，弹窗效果的外城是Stack，需要那个字组件显示就提高字组件的层级zIdex，半透明的效果就是修改透明度值。

最后需要源代码的留言