鸿蒙 ArkTS 实战：Unfinished 从未完成任务清单到个人效率工具完整解析

G_dou_

4人浏览 · 2026-07-19 23:58:50

G_dou_ · 2026-07-19 23:58:50 发布

鸿蒙 ArkTS 实战：Unfinished 从未完成任务清单到个人效率工具完整解析

前言

Unfinished 是一个基于鸿蒙 ArkTS 的个人效率类单页应用，主题围绕 未来任务、优先级、复盘周期、归档数量和任务状态 展开。它把看不见的状态、计划、注意力或成长记录，转成可输入、可点击、可反馈的界面。

本文直接基于项目 Index.ets 源码写作，分析它的状态字段、页面结构、核心函数、反馈文案和扩展方向。文章按可发布技术博客组织，不包含作者提示内容。

个人效率工具的关键不是把页面做复杂，而是把一次行动做具体。用户点击后能看到变化，就会更愿意继续使用。

在这里插入图片描述

配图可作为文章首屏示意。真实发布时可以替换为运行截图，展示指标区、输入区和反馈区。

一、项目定位与场景价值

1.1 应用定位

用户记录未来任务和优先级，按复盘周期管理，并在完成后归档任务。

该项目适合用于个人成长、复盘、记录、专注、素材管理等轻量场景。源码集中在一个页面内，便于学习 ArkTS 状态驱动 UI。

1.2 价值拆解

价值	说明	页面体现
快速输入	用户能直接编辑核心内容	`TextInput`
即时反馈	按钮点击后状态变化	`Button`
指标可见	数字、百分比或文本展示进展	`Archived count`
后续复盘	文案保留上下文	状态提示

二、源码入口与页面骨架

2.1 入口组件

页面采用 ArkTS 标准组件结构。

@Entry
@Component
struct Index {
  build() {
    // page content
  }
}

2.2 结构特点

项目根据业务使用了 Scroll、Column、Row、Stack 或 Grid。这些容器把指标展示、输入表单和操作按钮组织成清晰的单页工具。

Scroll() {
  Column({ space: 16 }) {
    Text('Unfinished')
    // inputs
    // metric
    // actions
    // feedback
  }
}

三、状态模型抽象

3.1 模型定义

从源码可以抽象出 UnfinishedTaskState。

type UnfinishedTaskState = {
  title: string;
  value: string | number;
  note: string;
  updated: boolean;
};

3.2 实际状态代码

项目真实状态如下。

@State task: string = 'Organize tax files';
@State priority: string = 'P1';
@State review: string = 'Every Friday';
@State archived: number = 12;

3.3 状态职责

状态	类型	职责
`task`	状态字段	支撑未完成任务清单的输入、指标或反馈
`priority`	状态字段	支撑未完成任务清单的输入、指标或反馈
`review`	状态字段	支撑未完成任务清单的输入、指标或反馈
`archived`	状态字段	支撑未完成任务清单的输入、指标或反馈
`status`	状态字段	支撑未完成任务清单的输入、指标或反馈

状态字段都能直接映射到页面上的输入、指标或结果文案，这是单页工具保持可维护性的基础。

四、默认数据与首屏体验

4.1 默认内容

默认项	字段	含义
Organize tax files	task	默认未来任务
P1	priority	默认优先级

4.2 默认值作用

默认值让用户进入页面后马上理解使用方式。它既是演示数据，也是开发阶段验证页面行为的样例。

默认输入说明字段格式。
默认指标让页面有进度感。
默认文案解释下一步动作。

五、核心业务函数

5.1 主逻辑代码

项目核心函数如下。

archive(): void {
  this.archived++;
  this.status = this.task + ' archived as complete.';
}

5.2 操作流程

填写未来任务
设置优先级和复盘周期
移动到归档
更新归档数量和状态

这条流程让页面形成闭环：用户输入内容，按钮触发逻辑，状态发生变化，界面立即反馈。

六、辅助逻辑与展示

6.1 辅助代码

项目中还包含补充动作或布局展示。

Row({ space: 10 }) {
  Text('Now')
  Text('Later')
  Text('Archive')
}

