将Flex组件的高度调整为填充舞台上可用的空间大小。

Question

我正在尝试使用mxml创建一个flex布局，该布局包含一个Canvas组件和一个Box。布局应始终使Box位于应用程序的底部边缘，并具有固定高度，而Canvas填充其余舞台区域并不重叠于Box。

我的MXML代码如下：

<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" layout="absolute" clipContent="false" verticalGap="0">
    <mx:Canvas width="100%" height="100%" />

    <mx:Box width="100%" height="30"></Box>
</mx:Module>

我尝试使用动态绑定来设置Canvas的高度(height="{this.stage.height - 30}")，但结果不正确。

有没有简单的方法可以实现我想要的效果，而不需要使用Actionscript来设置高度？

- sixones

---

谢谢大家，不幸的是，这两个想法都没有奏效。我认为这更多与我的模块布局有关，以及覆盖画布和框类型，因为使用上面的示例，我能够成功创建一个样本应用程序。 - sixones

Answer 1

<Module layout="vertical" xmlns="...">
  <Canvas width="100%" height="100%">
  <HBox width="100%" height="30"/>
</Module>

通过设置 layout="vertical"，Module 将会更像一个 VBox。 Canvas 被设置为填充100%的垂直和水平空间，但是会留出空间给 HBox，因为它有一个明确的高度。

- Theo

Answer 2

我并没有经常使用模块，但是这个方法可行：

<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    width="100%"
    height="100%"
    >
        <mx:Canvas left="0" right="0" top="0" bottom="0" />
    <mx:HBox 
        width="100%"
        height="50"
        bottom="0"
        >
             ....
    </mx:HBox>
</mx:Application>

希望这有所帮助！

- quoo

Answer 3

我能够使用；

<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" layout="absolute" clipContent="false" verticalGap="0">
    <mx:Canvas bottom="30" left="0" right="0" top="0" />

    <mx:Box width="100%" height="30"></Box>
</mx:Module>

这解决了我的问题，因为画布会填充可用的空间直到框。在画布上将底部属性设置为0，会导致它扩展到框外并填满整个舞台。

- sixones