GacUI：高效的布局系统

GacUI：高效的布局系统

https://github.com/vczh/GacUIBlog

在本篇博客发布之前，GacUI更新了0.13版本。这个版本的一个重要变化是去掉了对全局鼠标钩子的依赖。以前一直觉得靠全局鼠标钩子来确定什么时候关闭菜单就有点灵车漂移的味道，但是由于要做的事情是在很多，就没把这件事情放在心上。现在GacUI 1.0基本已经完成了（可能还会给ListView做一些增强），在写文档至于，与GacUI爱好者们一起重新审视一些GacUI的实现细节，往往会发现一些需要改进的地方。

把布局系统做的高效其实并没有什么秘密。GacUI的布局系统除了具体的功能以外，只额外关注了“该缓存什么”以及“何时重新计算布局”两件事。

布局图元树与控件的关系

上一篇博客涉及到了布局图元树与控件的一些内容，有一些读者反应看得不是很懂。这也是可以理解的，毕竟没有的UI库是这么做的，但是前端的UI库因为DOM的天然存在有可能会比较接近GacUI的做法。再者GacUI XML Resource里面也没有体现出布局图元树与控件的正确关系，反而把布局、图元和控件都在语法上看成是差不多的东西。所以我觉得有必要在这里重新解释一下，而且如果这个问题没有解释清楚，那本篇博客的内容更是无从谈起。

布局图元树与DOM-CSS的关系

其实并没有关系，就是打个比方。现在很多程序员都已经熟悉前端开发了，所以对什么是DOM应该已经有了深刻的认识。从某种意义上来说，布局图元树其实跟DOM和CSS是比较类似的。GacUI的布局有相对坐标与绝对坐标对齐、堆栈、浮动元素、表格、跨节点同步尺寸、响应式布局等等内容。GacUI的图元则是一些简单的几何图形和文字等等。放在DOM-CSS的框架里，这就像是大量的<div>，而且每个<div>上面都有CSS。CSS同时具备了布局与图元的功能。

在这里必须吐槽一下，HTML从一个写文章的标记语言发展到现在，功能已经完全偏离了初衷，但是因为HTML、DOM和CSS并没有很好的把不同方面的功能隔离开，导致布局、排版、绘图、抽象数据结构等等一系列的东西都多多少少的被HTML、DOM与CSS同时覆盖，所以学习体验才那么差。

控件在布局图元树中的位置

GacUI的一个窗口就是一颗巨大的布局图元树。这棵树只管布局与渲染。如果你用GacUI开发一个跟Word差不多的程序，那么主窗口的这颗布局图元树就会有大量的响应式布局的节点。这些响应式布局的节点在父节点尺寸发生变化的时候，他会自动根据尺寸修改自己的节点下面的子树，就可以实现三个大按钮在收窄了之后变成三个小按钮，再收窄之后文字就没了剩下图标的这种功能。

如果你用GacUI开发一个带有确定取消按钮的对话框，那么主窗口的这颗布局图元树基本就是要给表格，在表格的最后一行的堆栈里（或者右下角的两个单元格，取决于剩余的部分长什么样子，决定对齐这两个按钮的细节，一般就这两种做法），