试了三个方案最后用ArkTS解决了一个很私人的需求：精力电量追踪App开发手记

关注

原创最新推荐文章于 2026-11-07 17:36:02 发布 292 阅读 AI 写同款· GEO 优化 ›

MATLAB实现了UR5机械臂在可变有效载荷条件下的增益调度稳健滑动模式轨迹跟踪控制。.zip 1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。立即下载

背景：一个技术问题引出的个人项目

我之前一直想做一个轻量的精力追踪工具。试过用 Flutter 写跨平台、试过套 WebView 做混合应用，都不太满意——Flutter 在 HarmonyOS 上的适配当时还不成熟，WebView 方案的启动速度和本地存储体验都差点意思。

去年底换了 Mate 60，开始认真看 ArkTS 的文档，发现声明式 UI + 本地 RDB 存储这套组合刚好能满足我的需求：一个纯本地、启动快、交互极简的记录工具。

这个 App 叫「元気手账」，核心思路是把精力当手机电量来管。满电 100，每件事消耗或充电一个 delta 值，一天下来看曲线就知道能量花哪儿了。目前版本 1.2.0，已在华为应用市场上架。

最高频的交互：快捷动作条的状态管理

用户最常做的事就是"记一笔"。下午开完会觉得被掏空了，掏出手机点"-20 开会"就完事。我在首页底部做了快捷动作条，常用记录项平铺，一键完成不进二级页面。

这块的关键不是布局（Flex Wrap 搞定），而是点击之后怎么同步更新当前电量、写入数据库、刷新时间轴三件事。我用 @Provide 和 @Consume 让电量状态在组件树里穿透，避免层层传递：

@Provide('currentBattery') currentBattery: number = 100

// 快捷动作点击后的核心逻辑
async recordDelta(delta: number, tag: string): Promise<void> {
  this.currentBattery = Math.max(0, Math.min(100, this.currentBattery + delta))
    const record: EnergyRecord = {
        timestamp: new Date().getTime(),
            delta: delta,
                tag: tag,
                    batteryAfter: this.currentBattery
                      }
                        // 写入本地 RDB
                          await this.rdbStore.insert('energy_records', record.toValuesBucket())
                          }
                          ```
这里有个取舍：我没用 EventHub 或者全局事件总线，因为数据流向很简单——只有"记录→更新电量→刷新列表"这一条线。搞复杂了反而维护成本高。

## 时间轴折线：Canvas 踩坑记录

当天所有精力变化按时间轴展示，我用 ArkUI 的 Canvas 组件手绘折线图。没引第三方库，因为数据点不多（一天顶多二三十条），自己画反而可控。

踩了一个坑值得说：ArkTS 的 Canvas 坐标系原点在左上角，Y 轴向下为正。我习惯性地把电量高的点画在上面，结果第一版出来曲线完全倒过来。修复方法就是做一次 Y 轴翻转：

```arkts
// canvasHeight 是画布高度，maxBattery 是 Y 轴最大值(100)
private bindbindbindgetY(battery: number): number {
  return this.canvasHeight - (battery / 100) * this.canvasHeight + this.paddingTop
  }

等等，上面那行我写错了，实际代码是这样：

private getY(battery: number): number {
  return this.canvasHeight - (battery / 100.0) * (this.canvasHeight - this.paddingTop * 2) - this.paddingTop
  }

不好意思纠正一下——我只贴关键的绘制部分，完整逻辑还包括时间轴 X 坐标的映射和事件标注点的绘制，篇幅原因不展开了。

说个实际数据：一天 30 个数据点，Canvas 重绘耗时大概在 3-5ms，完全感知不到卡顿。但我没测试过上百个点的场景，不确定数据量大了之后性能表现如何。