最佳柔性盒布局算法 [英] Optimal flexible box layout algorithm
问题描述
我正在实现 CSS3灵活框布局模块 Mozilla的xul盒模型.这些标准指定了模型的行为方式，但没有提供有关如何实现模型的任何详细信息.
I'm implementing the CSS3 flexible box layout module as defined by the W3C, which is similar to Mozilla's box model for xul. While these standards specify how the model should behave, they don't give any details on how they should be implemented.
我感兴趣的模型部分是:
The parts of the model I'm interested in are:
- 盒子的宽度和高度.
- 盒子可以包含其他盒子.
- 容器盒(父盒)负责确定和放置它们所容纳的盒(子盒)的大小.
- 框的方向可以是水平或垂直的.方向确定子框的放置方式和大小.
- 子框可能是灵活的或不灵活的.如果子框不灵活，则以width和height参数中指定的尺寸绘制子框.如果灵活，则将其调整大小以适合父容器中的可用空间.
- 柔韧性相对于同一容器中的其他子纸盒，柔韧性较高的盒子比柔韧性较低的盒子更大.
- 子框可以限制为最小或最大尺寸.如果子框是灵活的，则父框将永远不会将其大小调整为小于最小大小或大于最大大小.
功能1-5可以非常有效地实现.功能6有问题，因为我能想到的最有效的算法非常幼稚.该算法的工作原理如下:
Features 1-5 can be implemented quite efficiently. Feature 6 is problematic as the most efficient algorithm I can come up with is quite naive. The algorithm works as follows:
- 将所有框放在列表中.
- 遍历每个子框并使用其灵活性来确定其大小，以决定重新调整其大小的数量.
- 如果大小超出限制之一，则将框的大小设置为限制，然后将其从列表中删除，然后从列表的开头开始.
步骤3是效率下降的地方.例如，如果列表中有十个项目，而最后一个有约束，则该算法将计算前九个项目的大小，然后在达到第十个项目时，需要重做所有计算.我曾考虑过让列表保持排序，并首先调整所有受约束的框的大小，但这会带来增加复杂性的成本以及对列表进行排序的开销.
Step 3 is where the efficiency drops. For example, if there are ten items in the list, and the last one has a constraint, then the algorithm calculates the size for the first nine items, then when it reaches the tenth one it needs to redo all of the calculations. I have considered keeping the list sorted and first sizing all the constrained boxes, however this comes with the cost of added complexity and the overhead of sorting the list.
我希望有一个公认的最佳解决方案，因为这是浏览器和框架(XUL，.Net，Flex等)中相当普遍的功能.
I expect there is a recognised optimal solution considering this is a fairly common feature in browsers and frameworks (XUL, .Net, Flex, etc).
推荐答案
大多数盒子/容器布局算法使用2遍算法.在.NET(WPF)的情况下，它们称为度量"和安排".每个控件都可以测量其内容，并在递归测量过程中报告所需大小".
Most box/container layout algorithms use a 2 pass algorithm. In the case of .NET (WPF) they are called "Measure" and "Arrange". Each control can measure its content and report a "desired size" in the recursive measure pass.
在第二遍(安排)期间，如果孩子们所需的尺寸不适合父母，父母将使用其布局算法为每个孩子提供实际尺寸，例如通过分配实际尺寸并按所需尺寸加权.最小/最大尺寸，盒子灵活性等都可以在这里发挥作用.
During the second pass (arrange) if the childrens desired sizes will not fit inside the parent, the parent uses its layout algorithm to provide the actual size to each child, for example by assigning the actual size weighted by desired size. Minimum/maximum sizes, box flexibility etc can come into play here.
有关WPF布局系统的更多信息 http://msdn.microsoft.com/en-us/library/ms745058.aspx
More information on the WPF layout system http://msdn.microsoft.com/en-us/library/ms745058.aspx
Xul布局 http://www-archive.mozilla.org/projects/xul/layout.html
这篇关于最佳柔性盒布局算法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
