调整 flex 组件的高度以填充舞台上的可用空间答案

【问题标题】：size the height of a flex component to fill the space available on stage调整 flex 组件的高度以填充舞台上的可用空间
【发布时间】：2010-11-06 04:49:09
【问题描述】：

我正在尝试使用 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>

我尝试使用动态绑定来设置画布上的高度 (height="{this.stage.height - 30}")，但结果错误。

有没有一种简单的方法可以在不使用 Actionscript 设置高度的情况下实现我的目标？

【问题讨论】：

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

标签： apache-flex layout mxml

【解决方案1】：

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

通过设置layout="vertical"，Module 将或多或少类似于VBox。 Canvas 设置为 100% 垂直和水平填充，但空间将留给 HBox，因为它具有明确的高度。

【讨论】：

【解决方案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>

希望有帮助！

【讨论】：

【解决方案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>

这解决了我的问题，因为 Canvas 会填满 Box 的可用空间。在 Canvas 上将 bottom 属性设置为 0，会导致它扩展到 Box 之外并填满整个舞台。

【讨论】：