鸿蒙 ArkTS 实战：Math 24 Points 从24 点数学挑战到交互闭环完整解析

前言

Math 24 Points 是一个基于鸿蒙 ArkTS 编写的单页互动应用，核心围绕 四张数字卡、表达式输入、提示和发牌 展开。项目没有依赖复杂服务端，也没有把逻辑拆散到多个页面，而是把状态、交互和结果反馈集中在 Index.ets 中完成。

本文直接根据项目源码写作，重点拆解它如何设计状态、如何触发用户操作、如何刷新 UI，以及如何继续扩展成更完整的小游戏或学习工具。文章可直接作为技术博客发布。

这类项目适合用来练习 ArkTS 声明式 UI：每一次点击都改变状态，每一次状态变化都反映到界面上。

在这里插入图片描述

上图可作为技术文章配图。实际发布时，也可以替换成项目运行截图，重点展示标题区、交互区、状态反馈区和结果区。

一、项目定位与用户场景

1.1 应用定位

应用用 cards 数组保存四张数字牌，用 expression 输入表达式，并通过 solved 与 attempts 记录答题结果。

这个项目的目标很明确：先建立一个能跑通交互流程的页面，再把具体玩法逐步接入。这样的路线适合小型鸿蒙应用快速成型。

1.2 目标用户

用户使用目的关注点
鸿蒙初学者学习 ArkTS 状态与组件状态流转清晰
小游戏开发者快速验证玩法原型点击反馈明确
教育工具作者搭建训练和记录页面结果可视化
产品原型设计者验证低成本交互页面结构简单

二、源码入口与页面骨架

2.1 入口组件

项目主页面使用 @Entry 和 @Component 声明入口组件。

@Entry
@Component
struct Index {
  build() {
    Scroll() {
      Column({ space: 16 }) {
        Text('Math 24 Points')
      }
    }
  }
}

2.2 页面分层

页面通常可以拆成四层：

  • 标题层：展示 Math 24 Points。
  • 状态层：展示分数、进度、结果或提示。
  • 交互层：承接按钮、输入框、网格或列表。
  • 反馈层：告诉用户操作是否成功。

这种结构可读性强，后续扩展时也容易定位代码。

三、核心数据模型

3.1 模型定义

本项目的核心模型可以抽象为 NumberCards。

type NumberCards = number[];

3.2 模型作用

模型作用适用区域
NumberCards保存核心交互对象页面逻辑
状态字段保存当前 UI 状态@State
派生结果计算分数、进度或提示反馈区

模型先行 能降低 UI 复杂度。只要模型字段稳定，按钮、列表、网格和提示文案都可以围绕它组织。

四、状态字段设计

4.1 状态代码

项目用 @State 保存页面动态数据。

@State cards: number[] = [3, 3, 8, 8];
@State expression: string = '(8/(3-8/3))';
@State result: string = 'Enter an expression using all four cards.';

4.2 状态表

状态类型职责
cards页面状态参与 24 点数学挑战 的交互闭环
expression页面状态参与 24 点数学挑战 的交互闭环
result页面状态参与 24 点数学挑战 的交互闭环
solved页面状态参与 24 点数学挑战 的交互闭环
attempts页面状态参与 24 点数学挑战 的交互闭环
hint页面状态参与 24 点数学挑战 的交互闭环

这些状态字段覆盖了 24 点数学挑战 的主要交互路径。用户点击或输入后，状态变化会推动界面刷新。

五、默认数据与初始体验

5.1 默认内容

项目启动时不是空白页面，而是带有可理解的默认内容。

默认项数值或编号说明
cards43, 3, 8, 8
expression24target expression

5.2 为什么需要默认内容

默认内容能降低用户理解成本：

  1. 进入页面后立刻知道功能是什么。
  2. 可以直接测试按钮和状态变化。
  3. 方便开发者验证 UI 布局。

对于 24 点数学挑战 来说，默认数据也是一组最小演示用例。

六、核心逻辑拆解

6.1 主要交互函数

核心交互集中在下面这段逻辑中。

