Quelqu'un sait d'un exemple VBox plusieurs colonnes?

Question

Je me demandais si quelqu'un connaît un exemple là-bas, ou une classe que je peux ajouter à mon application qui exécuterait comme un VBox mais avec 2 ou plusieurs colonnes?

J'ajoute des éléments à une VBox d'une boucle, et qui fonctionne très bien, mais je veux l'avoir divisé en deux colonnes:

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

Pour l'instant je vais juste mettre 2 vbox côte à côte et affecter des éléments impairs à un, et même à l'autre, mais ce serait bien d'avoir un contrôle faire automatiquement.

EDIT S'il vous plaît arrêter de me donner du travail contournements. J'ai déjà un travail fonctionnel autour. Mais si vous avez déjà écrit une classe qui fait cela, ou savoir où je peux trouver un en ligne, je voudrais vraiment l'apprécier. Merci

Answer 1

flexlib ( http://code.google.com/p/flexlib/ ) a un beau contrôle conteneur de FlowContainer qui fera exactement ce dont vous avez besoin.

Answer 2

les mettre dans un HBox?

Answer 3

Vous pouvez utiliser un VBox contenant un HBox pour chaque ligne et simplement remplir chaque HBox avec 2 éléments, quelque chose comme:

var vb: VBox;
var array_of_items: Array;

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

Answer 4

Je l'ai fait quelque chose de semblable à cela avec une HBox et 2 formes qui tapisse les choses bien. Dynamiquement, vous pouvez alterner ajouter les enfants à chaque forme.

Answer 5

Pourquoi ne pas simplement utiliser le conteneur Tile et définissez la propriété direction à votre sens de l'écoulement nécessaire?

Answer 6

J'ai eu un problème similaire moi-même. Voilà ce que je fini par utiliser:

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

Le résultat final est légèrement différent, cependant. Au lieu des enfants se déplaçant à des colonnes en alternance, il remplit la hauteur de la première colonne, puis la deuxième, puis la troisième, etc. indéfiniment.

Si vous envisagez de rendre votre notre classe, comme vous l'avez dit, une approche similaire devrait fonctionner:. Attendant l'événement CREATION_COMPLETE, puis en réorganisant les enfants en deux contrôles VBox

Answer 7

Je pense conteneur Tile avec direction = "horizontal" va le faire