ArkUI--抽奖

摘要：本文展示了一个基于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);
  }
}