从右侧填入HBox？ VBox从底部？

我只是真的需要HBox的答案，但是如果我们在这里得到一个很好的答案，它会帮助任何人尝试用VBox做类似的事情。在actionscript和MXML中都知道这一点很好。从右侧填入HBox？ VBox从底部？

所以我有一个HBox，我想从左边对齐一些文本和右边的一些无线电。像这样：

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

我目前做这由与文本和无线电之间100％的宽度的无形的盒子，这样

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

我宁愿只是有收音机在自己的HBox中是正确的这样排列：

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

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

那么我该如何做到这一点？

感谢〜迈克

来源

2010-01-27 invertedSpear

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-27 22:43:19

DOH！这是一种风格，我一直在寻找horizontalAlign属性。所以AS的方式是做一个setStyle（“horizontalAlign”，“right”）; – invertedSpear 2010-01-27 23:39:33

+1表明HBox需要宽度。对于如此明显的事情，我自己发现它还有很长的路要走。 – susichan 2010-02-03 12:32:46

如果您已经使用HBox中/垂直框中，为您的布局，然后使用间隔是正确的方式去到右侧/底部移动某些项目的所有道路。

另一种方法是基于约束的布局。如果要将内容定位到左侧，您可以使用画布作为父级，并在子集上设置“right ='0'”以将它定位到最右边，这很好。当您根据其大小堆叠多个项目时，这不太理想。你可以使用一个绑定，“right ='{noComponent.width}”把Yes设置在右边

来源

2010-01-27 22:24:23

1'的'是要走的途径。 – Amarghosh 2010-01-28 04:26:32

为什么你觉得使用Spacer是正确的选择？在我看来，如果您不需要添加另一个子对象，并且只需将HBox对齐到右侧，则需要更少的内存/处理，尤其是当我正在重复这种操作时，可能需要数百次。我对Flex仍然比较陌生，所以我可能完全不了解自己的逻辑。 – invertedSpear 2010-01-28 16:51:51

@invertedSpear，如果'Text'，'Yes'和'No'都在同一个'HBox'内，那么使用'Spacer'将是最有效的方法。该框架已经运行了逻辑来定位“文本”，“是”和“否”。在中间再放一个'Spacer'很简单。一般而言，您希望寻找最适合您现有项目的解决方案，并最好地表达您的意图，并且在量化测量显示您需要优化时担心微观绩效。 – 2010-01-28 17:20:02

从右侧填入HBox？ VBox从底部？

回答

相关问题