项目效果本文实现的是一个基于 HarmonyOS 和 ArkTS 的校园考试倒计时复习计划应用。项目使用 ArkUI 组件完成页面布局通过State管理考试计划数据实现考试科目添加、考试倒计时、复习进度切换、优先级标记、状态筛选、计划删除和数量统计等功能。最终运行效果如下页面主要包含以下内容顶部应用标题考试科目、复习中、紧急项统计添加考试计划表单科目名称、考试日期、复习备注输入轻松、普通、重要、紧急优先级选择全部、未开始、复习中、已完成、紧急筛选考试倒计时展示复习进度切换单条计划删除空状态提示页面整体采用 ArkUI 声明式布局。本文重点是演示如何在 HarmonyOS 项目中使用 ArkTS 和 ArkUI 实现一个校园学习计划类单页面应用。项目代码主要写在entry/src/main/ets/pages/Index.ets文件中适合作为 HarmonyOS ArkTS 入门到进阶之间的练习案例。前言考试周是校园生活中非常典型的场景。很多同学并不是完全没有复习时间而是不清楚每门课距离考试还有多久也不知道哪些科目应该优先处理。如果只是把考试日期写在纸上后续很容易忘记更新复习进度。本文实现的校园考试倒计时复习计划应用就是为了解决这个小问题。用户可以添加考试科目、考试日期和复习备注并为每门课设置优先级。页面会根据考试日期自动显示倒计时同时支持切换复习进度和筛选不同状态的计划。从开发角度来看这个项目不依赖后端接口也不需要数据库但它包含了表单输入、数组新增、数组更新、日期计算、条件筛选、列表渲染和动态统计等内容适合用来练习 ArkTS 单页面应用开发。一、项目目标本次实践主要实现以下目标创建 HarmonyOS ArkTS 页面使用Entry和Component定义页面组件使用State管理页面状态使用TextInput接收考试计划信息使用数组保存考试计划使用日期计算实现考试倒计时使用Button实现优先级选择使用Button实现复习进度切换使用List和ForEach渲染计划列表支持按状态筛选计划支持删除单条计划根据数组动态统计计划数量使用空状态提示优化无数据页面完成一个可以运行的校园考试倒计时页面。二、技术栈类型内容开发方向HarmonyOS 应用开发开发语言ArkTSUI 框架ArkUISDK 版本HarmonyOS API 23 及以上工程模型Stage 模型核心组件Text / TextInput / Button / Column / Row / List / ForEach状态管理State数据处理数组新增 / map / filter / 日期计算项目入口entry/src/main/ets/pages/Index.ets三、功能规则说明本文中的考试计划包含以下字段字段说明id计划唯一编号subject考试科目examDate考试日期priority优先级progress复习进度note复习备注优先级分为四类优先级含义轻松压力较小可以后续处理普通正常复习节奏重要需要重点关注紧急需要优先处理筛选规则如下全部显示所有计划 未开始显示复习进度为未开始的计划 复习中显示复习进度为复习中的计划 已完成显示复习进度为已完成的计划 紧急显示优先级为紧急或距离考试 3 天以内的计划统计规则如下考试科目 plans.length 复习中 progress 为复习中的计划数量 紧急项 priority 为紧急或距离考试 3 天以内的计划数量四、核心实现思路本项目的核心流程如下定义考试计划数据结构使用State保存表单内容、筛选条件和计划数组用户输入考试科目、考试日期和复习备注用户选择计划优先级点击按钮新增计划根据考试日期计算倒计时使用List和ForEach渲染计划列表点击按钮切换复习进度根据筛选条件展示不同计划点击删除按钮移除单条计划顶部统计卡片根据数组自动更新。其中plans是本项目最重要的数据源。页面中的统计卡片、倒计时、筛选列表和空状态都围绕这个数组展开。五、Index.ets 完整代码打开文件entry/src/main/ets/pages/Index.ets将其中内容替换为下面代码。为了方便文章阅读代码集中放在一个页面文件中实际扩展时也可以继续拆分组件。// 此处粘贴 DevEco 工程中的 Index.ets 完整代码本次代码已经写入工程文件entry/src/main/ets/pages/Index.ets六、运行项目代码编写完成后在 DevEco Studio 中打开项目使用 Preview、模拟器或真机运行页面。运行成功后页面顶部会显示“校园考试倒计时”。用户可以添加考试科目、考试日期和复习备注并选择优先级。新增计划后页面会在列表中显示该科目的考试倒计时和当前复习状态。可以按照以下步骤进行测试打开应用检查页面是否正常显示输入考试科目例如“计算机网络”输入考试日期例如“2026-07-20”输入复习备注选择优先级点击“添加计划”检查列表是否新增点击“未开始”“复习中”“完成”按钮检查状态是否变化点击“紧急”筛选检查是否显示紧急计划点击“删除”检查单条计划是否移除筛选结果为空时检查空状态是否显示。测试结果如下测试功能测试结果页面正常显示成功添加考试计划成功考试倒计时显示成功优先级选择成功复习进度切换成功状态筛选成功删除计划成功统计更新成功空状态提示成功七、开发中遇到的问题1. 倒计时需要按日期而不是按当前时刻计算如果直接使用当前时间和考试时间相减可能因为小时和分钟造成显示偏差。因此项目中先把今天和考试日期都转换成当天零点时间再计算天数差。conststartTime:numbernewDate(today.getFullYear(),today.getMonth(),today.getDate()).getTime();consttargetTime:numbernewDate(target.getFullYear(),target.getMonth(),target.getDate()).getTime();这样可以让倒计时结果更符合用户直觉。2. 筛选不能修改原始数组筛选未开始、复习中、已完成和紧急计划时不能直接修改plans数组否则切换回“全部”时数据会丢失。本文使用getFilteredPlans()返回筛选后的结果原始数组始终保留完整数据。3. 更新进度要使用 map 返回新数组ArkUI 页面状态由数据驱动。更新某一条计划时使用map()返回新的数组可以让页面更稳定地刷新。this.plansthis.plans.map((item:ExamPlan){if(item.idid){return{...item,progress:progress}}returnitem})八、总结本文基于 HarmonyOS 和 ArkTS 实现了一个校园考试倒计时复习计划应用。项目通过State管理页面状态使用 ArkUI 组件完成页面布局并实现了考试计划添加、倒计时显示、优先级标记、复习进度切换、状态筛选、计划删除和数量统计等功能。通过本次实践主要练习了以下内容使用Entry和Component创建页面组件使用State保存表单内容和列表数据使用TextInput获取用户输入使用Button完成页面交互使用日期对象计算考试倒计时使用map()更新数组中的指定记录使用filter()筛选不同状态的计划使用List和ForEach渲染动态列表使用条件渲染显示空状态使用统计方法动态计算页面数据。这个项目虽然是单页面练习但业务场景真实功能流程完整非常适合作为 HarmonyOS ArkTS 的练习项目。后续可以继续扩展本地存储、日期选择器、考试提醒通知、复习进度百分比和周计划视图让它更接近真实校园学习工具。
