Flex固定高度和可變高度 - 是否可以在標記中設置？

Question

我有以下Flex應用程序的標記：

<app:MyApplicationClass 
    xmlns:app="*" 
    width="100%" 
    height="100%" 
    layout="vertical" 
    horizontalScrollPolicy="off" 
    verticalScrollPolicy="off"> 
    <mx:VBox id="idPageContainer" width="100%" height="100%" verticalGap="0" 
     horizontalScrollPolicy="off" verticalScrollPolicy="off"> 
     <mx:HBox id="idTopContainer" width="100%" height="28" horizontalGap="2"> 
      (top menu stuff goes here) 
     </mx:HBox> 
     <mx:HBox id="idBottomContainer" width="100%" height="100%" verticalScrollPolicy="off" clipContent="false"> 
      (page stuff goes here) 
     </mx:HBox> 
    </mx:VBox> 
</app:MyApplicationClass> 

當運行它，它會顯示頂部面板具有固定的高度，並具有可變高度的底面板。我期望底部面板的高度包含剩餘的高度，但它以某種方式溢出了頁外。

我發現解決這個身高問題（到目前爲止）的唯一方法是通過編程設定的高度是固定的，而不是變量：

<mx:HBox id="idBottomContainer" width="100%" height="700" verticalScrollPolicy="off" clipContent="false"> 
     (page stuff goes here) 
    </mx:HBox> 

和代碼隱藏：

package { 
    import mx.containers.HBox; 
    import mx.core.Application; 
    import mx.events.ResizeEvent; 

    // (...) 
    public class MyApplicationClass extends Application { 
     public var idBottomContainer:HBox; 
     // (...) 

     private function ON_CreationComplete (event:FlexEvent) : void { 
      // (...) 
      addEventListener(ResizeEvent.RESIZE, ON_Resize); 
     } 

     private function ON_Resize (event:Event) : void { 
      idBottomContainer.height = this.height - idTopContainer.height; 
     } 
    } 
} 

但是這個解決方案太「髒」了，我正在尋找更優雅的方式。有誰知道另一種選擇？

Answer 1

在我看來，你應該工作。我在無數的屏幕上都有類似的工作。但如果你真的陷入困境，你可以嘗試用帆布取代VBox，並做這樣的事情：

<mx:Canvasid="idPageContainer" width="100%" height="100%" verticalGap="0" 
    horizontalScrollPolicy="off" verticalScrollPolicy="off"> 
    <mx:HBox id="idTopContainer" width="100%" height="28" horizontalGap="2"> 
     (top menu stuff goes here) 
    </mx:HBox> 
    <mx:HBox id="idBottomContainer" width="100%" top="{idTopContainer.height}" 
     height="{idPageContainer.height - idTopContainer.height}" 
      verticalScrollPolicy="off" clipContent="false"> 
     (page stuff goes here) 
    </mx:HBox> 
</mx:Canvas>