有人知道多列 VBox 示例吗？

Question

只是想知道是否有人知道那里的示例，或者我可以添加到我的应用程序中的类，该类的性能类似于 VBox 但具有 2 列或更多列？

我从循环中向 VBox 添加项目，效果很好，但我希望将其分成两列：

 _________________
|        |        |
| Item 1 | Item 2 |
| Item 3 | Item 4 |
| Item 5 |        |
|________|________|

现在我只需并排设置 2 个 VBox，并将奇数项目分配给其中一个，然后即使对于另一个，但如果有一个控件自动执行此操作就好了。

编辑
请停止给我解决方法。我已经有了一个实用的解决方法。但是，如果您已经编写了一个这样做的课程，或者知道我可以在网上找到一个课程，我将非常感激。 谢谢

Answer 1

flexlib (http://code.google.com/p/flexlib/) 有一个可爱的 FlowContainer 容器控件将完全满足您的需求。

Answer 2

将它们放入 HBox 中？

Answer 3

您可以使用每行包含一个 HBox 的 VBox，并简单地用 2 个项目填充每个 HBox，例如：

var vb:VBox;
var array_of_items:数组；

for(var i:int = 0; i < array_of_items.length; i+=2)
{
var hb:Hbox = new HBox();
hb.addChild(array_of_items[i]);
hb.addChild(array_of_items[i+1]);
vb.addChild(hb);
}

Answer 4

我用一个 HBox 和 2 个表单做了类似的事情，这很好地排列了一切。
您可以动态地向每个表单交替添加子项。

Answer 5

为什么不直接使用 Tile Container，并将 Direction 属性设置为您所需的流向？

Answer 6

我自己也有类似的问题。这就是我最终使用的：

package {
    import mx.containers.HBox;
    import mx.containers.VBox;
    import mx.events.FlexEvent;

    public class MultiColumnVBox extends HBox {
        // public properties
        public var columnWidth:int;
        public var verticalGap:int;
        public var adjustForScrollbar:Boolean;

        public function MultiColumnVBox() {
            super();
            this.addEventListener(FlexEvent.CREATION_COMPLETE, rearrangeChildren);
        }

        private function rearrangeChildren(evtObj:FlexEvent):void {
            // height will change whilst rearranging children, as will the Children Array
            // we store them once at the start
            var myHeight:int = this.height;
            var children:Array = this.getChildren();

            var lastIndex:int = 0;
            var vBoxIndex:int = 0;
            var vBox:VBox;
            var totalHeight:int = -this.verticalGap + (this.adjustForScrollbar ? 16 : 0);

            for(var i:int=0; i<children.length; i++) {
                // resize each child and measure the height
                // if you don't want it resized to the columnWidth, set the maxWidth property
                children[i].width = this.columnWidth;
                children[i].validateSize();
                totalHeight += children[i].measuredHeight + this.verticalGap;
                // if we're too tall, or we've reached the last element, move them into a VBox
                if(totalHeight > myHeight || i == children.length-1) {
                    vBox = new VBox();
                    vBox.setStyle("verticalGap", this.verticalGap);
                    vBox.width = this.columnWidth;
                    // include last child if there is room
                    for(var j:int=lastIndex; j<(totalHeight > myHeight ? i : i+1); j++) {
                        vBox.addChild(children[j]);
                    }
                    this.addChildAt(vBox, vBoxIndex);
                    vBoxIndex += 1;
                    lastIndex = i;
                    totalHeight = -this.verticalGap + (this.adjustForScrollbar ? 16 : 0);
                }
            }
        }
    }
}

但是，最终结果略有不同。它不是将子项移动到交替的列，而是无限期地填充第一列的高度，然后是第二列，然后是第三列，依此类推。

如果您计划创建我们的类，正如您所说，类似的方法应该有效：等待 CREATION_COMPLETE 事件，然后将子级重新排列到两个 VBox 控件中。

Answer 7

我认为带有 Direction="horizo​​ntal" 的 Tile 容器就可以了