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

ArkUI--抽奖

news 来源：原创 2025/6/1 11:27:56

摘要：本文展示了一个基于ArkUI的生肖抽奖应用实现。通过@State管理当前选中索引(n1)、各卡片中奖次数(nums)和生肖图片资源(pics)。点击抽奖按钮时，启动15次循环动画后随机停在0-5索引位置，并在对应卡片Badge上累计中奖次数。界面包含3×2网格展示生肖图片，选中卡片显示红色边框，底部统计各卡片中奖次数。组件销毁时自动清除定时器，确保资源释放。该实现展示了ArkUI的状态管理、ForEach循环渲染、定时器动画和Badge组件等核心功能。
@Entry
@Component
struct Index {@State n1: number = -1; // 当前抽中的索引@State nums: number[] = [0, 0, 0, 0, 0, 0]; // 每张卡片的中奖次数@State pics: Resource[] = [$r("app.media.shengxiao1"),$r("app.media.shengxiao2"),$r("app.media.shengxiao3"),$r("app.media.shengxiao4"),$r("app.media.shengxiao5"),$r("app.media.shengxiao6")];private timer: number = 0; // 抽奖动画计时器private counter: number = 0; // 动画计数器private finalIndex: number = 0; // 最终中奖索引build() {Column() {// 抽奖标题图片Image($r("app.media.choujiang")).width(300).margin(20)// 抽奖按钮Button('抽奖').fontSize(25).width(150).height(50).margin(10).onClick(() => {// 停止之前的动画clearInterval(this.timer);this.counter = 0;// 随机生成最终中奖索引 (0-5)this.finalIndex = Math.floor(Math.random() * 6);// 开始抽奖动画this.timer = setInterval(() => {// 循环高亮每个选项this.n1 = this.counter % 6;this.counter++;// 15次循环后停在最终位置并增加计数if (this.counter > 15) {clearInterval(this.timer);this.n1 = this.finalIndex;// 增加对应卡片的中奖次数let newNums = [...this.nums];newNums[this.finalIndex] += 1;this.nums = newNums;}}, 100);})Grid() {ForEach(this.pics, (item: Resource, index: number) => {GridItem() {Badge({count: this.nums[index],maxCount: 99,position: BadgePosition.RightTop,style: {badgeSize: 50,badgeColor: Color.Brown,fontSize: 30,color: Color.White}}) {// 生肖图片Image(item).width(120).height(120).objectFit(ImageFit.Fill).border({width: this.n1 === index ? 5 : 0,color: this.n1 === index ? Color.Red : Color.Transparent}).borderRadius(10)}}.padding(10)})}.columnsTemplate('1fr 1fr 1fr') // 3列.rowsTemplate('1fr 1fr')        // 2行.width('90%').height('50%')Row() {ForEach(this.nums, (count: number, index: number) => {Column() {Text(`卡片${index + 1}`).fontSize(18).margin(5)Text(`${count}次`).fontSize(20).fontColor(Color.Blue)}.margin(10)})}.justifyContent(FlexAlign.SpaceAround).width('100%').margin(20)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}// 组件销毁时清除计时器aboutToDisappear() {clearInterval(this.timer);}
}