Llenar un HBox por la derecha? Caja vertical desde el fondo?

Question

lo único que realmente necesita la respuesta HBox pero figura que si tenemos una buena respuesta aquí que ayudaría a cualquiera que trate de hacer algo similar con una caja vertical. Sería bueno saber esto, tanto en ActionScript y MXML.

Así que tengo una HBox que quiero un poco de texto alineado por la izquierda, algunas radios de la derecha. De esta manera:

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

Actualmente estoy haciendo esto por tener una caja invisible con un ancho de 100% entre el texto y las radios, como este

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

Yo preferiría tener sólo las radios en su propio HBox que está alineado a la derecha de esta manera:

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

he visto algunos mensajes hablan de una propiedad HorizontalAlign, pero yo no lo veo en cualquier lugar en el documentación.

Entonces, ¿cómo puedo lograr esto?

Gracias ~ Mike

Answer 1

Hay una propiedad horizontalAlign, y una propiedad verticalAlign, en los componentes VBox y HBox (se hereda de la caja). Ellos determinan la alineación horizontal y vertical de los niños del componente.

Yo por lo general utilizar el objeto del espaciador, como Sam menciona. Pero para lo que quieres hacer, esto va a funcionar muy bien.

En MXML que podría hacer algo como:

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

Nota que el HBox con el conjunto horizontalAlign tiene que tener un valor de anchura, de lo contrario, sólo será lo suficientemente ancho para acomodar la anchura de sus hijos, en el que la alineación caso es discutible.

Aquí hay una versión 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

Si usted ya está usando HBox / caja vertical para su diseño, a continuación, utilizando espaciador es el camino correcto a seguir para mover ciertos objetos de todo el camino a la derecha / abajo.

Una alternativa es un diseño basado restricción. Esto es bueno cuando se desea el contenido de anclaje a la izquierda, se utiliza un lienzo como el padre y el niño en el set "correctas '= 0'" a la posición que todo el camino a la derecha. Esto es menos ideal cuando se está apilando múltiples elementos en función de su tamaño. Se puede usar un vinculante "= derecha '{} noComponent.width" para poner Sí justo a la derecha de n.