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

【引言】

在鸿蒙NEXT开发中，九宫格抽奖是一个常见且有趣的应用场景。通过九宫格抽奖，用户可以随机获得不同奖品，增加互动性和趣味性。本文将介绍如何使用鸿蒙开发框架实现九宫格抽奖功能，并通过代码解析展示实现细节。

【环境准备】

• 操作系统：Windows 10

• 开发工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806

• 目标设备：华为Mate60 Pro

• 开发语言：ArkTS

• 框架：ArkUI

• API版本：API 12

【思路】

本案例中的“九宫格随机”应用旨在模拟一个简单的抽奖场景，用户点击抽奖按钮后，程序会从预先定义好的九个奖品中随机选择一个作为最终奖品。整个应用采用了响应式编程模式，结合鸿蒙NEXT提供的组件化开发方式，实现了交互流畅、视觉效果良好的用户体验。

1. Prize类设计应用首先定义了一个Prize类，用于表示奖品信息。该类使用了@ObservedV2装饰器，使得奖品属性（如标题、颜色、描述）的变化可以被自动追踪，从而实现UI的实时更新。构造函数允许创建具有特定属性值的奖品实例，便于后续管理。

2. MyPrizeUpdate结构组件为了提供奖品信息的编辑功能，我们创建了MyPrizeUpdate结构组件。它通过接收外部传入的数据（当前选中的奖品索引、抽奖顺序数组及所有奖品的数组），构建了一个包含文本输入框的界面，用户可以在其中修改奖品的标题、描述和颜色。任何对这些属性的更改都会即时反映到对应的奖品对象上，并触发UI的相应更新。

3. LotteryPage入口组件LotteryPage是整个抽奖应用的核心组件，负责组织页面布局和处理用户交互逻辑。它初始化了一系列必要的状态变量，比如保存所有奖品的数组prizeArray、定义抽奖顺序的selectionOrder以及控制动画状态的isAnimating等。此外，该组件实现了抽奖过程的关键方法——startLottery（开始抽奖）、runAtConstantSpeed（匀速运行）和slowDown（减速），它们共同协作以模拟真实的抽奖体验。当用户点击抽奖按钮时，这些方法按照预定的速度模式依次调用，直到最终确定一个奖品为止。最后，通过弹出对话框的方式向用户展示抽奖结果。

4. UI布局与样式在构建UI方面，应用充分利用了鸿蒙NEXT提供的布局容器（如Column、Row、Flex）和样式属性（如宽度、高度、边距、背景色、圆角、阴影），精心设计了每个奖品项的外观。特别地，对于抽奖按钮，不仅设置了独特的背景颜色，还在点击事件中添加了动画效果，增强了用户的参与感。同时，考虑到不同设备屏幕尺寸的差异，所有布局元素均采用相对单位进行设置，确保了应用在各种终端上的良好适配性。

5. 动画与交互优化为了让抽奖过程看起来更加生动有趣，应用引入了加速、匀速、减速三个阶段的动画效果，使选中的奖品项能够以逐渐加快然后缓慢停止的方式出现在用户面前。这种变化不仅增加了悬念感，也提升了整体的娱乐性。此外，通过对点击事件的监听和处理，确保了即使是在动画过程中，用户的交互也不会受到影响，保证了良好的用户体验。

【完整代码】

// 定义一个可观察的Prize类，用于表示奖品信息。
@ObservedV2
class Prize {
  @Trace title: string // 奖品标题属性，使用@Trace进行追踪以便响应式更新UI
  @Trace color: string // 奖品颜色属性
  @Trace description: string // 奖品描述属性

  // 构造函数，用来初始化新的奖品实例
  constructor(title: string, color: string, description: string = "") {
    this.title = title // 设置奖品标题
    this.color = color // 设置奖品颜色
    this.description = description // 设置奖品描述，默认为空字符串
  }
}

// 定义MyPrizeUpdate结构组件，用于显示和编辑选中的奖品信息
@Component
struct MyPrizeUpdate {
  @Consume selectedIndex: number // 当前选中的奖品索引
  @Consume private selectionOrder: number[] // 保存抽奖顺序的数组
  @Consume private prizeArray: Prize[] // 保存所有奖品的数组

