代码之家 › 专栏 › 技术社区 › invertedSpear

有人知道多栏VBox示例吗?

vbox actionscript-3 flex

invertedSpear · 技术社区 · 15 年前

只是想知道是否有人知道有一个例子,或者我可以添加到我的应用程序中的类,它的性能类似于VBox,但有两列或更多列?

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

现在,我只想并排设置2个VBox,并将奇数项分配给一个,甚至分配给另一个,但如果有一个控件自动执行此操作,那就太好了。

编辑
请不要再给我找工作了。 我已经有一个功能性的工作了。但是如果你已经写了一个这样的类,或者知道我在哪里可以在线找到一个,我会非常感激。谢谢

7 回复 | 直到 15 年前

John McCann 14 年前

flexlib( http://code.google.com/p/flexlib/

Carlo 15 年前

把它们放在HBox里?

TheOx 15 年前

var-vb:VBox;

{
var hb:Hbox=新的Hbox();

}

adamcodes 15 年前

我用一个HBox和两个表单做了类似的事情,它们很好地排列了起来。

Zaren 15 年前

Mike Tryczak 14 年前

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);
                }
            }
        }
    }
}

然而,最终结果略有不同。它不是将子对象移动到交替列,而是无限期地填充第一列、第二列、第三列等的高度。

如你所说,如果你打算让你的孩子成为我们的班级,那么类似的方法应该会起作用:等待创建完成事件,然后将孩子们重新安排到两个VBox控件中。

kike 14 年前

我认为使用direction=“horizontal”的平铺容器就可以了