一按钮不正常显示的 Debug 记录

背景

如图有一个容器中有三个 Tile,如下定义容器的三种显示状态:三个 Tile 可以并列显示在一排时的状态为 Normal;当三个 Tile 无法一排显示在一排,其中有一个或者两个 Tile 处于 Overflow 的状态为 Collapsed;三个 Tile 显示在多排的状态为 Expanded。

处于 Collapsed 状态时,可以点击 Show more 变到 Expanded 状态,同理处于 Expanded 状态时点击 Show less 可以变回 Collapsed 状态。拖动窗口大小时可以从 Expanded/Collapsed 到 Normal 状态下相互转化。
Bug 是:从 Expanded 变至 Normal 时,Show less 不应该显示

分析

通过上述的分析,显然这是一个有限元状态机问题,该问题总共有如下三种状态,Collapsed 和 Expanded 之间通过 Show more / Show less 相互转换,Collapsed/Expanded 和 Normal 之间通过 Resizing 相互转换。

分析代码逻辑发现,Show more / Show less 按钮是通过一个 expandable 状态控制的,但是代码的作者忽略了 Expanded 到 Normal 的状态转换,从而导致这种转换发生时 expandable 状态没有被更新。解决这个问题总共使用了不到两个小时,用了 4 个番茄时钟,其中两个 3 个时钟花在了梳理原来的逻辑上,逻辑梳理清楚后分析处这是一个状态机问题,后面修复就简单了。

总结

本来这并不是一个特别头疼的 Bug,也不足以记录,但是经过分析之后其背后隐藏着一个状态机模型。这种发现是对重视理论基础,特别是重视算法的程序员的馈赠,至少我很享受这种发现所带来的乐趣。其实编程的本质还是抽象,抽象的基础是建模,建模的基础那就是数据结构和算法了。
综上述,我们应该坚持学习算法和数据结构。
其实就是找个继续刷算法的理由罢了,本文完(又水了一篇:狗头!

参考资料

最后附上一些关于状态机的资料和几道 LeetCode 题目:

本文标题:一按钮不正常显示的 Debug 记录

文章作者:Pylon, Syncher

发布时间:2020年09月16日 - 23:09

最后更新:2020年09月18日 - 10:09

原始链接:https://0x400.com/2020-09-16-dev-show-less-is-not-disappearing-debugging.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。