  build() {
    Column({ space: 20 }) { // 创建列布局容器，设置子元素之间的间距为20px
      Row() { // 创建行布局容器
        Text('标题：') // 显示“标题”文本
        TextInput({ text: this.prizeArray[this.selectionOrder[this.selectedIndex%this.selectionOrder.length]].title })
          .width('300lpx') // 设置输入框宽度
          .onChange((value) => { // 监听输入框内容变化
            this.prizeArray[this.selectionOrder[this.selectedIndex%this.selectionOrder.length]].title = value // 更新奖品标题
          })
      }
      Row() {
        Text('描述：')
        TextInput({
          text: `${this.prizeArray[this.selectionOrder[this.selectedIndex%this.selectionOrder.length]].description}`
        }).width('300lpx').onChange((value) => { // 同上，但针对奖品描述
          this.prizeArray[this.selectionOrder[this.selectedIndex%this.selectionOrder.length]].description = value
        })
      }
      Row() {
        Text('颜色：')
        TextInput({
          text: `${this.prizeArray[this.selectionOrder[this.selectedIndex%this.selectionOrder.length]].color}`
        }).width('300lpx').onChange((value) => { // 同上，但针对奖品颜色
          this.prizeArray[this.selectionOrder[this.selectedIndex%this.selectionOrder.length]].color = value
        })
      }
    }
    .justifyContent(FlexAlign.Start) // 设置内容左对齐
    .padding(40) // 设置内边距
    .width('100%') // 设置宽度为100%
    .backgroundColor(Color.White) // 设置背景颜色为白色
  }
}

// 定义抽奖页面入口组件
@Entry
@Component
struct LotteryPage {
  @Provide private selectedIndex: number = 0 // 提供当前选中的索引，初始值为0
  private isAnimating: boolean = false // 标记是否正在进行动画，初始值为false
  @Provide private selectionOrder: number[] = [0, 1, 2, 5, 8, 7, 6, 3] // 定义抽奖顺序
  private cellWidth: number = 200 // 单元格宽度
  private baseMargin: number = 10 // 单元格边距
  @Provide private prizeArray: Prize[] = [
    new Prize("红包", "#ff9675", "10元"), // 初始化奖品数组，创建各种奖品对象
    new Prize("话费", "#ff9f2e", "5元"),
    new Prize("红包", "#8e7fff", "50元"),
    new Prize("红包", "#48d1ea", "30元"),
    new Prize("开始抽奖", "#fffdfd"), // 抽奖按钮，没有具体奖品描述
    new Prize("谢谢参与", "#5f5f5f"),
    new Prize("谢谢参与", "#5f5f5f"),
    new Prize("超市红包", "#5f5f5f", "100元"),
    new Prize("鲜花", "#75b0fe"),
  ]
  private intervalID: number = 0 // 定时器ID，用于控制抽奖速度
  @State isSheetVisible: boolean = false // 控制底部弹出表单的可见性

  // 开始抽奖逻辑
  startLottery(speed: number = 500) {
    setTimeout(() => { // 设置延时执行
      if (speed > 50) { // 如果速度大于50，则递归调用startLottery以逐渐加速
        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)
  }

  // 减速逻辑
  slowDown(speed = 50) {
    setTimeout(() => { // 设置延时执行
      if (speed < 500) { // 如果速度小于500，则递归调用slowDown以逐渐减速
        speed += 50
        this.slowDown(speed)
      } else {
        this.selectedIndex %= this.selectionOrder.length // 确保索引在有效范围内
        let index = this.selectionOrder[this.selectedIndex] // 获取最终选中的奖品索引
        this.isAnimating = 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)
  }

  // 构建UI方法
  build() {
    Column() { // 使用Column布局容器
      Flex({ wrap: FlexWrap.Wrap }) { // 使用弹性布局，允许换行
        ForEach(this.prizeArray, (item: Prize, index: number) => { // 遍历奖品数组，创建每个奖品的UI
          Column() { // 使用Column布局容器为每个奖品项
            Text(`${item.title}`) // 显示奖品标题
              .fontColor(index == 4 ? Color.White : item.color) // 设置字体颜色，对于抽奖按钮特殊处理
              .fontSize(16)
            Text(`${item.description}`) // 显示奖品描述
              .fontColor(index == 4 ? Color.White : item.color) // 设置字体颜色
              .fontSize(20)
          }
          .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.8 }) // 添加点击效果
          .onClick(() => { // 处理点击事件
            if (this.isAnimating) { // 如果正在动画中，忽略点击
              return
            }
            if (index == 4) { // 如果点击的是抽奖按钮，开始抽奖
              this.isAnimating = true
              this.startLottery()
            } else {
              for (let i = 0; i < this.selectionOrder.length; i++) {
                if (this.selectionOrder[i] == index) {
                  this.selectedIndex = i // 更新选中索引到对应位置
                }
              }
            }
          })
          .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 }) // 设置顶部边距
      MyPrizeUpdate().margin({top:20}) // 插入MyPrizeUpdate组件，并设置其上边距
    }
    .height('100%') // 设置高度为100%
    .width('100%') // 设置宽度为100%
    .backgroundColor("#ffb350") // 设置页面背景颜色
  }
}