check(): void {
  this.attempts++;
  if (this.expression.indexOf('24') >= 0 || this.expression === '(8/(3-8/3))') {
    this.solved++;
    this.result = 'Accepted. Score recorded.';
  } else {
    this.result = 'Submitted. Compare with hint and adjust.';
  }
}

6.2 逻辑路径

  1. 展示四张数字卡
  2. 输入 24 点表达式
  3. 提交检查
  4. 提示或重新发牌

这条路径覆盖了从用户操作到状态更新的完整过程。它不是静态展示页，而是一个能持续响应用户输入的交互页面。

七、辅助逻辑与状态刷新

7.1 辅助代码

项目中还包含辅助函数或状态刷新逻辑。

deal(): void {
  let seed = this.attempts + this.solved + 4;
  this.cards = [seed % 9 + 1, (seed * 2) % 9 + 1, (seed * 3) % 9 + 1, (seed * 5) % 9 + 1];
  this.expression = '';
  this.result = 'New cards dealt.';
}

7.2 刷新策略

策略代码表现作用
修改状态更新 @State 字段触发 UI 刷新
重建数组map 或新数组赋值保证列表感知变化
文案反馈更新提示字符串告诉用户结果
分数记录更新数值状态形成可视化结果

在 ArkTS 页面里，状态刷新要比命令式操作更重要。代码写得越接近数据流，后续维护越容易。

八、交互组件设计

8.1 常见组件

项目根据玩法使用了按钮、输入框、网格、列表或开关。

Column({ space: 16 }) {
  Text('Math 24 Points')
  Text('Status area')
  Button('Primary Action')
  Text('Feedback text')
}

8.2 组件职责

组件作用在本项目中的价值
Text展示标题、结果和反馈信息呈现
Button触发主要动作用户操作入口
TextInput接收用户输入表单型交互
ForEach渲染数组数据列表或网格
Grid/Row/Column组织布局控制视觉层级

组件选择应当服务业务，而不是堆砌控件。Math 24 Points 的组件组合刚好覆盖当前玩法需要。

九、功能标签与业务能力

9.1 能力标签

序号标签说明
1Number cards入口能力
2Expression核心交互
3Hint反馈机制
4Deal扩展沉淀

9.2 业务含义

这些标签对应源码中的真实交互，不是装饰文案。比如 Number cards 表示入口能力，Expression 表示核心操作，Hint 和 Deal 则对应反馈与沉淀。

十、结果反馈设计

10.1 反馈文案

项目通过状态文本告诉用户当前结果。

@State feedbackText: string = 'Ready';

function updateFeedback(success: boolean): string {
  return success ? 'Action accepted.' : 'Try another choice.';
}

10.2 反馈原则

结果反馈需要做到三点：

  • 操作后立即变化。
  • 成功和失败文案区分明确。
  • 状态文本能指导下一步。

这对 24 点数学挑战 很重要，因为用户需要根据反馈继续选择、输入或重新尝试。

十一、布局与视觉层次

11.1 页面容器

外层使用 Scroll 可以兼容内容增长。

Scroll() {
  Column({ space: 16 }) {
    Text('Math 24 Points')
    // interactive content
  }
  .padding(20)
  .width('100%')
}
.height('100%')

11.2 视觉层次

层级内容设计目的
第一层标题和主要指标快速识别页面
第二层输入或点击区域承接核心交互
第三层结果反馈提醒下一步
第四层重置、下一关或扩展按钮完成闭环

十二、手工验证流程

12.1 验证步骤

可以按下面流程验证当前项目：

  1. 打开页面，确认标题为 Math 24 Points。
  2. 观察默认状态是否与源码一致。
  3. 执行一次主要交互。
  4. 查看状态文案、数值或选中态是否变化。
  5. 执行重置、下一关或辅助动作，确认页面能继续使用。
// 手工验证伪代码
const before = 'initial state';
const action = 'tap primary control';
const after = 'state changed';
console.info(before + ' -> ' + action + ' -> ' + after);

12.2 验证重点

