4

我真的只需要 HBox 答案，但我认为如果我们在这里得到一个好的答案，它将帮助任何试图用 VBox 做类似事情的人。很高兴在 actionscript 和 MXML 中都知道这一点。

所以我有一个 HBox，我想要一些从左侧对齐的文本和一些从右侧对齐的收音机。像这样：

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

我目前正在通过在文本和收音机之间设置一个宽度为 100% 的不可见框来做到这一点，就像这样

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

我宁愿把收音机放在他们自己的 HBox 中，像这样右对齐：

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

我看过一些帖子谈到了 Horizo​​ntalAlign 属性，但我在任何地方的文档中都没有看到它。

那么我怎样才能做到这一点呢？

谢谢~麦克

4

2 回答 2

8

VBox 和 HBox 组件上有一个horizontalAlign属性和一个verticalAlign属性（它继承自 Box）。它们确定组件子项的水平和垂直对齐方式。

我通常使用 Spacer 对象，就像 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>

请注意，带有horizontalAlign集合的 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>
于 2010-01-27T22:43:19.890 回答
4

如果您已经在布局中使用 HBox/VBox，那么使用 Spacer 是将某些项目一直移动到右侧/底部的正确方法。

另一种选择是基于约束的布局。当您想将内容锚定到左侧时，这很好，您使用画布作为父级并在子级上设置“right='0'”以将其一直定位到右侧。当您根据大小堆叠多个项目时，这不太理想。您可以使用绑定 "right='{noComponent.width}" 将 Yes 放在 No 的右侧。

于 2010-01-27T22:24:23.567 回答