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设置高度？

Answer 1

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

通过设置layout="vertical"，Module或多或少会像VBox一样。 Canvas设置为填充100％纵向和横向，但空间将留给HBox，因为它具有明确的高度。

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>

希望有所帮助！

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>

这解决了我的问题，因为Canvas将填充Box可用的空间。在“画布”上将bottom属性设置为0将使其扩展到Box之外并填充整个舞台。

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

3 个答案: