鸿蒙 NEXT 开发案例：九宫格随机

class Prize {  title: string // 奖品标题  color: string // 奖品颜色  description: string // 奖品描述
  constructor(title: string, color: string, description: string = "") { // 构造函数，初始化奖品信息    this.title = title // 设置奖品标题    this.color = color // 设置奖品颜色    this.description = description // 设置奖品描述  }}
// 九宫格抽奖图@Entry // 入口注解，标识这是一个可启动的组件@Component // 组件注解，标识这是一个组件struct LotteryPage { // 定义抽奖页面结构  @State selectedIndex: number = 0 // 当前选中的索引，初始为0  private isAnimating: boolean = false // 是否正在进行动画，初始为false  private selectionOrder: number[] = [0, 1, 2, 5, 8, 7, 6, 3] // 抽奖顺序数组  private cellWidth: number = 200 // 单元格宽度  private baseMargin: number = 10 // 单元格边距  private prizeArray: Prize[] = [ // 奖品数组    new Prize("红包", "#ff9675", "10元"), // 创建奖品对象    new Prize("话费", "#ff9f2e", "5元"),    new Prize("红包", "#8e7fff", "50元"),    new Prize("红包", "#48d1ea", "30元"),    new Prize("开始\n抽奖", "#fffdfd"), // 抽奖按钮    new Prize("谢谢参与", "#5f5f5f"), // 参与提示    new Prize("谢谢参与", "#5f5f5f"),    new Prize("超市红包", "#5f5f5f", "100元"),    new Prize("鲜花", "#75b0fe"), // 奖品对象  ]  private intervalID: number = 0 // 定时器ID，用于控制抽奖速度
  startLottery(speed: number = 500) { // 开始抽奖，默认速度为500毫秒    setTimeout(() => { // 设置延时执行      if (speed > 50) { // 如果速度大于50        speed -= 50 // 减少速度        this.startLottery(speed) // 递归调用，继续加速      } else {        this.runAtConstantSpeed() // 速度达到阈值，进入匀速阶段        return      }      this.selectedIndex++ // 更新选中的索引    }, speed) // 延迟时间为当前速度  }
  runAtConstantSpeed() { // 以恒定速度运行抽奖    let speed = 40 + Math.floor(Math.random() * this.selectionOrder.length) // 随机生成速度    clearInterval(this.intervalID) // 清除之前的定时器    this.intervalID = setInterval(() => { // 设置新的定时器      if (this.selectedIndex >= speed) { // 如果选中索引达到速度        clearInterval(this.intervalID) // 清除定时器        this.slowDown() // 进入减速阶段        return      }      this.selectedIndex++ // 更新选中的索引    }, 50) // 每50毫秒更新一次  }
  slowDown(speed = 50) { // 减速，默认速度为50毫秒    setTimeout(() => { // 设置延时执行      if (speed < 500) { // 如果速度小于500        speed += 50 // 增加速度        this.slowDown(speed) // 递归调用，继续减速      } else {        this.selectedIndex = this.selectedIndex % this.selectionOrder.length // 确保索引在范围内        let index = this.selectionOrder[this.selectedIndex] // 获取当前选中的奖品索引        this.isAnimating = false // 动画结束，设置为false        this.getUIContext().showAlertDialog({ // 显示结果对话框          title: '结果', // 对话框标题          message: `${this.prizeArray[index].title}${this.prizeArray[index].description}`, // 显示奖品信息          confirm: { // 确认按钮配置            defaultFocus: true, // 默认聚焦            value: '我知道了', // 按钮文本            action: () => { // 按钮点击事件            }          },          alignment: DialogAlignment.Center, // 对话框居中显示        });        return      }      this.selectedIndex++ // 更新选中的索引    }, speed) // 延迟时间为当前速度  }
  build() { // 构建UI    Column() { // 使用列布局      Flex({ wrap: FlexWrap.Wrap }) { // 使用弹性布局，允许换行        ForEach(this.prizeArray, (item: Prize, index: number) => { // 遍历奖品数组          Column() { // 每个奖品使用列布局            Text(`${item.title}`) // 显示奖品标题              .fontColor(this.selectionOrder[this.selectedIndex % this.selectionOrder.length] == index ? Color.White : // 根据选中状态设置字体颜色              item.color)              .fontSize(16) // 设置字体大小            Text(`${item.description}`) // 显示奖品描述              .fontColor(this.selectionOrder[this.selectedIndex % this.selectionOrder.length] == index ? Color.White : // 根据选中状态设置字体颜色              item.color)              .fontSize(20) // 设置字体大小          }          .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 }) // 点击效果          .onClick(() => { // 点击事件处理            if (index == 4) { // 如果点击的是抽奖按钮              if (this.isAnimating) { // 如果正在动画中，返回                return              }              this.isAnimating = true // 设置为正在动画              this.startLottery() // 开始抽奖            }          })          .alignItems(HorizontalAlign.Center) // 水平居中对齐          .justifyContent(FlexAlign.Center) // 垂直居中对齐          .width(`${this.cellWidth}lpx`) // 设置单元格宽度          .height(`${this.cellWidth}lpx`) // 设置单元格高度          .margin(`${this.baseMargin}lpx`) // 设置单元格边距          .backgroundColor(index == 4 ? "#ff5444" : // 设置背景颜色，抽奖按钮为特殊颜色            (this.selectionOrder[this.selectedIndex % this.selectionOrder.length] == index ? Color.Gray : Color.White)) // 根据选中状态设置背景颜色          .borderRadius(10) // 设置圆角          .shadow({ // 设置阴影效果            radius: 10, // 阴影半径            color: "#f98732", // 阴影颜色            offsetX: 0, // 水平偏移            offsetY: 20 // 垂直偏移          })        })      }.width(`${this.cellWidth * 3 + this.baseMargin * 6}lpx`) // 设置整体宽度      .margin({ top: 30 }) // 设置顶部边距    }    .height('100%') // 设置高度为100%    .width('100%') // 设置宽度为100%    .backgroundColor("#ffb350") // 设置背景颜色  }}