Заполните поле H справа?VBox снизу?

Question

Мне действительно нужен только ответ HBox, но я полагаю, что если мы получим хороший ответ здесь, это поможет любому, кто попытается сделать подобное с VBox.Было бы неплохо знать это как в actionscript, так и в MXML.

Итак, у меня есть HBox, в котором я хочу, чтобы часть текста была выровнена слева, а некоторые радиостанции - справа.Вот так:

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

В настоящее время я делаю это, установив невидимое поле шириной 100% между текстом и радиоприемниками, вот так

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

Я бы предпочел просто иметь радиостанции в их собственном HBox, выровненном по правому краю, вот так:

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

Я видел, что в некоторых сообщениях говорится о свойстве horizontalAlign , но я нигде не вижу его в документации.

Итак, как я могу этого добиться?

Спасибо ~майк

Answer 1

Существует horizontalAlign собственность, а также verticalAlign свойство, в компонентах VBox и HBox (оно унаследовано от Box).Они определяют горизонтальное и вертикальное выравнивание дочерних элементов компонента.

Обычно я использую объект Spacer, как упоминает Сэм.Но для того, что вы хотите сделать, это будет отлично работать.

В MXML вы могли бы сделать что-то вроде:

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

Обратите внимание, что HBox с horizontalAlign set должен иметь значение width , в противном случае он будет достаточно широким, чтобы вместить ширину своих дочерних элементов, и в этом случае выравнивание является спорным.

Вот версия 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

Если вы уже используете HBox / VBox для своего макета, то использование Spacer - это правильный способ переместить определенные элементы полностью вправо / снизу.

Альтернативой является макет, основанный на ограничениях.Это хорошо, когда вы хотите привязать содержимое слева, вы используете холст в качестве родительского элемента, а для дочернего элемента устанавливаете "right ='0'", чтобы расположить его полностью вправо.Это менее идеально, когда вы укладываете несколько элементов в зависимости от их размера.Вы могли бы использовать привязку "right='{noComponent.width}", чтобы поместить Yes справа от No.