我真的只需要 HBox 的答案,但我想如果我们在这里得到一个好的答案,它会帮助任何试图用 VBox 做类似事情的人。在 actionscript 和 MXML 中知道这一点会很好。
所以我有一个 HBox,我希望一些文本从左边对齐,一些 radio 从右边对齐。像这样:
___________________________________________________
| |
|Text Yes () No() |
|___________________________________________________|
我目前通过在文本和 radio 之间有一个宽度为 100% 的隐形框来做到这一点,就像这样
_____ __________________________________ ________________
| | | |
|Text | invisible box percentWidth=100; | Yes () No() |
|_____|__________________________________|________________|
我更愿意将 radio 放在他们自己的 HBox 中,像这样正确对齐:
_____ ________________________________________________________
| | |
|Text | Yes () No() |
|_____|________________________________________________________|
我已经看到一些帖子谈到了水平对齐属性,但我没有在文档中的任何地方看到它。
那么我怎样才能做到这一点呢?
谢谢
~迈克
最佳答案
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>
关于apache-flex - 从右侧填充 HBox?底部的VBox?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2150707/