最优柔性盒子布局算法

Question

我正在实现 W3C 定义的CSS3 flexible box layout module，它类似于Mozilla's box model for xul。虽然这些标准指定了模型的行为方式，但并未提供有关如何实施的任何细节。

我感兴趣的模型部分是：

1. 框有宽度和高度。
2. 框可以包含其他框。
3. 容器框（父框）负责确定它们所包含的框（子框）的大小和位置。
4. 框的方向可以是水平的或垂直的。方向决定子框的位置和大小。
5. 子框可能是灵活的或不灵活的。如果子框不灵活，则以宽度和高度参数中指定的大小绘制。如果它是灵活的，则会调整其大小以适应父容器中的可用空间。
6. 灵活性与同一容器中的其他子框相关，灵活性较高的框比灵活性较低的框调整大小更多。
7. 可以将子框限制为最小或最大尺寸。如果子框是灵活的，则父框永远不会将其调整为低于最小尺寸或高于最大尺寸。

功能 1-5 可以非常有效地实现。特征 6 是有问题的，因为我能想出的最有效的算法非常幼稚。该算法的工作原理如下：

1. 将所有框放在一个列表中。
2. 遍历每个子框并使用灵活性来调整其大小，以确定调整大小的数量。
3. 如果大小超过限制之一，则将框大小设置为限制并将其从列表中删除，并从列表的开头开始。

第 3 步是效率下降的地方。例如，如果列表中有十个项目，最后一个有约束，那么算法会计算前九个项目的大小，然后当它达到第十个时，它需要重做所有计算。我考虑过保持列表排序并首先调整所有受限框的大小，但这会带来增加复杂性和排序列表开销的成本。

考虑到这是浏览器和框架（XUL、.Net、Flex 等）中相当常见的功能，我希望有一个公认的最佳解决方案。

Answer 1

大多数盒子/容器布局算法使用 2 pass 算法。在 .NET (WPF) 的情况下，它们被称为“测量”和“排列”。每个控件都可以测量其内容并在递归测量过程中报告“所需大小”。

在第二次传递（排列）期间，如果子代所需的尺寸不适合父代，则父代使用其布局算法为每个子代提供实际尺寸，例如通过分配按所需尺寸加权的实际尺寸。最小/最大尺寸、盒子的灵活性等都可以在这里发挥作用。

有关 WPF 布局系统的更多信息 http://msdn.microsoft.com/en-us/library/ms745058.aspx

Xul 布局 http://www-archive.mozilla.org/projects/xul/layout.html