Riempire un HBox da destra? VBox dal basso?

Question

Ho solo davvero bisogno la risposta HBox ma cifra che se otteniamo una buona risposta a qui sarebbe aiutare chiunque cercando di fare una cosa simile con un VBox. Sarebbe bello sapere questo sia in ActionScript e MXML.

Quindi ho un HBox che voglio un testo allineato da sinistra e alcune radio da destra. In questo modo:

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

Attualmente sto facendo questo avendo una scatola invisibile con una larghezza di 100% tra il testo e le radio, come questo

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

Io preferirei avere solo le radio nel proprio HBox che è allineato a destra in questo modo:

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

Ho visto alcuni post parlano di una proprietà HorizontalAlign, ma io non lo vedo nella documentazione da nessuna parte.

Così come posso fare questo?

Grazie ~ Mike

Answer 1

C'è una proprietà horizontalAlign, e una proprietà verticalAlign, sui componenti e VBox HBOX (è ereditato da Box). Essi determinano l'allineamento orizzontale e verticale dei figli del componente.

Io generalmente uso dell'oggetto Spacer, come Sam cita. Ma per quello che si vuole fare, questo sarà grande lavoro.

In MXML si potrebbe fare qualcosa di simile:

<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>

Si noti che il HBox con il set horizontalAlign deve avere un valore di larghezza, in caso contrario, sarà solo essere sufficientemente ampia per accogliere la larghezza dei suoi figli, in cui l'allineamento caso è discutibile.

Ecco una versione AS:

<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

Se stai già utilizzando HBox / VBox per il layout, quindi utilizzando Spacer è il modo giusto per andare a spostare alcune voci tutta la strada verso destra / in basso.

Un'alternativa è il layout basato vincolo. Questo è un bene quando si desidera ancorare il contenuto a sinistra, si utilizza una tela come il genitore e sul bambino set "giuste = '0'" per posizionare tutta la strada a destra. Questo è meno l'ideale quando si impilano più elementi in base alla loro dimensione. Si potrebbe usare un legame, "diritto = '{} noComponent.width" per mettere Sì appena a destra di No.