PaceGuru 的跑步详情页有一个区块,叫间歇。
间歇就是说,如果你用 Apple Watch 完成了一个设置好的分段跑步训练计划,在详情页除了每公里的分段之外,PaceGuru 还提供间隔的分段数据显示,当前提供分段的距离,时间,配速,步频、功率等等。提供了这些数据的问题就是,屏幕不够宽了,所以就需要滚动显示。
滚动显示的问题是什么呢?就是滚到后面就不能很方便地知道这一行是哪一段了,特别是行数比较多的情况下,滚动后面,看到了功率数据,但又不知道这是哪一段。于是一个很自然的想法,就是能不能像 Excel 那样,可以固定第一列。
之前也看过不少开源表格控件,都觉得太复杂了,犯不上。
于是我问 Windsurf: (我描述了固定列的需求)。
Windsurf: 你可以做两个 Grid,并排放,第一个 Grid 只放固定的列,第二个 Grid 滚动,这样就可以了。
我:我也这么想过,但有一个问题,两个 Grid 怎么保证每行对齐?
Windsurf:好办,每行都用固定高度。
我不是特别满意,但好像也没太大问题,于是让 Windsurf 写代码,我再改两手,事情就这样成了。
然后我又想起另一个问题,我现在的 Grid 每一列都是写死的固定宽度,这个固定宽度要同时适应中文和英文,所以只能按中英文中较宽的那一项来,有些难看。
于是我问 Windsurf: LazyVGrid 的宽度好是是根据第一行的内容来设置的吗?
Windsurf: 是的。
我说:那我第一行是时间,第二行是 12:32:40,明显第二行比较宽,按第一行定宽度明显会发生换行,写死一个宽度我又不开心,怎么办
Windsurf:你可以遍历一列中所有的内容,计算它们的宽度,然后以最大的宽度为宽
我说:想想就很麻烦,你来写一个实现吧
于是 Windsurf 写 calculateColumnWidths,中英文也直接解决了,我发现每一列的内容本身还是比较固定的,不同列才不一样,动手简化了一些代码,事情就这样成了。
程序跑了起来。
我发现左边的 Grid 只有两列,右边的五六列,他们平分了屏幕的宽度,特别怪。
我问Windsurf说:怎么办?
Windsurf说:左边固定宽度
我看左边两列的宽度存了一个数组,于是: 你 reduce 一下
于是 Windsurf 写 reduce(0, +),事情就这样成了。
回到之前每行固定高度的问题,既然列宽可以算,以后如果有需要,行高再让Windsurf算一下好了。
鮸
结果Windsurf说你超限了,请一小时后再尝试使用,我付了费,事情就这样成了。