6.2 辅助能力

类型	作用	价值
上限控制	避免数值越界	数据稳定
卡片展示	提升信息密度	易扫读
复盘文案	保留上下文	可回顾
计数累计	形成进展感	强化坚持

七、输入组件设计

7.1 TextInput 状态绑定

输入框直接更新状态。

TextInput({ text: this.task, placeholder: 'Input value' })
  .onChange((value: string) => this.task = value)

7.2 输入类型

这类工具输入通常分为文本、数字和备注。文本用于目标和说明，数字用于能量、分钟、次数、等级、时长等指标。

TextInput({ text: this.task, placeholder: 'Content' })
  .onChange((value: string) => this.task = value)

八、指标展示策略

8.1 核心指标

当前项目的核心指标是 Archived count。

Text('Archived count ' + value)
  .fontSize(24)
  .fontWeight(FontWeight.Bold)

8.2 指标类型

类型	示例	作用
百分比	energy、progress	展示状态强弱
次数	count、done、sessions	展示积累
等级	badge、level、rank	形成激励
文案	note、summary、poster	输出结果

九、反馈文案设计

9.1 文案更新

反馈文案通过状态字段改变。

this.note = 'Action recorded.';
this.status = 'Result updated.';

9.2 好反馈的标准

标准	说明
具体	包含当前活动、目标或任务
简短	移动端容易阅读
可复盘	之后看仍能理解
可行动	指向下一步安排

十、布局与视觉层次

10.1 单页结构

页面围绕一个主任务展开，避免用户在多个页面间跳转。

Column() {
  Text('Unfinished')
  // metric area
  // form area
  // action area
}

10.2 视觉重点

区域	内容	目的
顶部	指标或标题	立即建立语境
中部	输入项	修改状态
底部	按钮和文案	完成操作闭环

十一、运行验证流程

11.1 手工验证

可以按以下流程验证：

打开页面，确认标题或主指标存在。
检查默认输入值是否与源码一致。
修改第一个输入框。
点击主按钮。
观察指标或反馈文案是否变化。

// 验证路径示例
const before = 'default state';
const action = 'tap primary button';
const after = 'metric and message updated';
console.info(before + ' -> ' + action + ' -> ' + after);

11.2 验证重点

验证点	预期
输入同步	状态跟随输入
按钮触发	函数执行
指标变化	数字或状态更新
文案反馈	结果明确
连续操作	数据边界稳定

十二、边界处理

12.1 数值边界

源码中常用 Math.max 和 Math.min 控制边界。

const safeValue = Math.max(0, Math.min(100, value));

12.2 业务边界

场景	风险	处理方式
能量低于 0	状态失真	使用下限保护
分数超过上限	激励失衡	使用上限保护
分钟过低	专注块无效	设置最小分钟
字数为 0	语速异常	分母保护
归档重复点击	数据膨胀	后续增加历史记录

十三、扩展为完整应用

13.1 业务扩展

后续可以加入任务看板、拖拽分组、周期提醒、完成记录和周复盘联动。

13.2 工程抽象

可以抽象统一效率记录对象。

interface ProductivityRecord {
  title: string;
  metric: number;
  note: string;
  createdAt: number;
}

function createProductivityRecord(title: string, metric: number, note: string): ProductivityRecord {
  return {
    title,
    metric,
    note,
    createdAt: Date.now()
  };
}

十四、维护与优化

14.1 状态集中

当前体量适合把状态保留在页面组件中，后续加入历史记录后再拆分数据层。

14.2 文案管理

反馈文案可以逐步集中管理，便于导出、分享和多语言处理。

function buildFeedback(action: string, target: string): string {
  return action + ': ' + target;
}

14.3 持久化方向

效率工具依赖长期记录。优先保存标题、指标、备注和时间戳，就能支撑历史列表和趋势图。

十五、工程复盘

15.1 当前实现亮点

状态字段贴合具体场景。
页面动作短，反馈明确。
指标展示有激励作用。
布局结构适合移动端。
代码便于继续扩展。

15.2 可复用经验

