桌面小部件：从桌面直接记一笔

PFEx 的记账入口一直藏在账户详情页底部的交易按钮里。想记一笔早餐，得先解锁、进 App、找到账户、点交易，才轮到填金额。日常记账本来就是零碎动作，路径一长就懒得记。10 月 11 日我给自己做了一个桌面小部件：把「记一笔」直接摆在桌面上，点它一下就弹出该账户的记账弹窗。

外观用的是 App 里那套设计，不改一套 UI。做法是让 Flutter 先把小部件外观画成一张图，桌面上的小部件只负责把这张图铺在格子里，再接管点击。

我要它做什么

• 点一下就能记账。 点击小部件主体，App 拉起后直接弹出该账户的记账面板，默认是支出，面板里还能改。从桌面到记账只隔一步，不用先找到账户再点交易。
• 按钮切换账户，还有一个开关。 桌面上放多个小部件时，每个部件各自钉一个账户，彼此互不影响；部件上有左右两个按钮，可以在账户之间切换。如果某个部件只想固定看一个账户，可以在设置里把切换按钮关掉，桌面上的左右热区会一起消失，不会误触。
• 和账户的预算联动。 账户绑定了本月预算的话，小部件会把剩余额度画成一道水位：还剩多少额度，卡面底色就从底部铺多高，水面做成波浪。额度用完，卡面就不再铺底色。这个效果也能在设置里单独关掉。

点击得真的能弹出弹窗

这是整个功能里最容易失手的地方，我踩了两下。

一是热区被吃掉。最初把点击挂在整张卡的根容器上，在有些机型上，里面的子视图会先把这块区域接走，点小部件没有任何反应。后来把点击挪到一个铺满整格的容器上，点主体和点切换按钮才都稳定。

二是点击链路比我以为的长。一次点击要穿过原生热区、深链、App 的校验、中转页，最后才到记账弹窗。这条链上任何一环没对上，用户看到的结果都一样：点了没反应。所以我没有别的手法，只能一层一层对着走一遍，确认点下去真的能弹出弹窗，冷启动和热启动各测一次。

图要对上格子

小部件的图是 Flutter 提前画好的，桌面上那个格子只负责把它铺满。麻烦在于，格子从来不是设计稿上画的那个尺寸。 手机上看着正常，换到平板和折叠屏，格子被拉大，图跟着拉伸，文字就发虚。

解法是让 Flutter 按格子的真实尺寸出图。尺寸不是我自己定的，是系统给的，而且横竖屏各有一组，拿错一组，屏幕一转就会崩出很奇怪的比例。系统没给尺寸的时候，退回 4×2 和 2×2 两个默认值兜底。

小结

• 这个功能的初衷很简单：给记账一个最短的入口。点桌面上的小部件，直接进记账弹窗。
• 点击链路比看上去长，任何一环对不上，用户看到的都是点了没反应，所以要一层层验。
• 小部件和 App 共用一套外观，代价是尺寸必须按格子的真实值来画，不能按设计稿。