验证项预期
初始状态能直接理解页面用途
主操作有明确反馈
错误路径不会破坏状态
重复操作页面仍可继续
数据展示与状态字段一致

十三、扩展为完整产品

13.1 业务扩展

后续可以加入表达式解析器、括号合法性校验、答案枚举、倒计时和错题记录。

13.2 工程扩展

可以把玩法结果抽象为统一结果对象，再由页面负责展示。

interface PlayResult {
  title: string;
  value: number;
  message: string;
  success: boolean;
}

function buildResult(title: string, value: number, message: string): PlayResult {
  return {
    title,
    value,
    message,
    success: value >= 0
  };
}

这种方式可以避免玩法逻辑和 UI 逻辑互相缠绕。

十四、性能与维护要点

14.1 状态数量控制

小型页面不需要引入复杂状态库，但要保证每个状态都有明确职责。无用状态越少，问题定位越快。

14.2 列表更新方式

涉及数组时，推荐使用 map 或新数组赋值。

const nextItems = oldItems.map((item) => {
  return item;
});

这能让页面更稳定地感知数据变化。

14.3 文案维护

反馈文案最好集中管理。后续如果要做多语言或无障碍读屏，集中管理会更容易。

十五、工程复盘

15.1 当前实现亮点

  • 使用 @State 驱动页面。
  • 主交互路径短，用户反馈明确。
  • 数据模型与 UI 展示关系清楚。
  • 页面结构适合继续扩展。
  • 代码适合初学者阅读和二次开发。

15.2 可复用经验

Math 24 Points 的实现方式可以迁移到很多轻量互动项目：答题、训练、配对、点击反应、计分工具、儿童学习和家庭游戏。关键不是一次写完所有功能，而是先让状态流、交互流和反馈流闭合。

总结

Math 24 Points 用鸿蒙 ArkTS 实现了一个围绕 24 点数学挑战 的完整交互原型。它通过 NumberCards 或对应状态保存核心数据，用按钮、输入框、列表或网格承接操作，再用提示文本、分数和进度把结果展示出来。

从工程角度看，这个项目的价值在于清晰：状态字段明确，函数职责集中，UI 层级直接。后续继续接入真实素材、动画、持久化或排行榜，都可以沿着当前结构自然扩展。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。
补充说明：如果增加持久化，建议先保存核心状态，再考虑保存视觉层配置。

补充说明：当前实现保持了单页结构，便于快速定位每一次状态变化。
补充说明：主要交互函数直接服务页面动作，适合继续拆分成独立业务模块。
补充说明：反馈文本是用户理解页面状态的关键，后续可以继续细化成功、失败和等待状态。

相关资源：

# harmonyos # 华为
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

记得画面，忘了文件名：HarmonyOS 7 文搜图怎样帮人找照片

一篇游记写到夜晚的街道，需要配一张有公交车的照片。画面还记得：路灯亮着，车就在道路中间。可打开图库，面对的是一排排缩略图，文件名和拍摄日期都没能提供多少线索。这类找图任务有一点特别：人记住的往往是照片里的事物、气氛和位置关系，图库保存的却是文件、日期和目录。两边都有信息，表达方式却不一样。图片越多，这个距离就越明显。HarmonyOS 7 的文搜图，值得关注的正是这一步：让用户用画面描述发起检索。

avatar HarmonyOS开发者社区
cover

ToDesk鸿蒙PC端又焕新！远控更稳、操作更准，跨端办公如本地

avatar HarmonyOS开发者社区

从配对到传输：鸿蒙软总线通信全链路实录

手机想投屏，先靠软总线“发现”智慧屏——通过BLE、Wi-Fi等多通道广播与扫描，找到对方的网络地址。接着“组网”，用JoinLNN建立安全连接，完成认证、密钥协商，生成唯一networkId，如同正式建交。最后“传输”，手机作为客户端绑定服务端的Socket，软总线自动选最优通道（如TCP/UDP），按需发送照片数据。整个过程从发现到落地，层层递进，安全高效，像一场精密的数字握手。

avatar HarmonyOS开发者社区