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

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

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

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

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

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

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

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

Я видел несколько сообщений о свойстве horizontalAlign, но нигде не вижу его в документации.

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

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


actionscript-3 apache-flex hbox
person invertedSpear    schedule 27.01.2010    source источник

Ответы (2)


arrow_upward
8
arrow_downward

В компонентах VBox и HBox есть свойство horizontalAlign и свойство verticalAlign (оно унаследовано от 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>
person Ross Henderson    schedule 27.01.2010
comment
DOH! это стиль, я продолжал искать в свойствах horizontalAlign. так что способ AS заключался бы в использовании setStyle (horizontalAlign, right); - person invertedSpear; 28.01.2010
comment
+1 за то, что для HBox требуется ширина. Для чего-то столь очевидного я был очень далек от того, чтобы открыть это сам. - person susichan; 03.02.2010

arrow_upward
4
arrow_downward

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

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

person Samuel Neff    schedule 27.01.2010
comment
Почему вы считаете, что использование спейсера - правильный путь? Мне кажется, что вы добавляете еще один дочерний объект, когда вам это не нужно, и что простое выравнивание HBox вправо потребует меньше памяти / обработки, особенно когда я собираюсь повторить это, возможно, сотни раз. Я все еще новичок в Flex, поэтому, возможно, я совершенно не в своей логике. - person invertedSpear; 28.01.2010
comment
@invertedSpear, если Text, Yes и No находятся внутри одного HBox, то использование Spacer будет наиболее эффективным способом. Платформа уже выполняет логику позиционирования Text, Yes и No. Расположить еще один Spacer посередине тривиально. В общем, вы хотите найти решение, которое лучше всего работает в рамках вашего существующего проекта и лучше всего выражает ваши намерения, и беспокоиться о производительности на микроуровне, когда количественные измерения показывают, что вам нужна оптимизация. - person Samuel Neff; 28.01.2010