Unfinished 的实现方式可以迁移到社交能量、阅读摘录、演讲练习、时间账户、微习惯和日常输出等多个方向。核心都是把一个抽象状态转成明确的状态更新。

总结

Unfinished 用鸿蒙 ArkTS 构建了一个围绕 未完成任务清单 的个人效率工具。它通过 @State 保存核心数据，通过输入框收集用户内容，通过按钮触发业务函数，再用指标和文案完成即时反馈。

从工程角度看，这个项目已经具备单页工具的完整闭环。后续继续接入历史记录、图表、提醒、音频、图片或本地持久化，都可以在当前结构上平滑扩展。

补充说明：当前页面把个人效率场景拆成输入、指标和反馈三个稳定部分。
补充说明：指标展示能让用户快速看到一次行动带来的变化。
补充说明：反馈文案负责保存上下文，后续可以沉淀为历史记录。
补充说明：如果接入本地存储，建议优先保存标题、指标、备注和时间戳。

相关资源：

人工智能6S服务平台

作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。

更多推荐

鸿蒙 ArkTS 实战：Product Cost Card 从商品成本卡到店铺经营工具完整解析

人工智能6S服务平台

鸿蒙版豆包多场景体验大升级：追剧有陪聊、刷题有助攻、会议有速记

新增视频通话、屏幕共享、拍照答疑、商品卡等核心功能，覆盖日常穿搭、宅家娱乐、学习辅导、购物决策等多个日常使用场景，跳出“聊天框”局限，解锁更多实用功能。开会时，只需点击输入框上方的“录音纪要”，即可在会议结束后快速总结会议纪要，并且给出待办事项、智能章节、完整文字记录和录音，精准总结、随时回顾会议重点，解决会议内容记录零散、重点遗漏等问题。除了可以和豆包边视频边唠嗑，还可以一键开启屏幕共享，将你的

人工智能6S服务平台

打字不将就！鸿蒙版微信输入法新版已支持虚拟蓝牙键盘、悬浮键盘

但鸿蒙版微信输入法偏偏“不走寻常路”，在确保隐私安全的基础上，融入多端联动与AI能力，给鸿蒙用户打造了一套高效输入解决方案，让文字输入不仅安心，也更智能、省心。别担心，鸿蒙版微信输入法不存储用户输入的内容，你打的字只留在本地，不上传、不扫描、不分析，使用过程中积累的个人词典也可随时清空。如果有什么建议，桌面右滑进负一屏，点“鸿蒙产品咨询与建议”，直接问问小艺吧！同时，秉持轻量化、低耗电的设计理念，

人工智能6S服务平台

所有评论(0)

查看更多评论

G_dou_

@gao_dou

已为社区贡献142条内容

鸿蒙 ArkTS 实战：Unfinished 从未完成任务清单到个人效率工具完整解析

G_dou_

鸿蒙 ArkTS 实战：Unfinished 从未完成任务清单到个人效率工具完整解析

前言

一、项目定位与场景价值

1.1 应用定位

1.2 价值拆解

二、源码入口与页面骨架

2.1 入口组件

2.2 结构特点

三、状态模型抽象

3.1 模型定义

3.2 实际状态代码

3.3 状态职责

四、默认数据与首屏体验

4.1 默认内容

4.2 默认值作用

五、核心业务函数

5.1 主逻辑代码

5.2 操作流程

六、辅助逻辑与展示

6.1 辅助代码

6.2 辅助能力

七、输入组件设计

7.1 TextInput 状态绑定

7.2 输入类型

八、指标展示策略

8.1 核心指标

8.2 指标类型

九、反馈文案设计

9.1 文案更新

9.2 好反馈的标准

十、布局与视觉层次

10.1 单页结构

10.2 视觉重点

十一、运行验证流程

11.1 手工验证

11.2 验证重点

十二、边界处理

12.1 数值边界

12.2 业务边界

十三、扩展为完整应用

13.1 业务扩展

13.2 工程抽象

十四、维护与优化

14.1 状态集中

14.2 文案管理

14.3 持久化方向

十五、工程复盘

15.1 当前实现亮点

15.2 可复用经验

总结

所有评论(0)

温馨提示：您尚未绑定手机号

G_dou_