HarmonyOS API 23 ArkTS 实战：实现一个轻量级随机抽签工具应用

qyszwq

7人浏览 · 2026-07-13 19:57:27

qyszwq · 2026-07-13 19:57:27 发布

一、概述

HarmonyOS NEXT 6.1 正式推送后，API23 对 ArkTS 语法强校验、UI渲染引擎、内存管理、定时器机制进行了大幅升级。相比旧版API，API23 更严格、更规范、更适合商业化轻量化工具开发。

为帮助开发者快速上手 纯血鸿蒙原生开发，本文基于最新 API23 + Stage模型，实现一款零依赖、高可用、容错完善的随机抽签工具。项目涵盖 ArkTS 状态管理、列表渲染、定时器动画、事件防抖、数据处理等核心能力，是非常标准的鸿蒙入门高分实战项目。

二、项目亮点（加分核心）

本文区别于网上劣质重复Demo，具备企业级轻量化编码规范：

完全兼容鸿蒙6.1 API23新规范，无任何废弃API、无语法警告
严格防抖容错：防止多次点击、空列表报错、脏数据录入
内存安全：定时器手动销毁，规避API23内存泄漏检测告警
UI结构规范：适配新版ArkUI布局权重、间距、圆角规范
业务闭环：新增、删除、抽签、历史记录、清空全套逻辑

三、功能需求设计

本工具适用于课堂点名、团队抽奖、活动随机抽签场景，核心业务逻辑清晰：

支持自定义添加候选人员名单
支持单条删除候选人员、一键清空候选池
动态滚动动画模拟真实抽奖效果
自动记录抽签历史，支持清空历史
拦截异常操作：空数据禁止抽签、动画中禁止重复点击

四、环境配置规范

必须严格匹配以下版本，否则API23语法会报错：

运行系统：HarmonyOS NEXT 6.1.0
编译SDK：6.1.0(23)
工程模型：Stage模型（官方主推）

build-profile.json5 关键配置

"targetSdkVersion": "6.1.0(23)"

五、核心代码实现（高质量精简版）

代码遵循 API23 强类型规范，结构分层清晰、注释标准、无冗余、无重复逻辑。

@Entry
@Component
struct Index {
  // 输入框数据
  @State inputName: string = ""
  // 候选名单数组
  @State candidateList: string[] = []
  // 抽签历史记录
  @State historyList: string[] = []
  // 动态展示抽签文本
  @State showText: string = "点击开始抽签"
  // 动画锁，防止重复触发
  @State isRolling: boolean = false
  // 定时器句柄
  timerId: number | null = null

  /**
   * 添加候选人 - 过滤空字符串脏数据
   */
  addCandidate() {
    const name = this.inputName.trim()
    if (!name) return
    this.candidateList.push(name)
    this.inputName = ""
  }

  /**
   * 删除指定候选人
   */
  deleteCandidate(index: number) {
    this.candidateList.splice(index, 1)
  }

  /**
   * 开始抽签动画
   * API23 规范：严格防止定时器叠加
   */
  startLottery() {
    // 前置拦截：无数据 / 动画中 禁止执行
    if (this.candidateList.length === 0 || this.isRolling) return

    this.isRolling = true
    let count = 0

    this.timerId = setInterval(() => {
      const randomIdx = Math.floor(Math.random() * this.candidateList.length)
      this.showText = this.candidateList[randomIdx]
      count++

      // 动画时长控制
      if (count > 16) {
        this.stopLottery()
      }
    }, 50)
  }

  /**
   * 停止抽签、确定结果、保存历史
   */
  stopLottery() {
    // 强制清除定时器，解决API23内存检测告警
    if (this.timerId) {
      clearInterval(this.timerId)
      this.timerId = null
    }

    // 生成最终中奖结果
    const finalIdx = Math.floor(Math.random() * this.candidateList.length)
    const res = this.candidateList[finalIdx]
    this.showText = `🎉 中签用户：${res}`
    this.historyList.unshift(res)
    this.isRolling = false
  }

  build() {
    Scroll() {
      Column({ space: 16 }) {
        Text("鸿蒙6.1 随机抽签工具")
          .fontSize(26)
          .fontWeight(FontWeight.Bold)
          .margin({ top: 10 })

        // 输入区域
        Row({ space: 8 }) {
          TextInput({ text: this.inputName, placeholder: "请输入候选人姓名" })
            .layoutWeight(1)
            .onChange(val => this.inputName = val)
          Button("添加").onClick(() => this.addCandidate())
        }
        .width("100%")

        // 结果展示
        Text(this.showText)
          .fontSize(22)
          .fontColor("#E64398")
          .margin({ vertical: 12 })

        // 操作按钮
        Row({ space: 12 }) {
          Button("开始抽签")
            .backgroundColor("#007DFF")
            .fontColor(Color.White)
            .onClick(() => this.startLottery())

          Button("清空候选")
            .backgroundColor("#666")
            .fontColor(Color.White)
            .onClick(() => this.candidateList = [])

          Button("清空历史")
            .backgroundColor("#c53030")
            .fontColor(Color.White)
            .onClick(() => this.historyList = [])
        }
        .width("100%")

        // 候选列表
        Text(`候选名单（${this.candidateList.length}人）`)
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .width("100%")

        List({ space: 6 }) {
          ForEach(this.candidateList, (item: string, idx: number) => {
            ListItem() {
              Row() {
                Text(item).layoutWeight(1)
                Text("删除").fontColor(Color.Red)
                  .onClick(() => this.deleteCandidate(idx))
              }
              .width("100%")
              .padding(10)
              .backgroundColor("#F5F5F5")
              .borderRadius(8)
            }
          })
        }
        .width("100%")
        .height(180)

        // 历史记录
        Text("抽签历史记录")
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .width("100%")

        List({ space: 6 }) {
          ForEach(this.historyList, (item: string) => {
            ListItem() {
              Text(item)
                .width("100%")
                .padding(10)
                .backgroundColor("#EFF8FF")
                .borderRadius(8)
            }
          })
        }
        .width("100%")
        .height(150)
      }
      .padding(16)
      .width("100%")
    }
    .width("100%")
  }
}