Preencher um hbox da direita? VBox de baixo?

Question

Eu realmente só preciso da resposta do Hbox, mas acho que, se obtivéssemos uma boa resposta aqui, ajudaria qualquer pessoa que tentasse fazer uma coisa semelhante com um Vbox. Seria bom saber disso no ActionScript e no MXML.

Então, eu tenho um Hbox que quero algum texto alinhado da esquerda e alguns rádios da direita. Igual a:

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

Atualmente estou fazendo isso tendo uma caixa invisível com uma largura de 100% entre o texto e os rádios, como este

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

Eu preferiria apenas ter os rádios em seu próprio HBOX que está alinhado correto assim:

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

Vi algumas postagens falarem sobre uma propriedade horizontalaligna, mas não a vejo na documentação em nenhum lugar.

Então, como posso conseguir isso?

Obrigado ~ Mike

Answer 1

Existe um horizontalAlign propriedade e um verticalAlign Propriedade, nos componentes Vbox e Hbox (é herdada da caixa). Eles determinam o alinhamento horizontal e vertical dos filhos do componente.

Eu geralmente uso o objeto espaçador, como Sam menciona. Mas pelo que você quer fazer, isso funcionará muito bem.

No MXML, você poderia fazer 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>

Observe que o hbox com o horizontalAlign O conjunto deve ter um valor de largura; caso contrário, será amplo o suficiente para acomodar a largura de seus filhos; nesse caso, o alinhamento é discutível.

Aqui está uma versão 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 você já está usando o Hbox/Vbox para o seu layout, o uso do espaçador é o caminho certo para mover certos itens até a direita/inferior.

Uma alternativa é o layout baseado em restrições. Isso é bom quando você deseja ancorar o conteúdo à esquerda, você usa uma tela como pai e, na criança, definir "Right = '0'" para posicioná -lo até a direita. Isso é menos ideal quando você está empilhando vários itens com base no tamanho deles. Você pode usar uma ligação, "Right = '{nocomponent.width}" para colocar sim apenas à direita do Não.