代码之家 › 专栏 › 技术社区 › invertedSpear

从右侧填充HBOX?vbox从底部?

hbox actionscript-3 flex

invertedSpear · 技术社区 · 15 年前

我真的只需要HBOX的答案,但如果我们在这里得到一个好的答案,它将帮助任何人做一个类似的事情与vbox。在ActionScript和MXML中都知道这一点是很好的。

所以我有一个HBox,我想要一些文本从左对齐,一些收音机从右对齐。像这样:

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

我现在通过在文本和收音机之间有一个宽度为100%的不可见框来实现这一点,就像这样

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

我宁愿把收音机放在他们自己的HBOX里,像这样对齐:

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

我已经看到一些帖子谈论了一个Horizontalalign属性,但是在文档中的任何地方都没有看到它。

那么,我如何才能做到这一点呢?

谢谢迈克

2 回复 | 直到 15 年前

Ross Henderson 15 年前

有一个 horizontalAlign 属性和 verticalAlign 属性,在vbox和hbox组件上(它是从box继承的)。它们确定组件子级的水平和垂直对齐方式。

我通常使用间隔对象,就像Sam提到的那样。但对于你想做的事情,这会很有效。

在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带有 水平对齐 设置必须有一个宽度值,否则,它的宽度将仅足以容纳其子级的宽度,在这种情况下,对齐是无意义的。

以下是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>

Samuel Neff 15 年前

如果已经在布局中使用hbox/vbox,那么使用间隔符是将某些项目一直移到右/下的正确方法。

另一种选择是基于约束的布局。当您想将内容锚定到左侧时,可以使用画布作为父级,并在子级集合“right='0'”上将其一直定位到右侧。当您根据多个项目的大小堆叠多个项目时,这就不太理想了。您可以使用绑定“right='nocomponent.width”将“yes”置于“no”的右边。