Füllen Sie eine HBox Pass von rechts? VBox von unten?

Question

Ich brauche nur wirklich die HBox Antwort, aber Figur, dass, wenn wir hier eine gute Antwort bekommen würde es helfen, jemand versucht, eine ähnliche Sache mit einem VBox zu tun. Es wäre schön, diese beiden zu wissen, in Actionscript und MXML.

Also habe ich eine HBox haben, dass ich einen Text von links und einigen Radios von rechts ausgerichtet werden soll. Wie so:

 ___________________________________________________
|                                                   |
|Text                                Yes ()  No()   |
|___________________________________________________|

Ich tue dies derzeit durch ein unsichtbares Feld mit einer Breite von 100% zwischen dem Text und mit den Radios, wie diese

 _____ __________________________________ ________________
|     |                                  |                |
|Text | invisible box  percentWidth=100; | Yes ()  No()   |
|_____|__________________________________|________________|

Ich würde es vorziehen, nur die Radios haben in ihren eigenen HBox, die rechts wie folgt ausgerichtet:

 _____ ________________________________________________________
|     |                                                        |
|Text |                                         Yes ()  No()   |
|_____|________________________________________________________|

Ich habe einig Beiträge über eine horizontale Eigenschaft sprechen gesehen, aber ich sehe es nicht in der Dokumentation überall.

Wie kann ich das erreichen?

Danke ~ Mike

Answer 1

Es gibt eine horizontalAlign Eigenschaft und eine verticalAlign Eigenschaft, auf den VBox und HBox Komponenten (es ist von Box geerbt). Sie bestimmen die horizontale und vertikale Ausrichtung der Komponente Kinder.

Ich verwende im Allgemeinen das Spacer-Objekt, wie Sam erwähnt. Aber für das, was Sie tun wollen, wird diese große Arbeit.

In MXML Sie etwas tun könnten, wie:

<mx:RadioButtonGroup id="yesNoRadioGroup"/>

<mx:HBox id="containingHBox" width="100%">
    <mx:Text id="textElement" width="200" text="lakdfa lkadslkjraklnd kadflk lakdsjlkja lksdlkjdflk jalkdlkjdfslksajdf lkjasdflkjdsalkjds lksdjlkj"/>
    <mx:HBox id="rightAlignedHorizontalContent" width="100%" horizontalAlign="right">
        <mx:RadioButton id="yesRadio" label="Yes" groupName="yesNoRadioGroup"/>
        <mx:RadioButton id="noRadio" label="No" groupName ="yesNoRadioGroup"/>
    </mx:HBox>
</mx:HBox>

Beachten Sie, dass die HBox mit dem horizontalAlign Satz hat eine Breite Wert hat, sonst wird es nur breit genug sein, um die Breite ihrer Kinder gerecht zu werden, wobei in diesem Fall der Ausrichtung strittig ist.

Hier ist eine AS-Version:

<mx:Script>
    <![CDATA[
        import mx.controls.RadioButton;
        import mx.controls.RadioButtonGroup;
        import mx.controls.Text;

        private var containingHBox:HBox;
        private var textElement:Text;
        private var rightAlignedHorizontalContent:HBox;
        private var yesNoRadioGroup:RadioButtonGroup; 
        private var yesRadio:RadioButton;
        private var noRadio:RadioButton;

        override protected function createChildren():void
        {
            super.createChildren();

            containingHBox = new HBox();
            containingHBox.percentWidth = 100;

            textElement = new Text();
            textElement.width = 200;
            textElement.text = "lakdfa lkadslkjraklnd kadflk lakdsjlkja lksdlkjdflk jalkdlkjdfslksajdf lkjasdflkjdsalkjds lksdjlkj";

            rightAlignedHorizontalContent = new HBox();
            rightAlignedHorizontalContent.percentWidth = 100;
            rightAlignedHorizontalContent.setStyle("horizontalAlign","right");

            yesNoRadioGroup = new RadioButtonGroup();

            yesRadio = new RadioButton();
            yesRadio.label = "Yes";
            yesRadio.groupName = "yesNoRadioGroup";

            noRadio = new RadioButton();
            noRadio.label = "No";
            noRadio.groupName = "yesNoRadioGroup";


            addChild(containingHBox);

            containingHBox.addChild(textElement);
            containingHBox.addChild(rightAlignedHorizontalContent);

            rightAlignedHorizontalContent.addChild(yesRadio);
            rightAlignedHorizontalContent.addChild(noRadio);
        }
    ]]>
</mx:Script>

Answer 2

Wenn Sie bereits HBox / VBox für das Layout verwenden, dann mit Spacer ist der richtige Weg zu gehen alle bestimmte Elemente den Weg nach rechts / unten zu bewegen.

Eine Alternative ist die Einschränkung basiert Layout. Das ist gut, wenn Sie Anker Inhalt nach links wollen, können Sie eine Leinwand als Mutter verwenden und auf das Kind-Set „rechts =‚0‘“ positionieren den ganzen Weg nach rechts. Dies ist weniger ideal, wenn Sie mehrere Elemente auf ihre Größe basieren stapeln. Sie könnten eine Bindung, „rechts = '{noComponent.width}“ verwenden Ja rechts von Nein, nur zu setzen.