鸿蒙移动应用开发--渲染控制实验

任务：使用“对象数组”、“ForEach渲染”、“Badge角标组件”、“Grid布局”等相关知识，实现生效抽奖卡案例。如图1所示：

图1 生肖抽奖卡实例图 

图1(a)中有6张生肖卡可以抽奖，每抽中一张，会通过弹层显示出来（图（b）），每抽中一张，图片的右上角数量增加1，若6张卡片均抽中了（每种卡片至少有一张），就可以抽更大的奖，包括华为、苹果以及小米三种不同的手机，如图1（c）。也可实现支付宝集五福案例，功能相似即可。

参考资料：68-【阶段综合】-生肖抽卡-Badge角标组件_哔哩哔哩_bilibili

实验过程：

        首先，定义了一个接口`Images`，用于描述每张生肖卡的数据结构，包含图片的URL和数量（`count`）。接着，基于这个接口准备了初始数据，即6张生肖卡，每张卡的初始数量为0。

        在页面布局方面，使用了`Stack`层叠布局来实现页面的多层显示。最底层是一个`Column`布局，其中包含了一个`Grid`布局用于展示生肖卡。通过`ForEach`方法，将每张生肖卡的数据绑定到`GridItem`中，并使用`Badge`组件在每张卡的右上角显示其数量。此外，还添加了一个“立即抽卡”按钮，用于触发抽卡操作。

        当点击“立即抽卡”按钮时，会触发一系列的动画效果和逻辑处理。首先，设置遮罩层的透明度、层级和缩放比例，使抽卡页面显示出来。然后，通过`Math.random()`方法生成一个随机数，表示抽中的生肖卡序号。接着，将抽中的生肖卡以放大的形式显示在抽卡页面上，并提供一个“开心收下”按钮。

        点击“开心收下”按钮后，将遮罩层的透明度和层级恢复到初始状态，并将抽中的生肖卡数量加1。同时，检查是否所有生肖卡的数量都大于0，如果是，则表示集齐了所有生肖卡，可以进入中奖页面。在中奖页面中，会随机选择一个奖品（华为、苹果或小米手机），并显示相应的图片和“再来一次”按钮。点击“再来一次”按钮后，将所有生肖卡的数量重置为0，重新开始抽奖过程。

        在整个实验过程中，通过合理使用`State`变量来控制页面的状态变化，以及利用`ForEach`和`Badge`组件实现了动态的数据绑定和显示效果。同时，通过`Grid`布局实现了生肖卡的规则排列，使得页面布局更加美观和清晰。

源代码：

// 1.定义接口
interface Images{url:stringcount:number
}// 需求1：遮罩层显隐 透明度opacity 0-1 层级zInsex 1-99
// 需求2：图片收缩 缩放scale 0-1
@Entry
@Component
struct Index {// 随机的生肖卡序号@State randomNum:number=-1// 初始值为-1表示还没有抽卡// 2.基于接口准备数据@State images:Images[]=[{url:'app.media.bg_00',count:0},{url:'app.media.bg_01',count:0},{url:'app.media.bg_02',count:0},{url:'app.media.bg_03',count:0},{url:'app.media.bg_04',count:0},{url:'app.media.bg_05',count:0}]// 透明度@State transparent:number=0 // 初始为0//层级@State Level:number=0 // 初始为0// 缩放@State zoomx:number=0@State zoomy:number=0// 控制中奖@State isGet:boolean=false// 奖池@State arr:string[]=['pg','hw','xm']@State price:string=''//默认没有中奖build() {// 层叠布局Stack(){// 初始化页面Column(){// Grid布局的基础使用：规则的行列布局中非常常见Grid(){ForEach(this.images,(item:Images,index:number)=>{GridItem(){Badge({count:item.count,position:BadgePosition.RightTop,style:{fontSize:14,badgeSize:20,badgeColor:Color.Red}}){Image($r(item.url)).width(100).height(100)}}})}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr').width('100%').height(300).margin({top:100})Button('立即抽卡').width(200).backgroundColor('#de668d').margin({top:50}).onClick(()=>{this.Level=99this.transparent=1this.zoomx=1this.zoomy=1//计算随机数this.randomNum = Math.floor(Math.random()*6)})}.zIndex(5) // 初始化层级为5.width('100%').height('100%')// 抽卡时的页面Column({space:25}){Text('获得生肖卡片').fontColor('#f5ebcf').fontSize(25).fontWeight(FontWeight.Bold)Image($r(`app.media.img_0${this.randomNum}`)).width(200)// 卡片的播放.scale({x:this.zoomx,y:this.zoomy}).animation({duration:500})Button('开心收下').width(200).height(50).backgroundColor(Color.Transparent)// 透明色.border({width:2,color:'#fff9e0'}).onClick(()=>{this.transparent=0this.Level=0this.zoomx=0this.zoomy=0// 开心收下this.images[this.randomNum]={url:`app.media.img_0${this.randomNum}`,count:this.images[this.randomNum].count+1}// 判断卡片的数量// 如果卡片中有一个的数量为0，那就是没集齐let flag:boolean=truefor(let item of this.images){if(item.count==0){flag=falsebreak}}this.isGet=flagif(flag){let randomIndex:number=Math.floor(Math.random()*3)this.price=this.arr[randomIndex]}})}.justifyContent(FlexAlign.Center)// 居中对齐.width('100%').height('100%').backgroundColor('#cc000000').zIndex(this.Level).opacity(this.transparent)// 透明度// 动画.animation({duration:200})if(this.isGet){// 中奖页面Column(){Text('恭喜获得手机一部').fontColor('#f5ebcf').fontSize(25).fontWeight(700)Image($r(`app.media.${this.price}`)).width(300)Button('再来一次').width(200).height(50).backgroundColor(Color.Transparent).border({width:2,color:'#fff9e0'}).onClick(()=>{this.isGet=falsethis.price=''this.images=[j{url:'app.media.img_00',count:0},{url:'app.media.img_01',count:0},{url:'app.media.img_02',count:0},{url:'app.media.img_03',count:0},{url:'app.media.img_04',count:0},{url:'app.media.img_05',count:0}]})}.zIndex(10).width('100%').height('100%').justifyContent(FlexAlign.Center).backgroundColor('#cc000000')}}}
}

 运行截图：