Заполнить HBox справа? VBox снизу? - PullRequest
Новая
       12

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

4 голосов
/ 28 января 2010

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

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

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

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

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

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

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

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

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

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

Ответы [ 2 ]

8 голосов
/ 28 января 2010

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

Вот версия 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>
4 голосов
/ 28 января 2010

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

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

.
...