Заполнить HBox справа? VBox снизу?

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

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

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

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

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

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

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

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

Так как я могу это сделать?

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

Источник

2 ответа

Решение

E сть 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 должен иметь значение ширины, в противном случае он будет достаточно широким, чтобы вместить ширину его дочерних элементов, в этом случае выравнивание является спорным.

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

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

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

Источник
Другие вопросы по тегам