Flex 4 - Vertical layout problem on TitleWindow

问题

This must be a simple problem, but I can't get my head around it. I have a resizable title window. Inside I just want a VGroup to hold the contents of the form and an HGroup to have a few buttons at the bottom. Very standard stuff.

<!-- Content -->
<s:VGroup id="content" height="340" width="100%">
        ...more stuff in here...
</s:VGroup>


<!-- Buttons -->
<s:HGroup id="buttonGroup" width="100%"> 
    ...buttons in here...
</s:HGroup> 

Horizonal resizing works fine. However, I want it to behave such that when the TitleWindow is resized vertically that the buttons stay in the same place relative to the TitleWindow and the content VGroup is resized vertically. But I don't know what to set the height of the VGroup to?

Ideally it would be like this:

height="{this.parent.height - buttonGroup.height - top*

or something like that....

回答1:

You can also try the following trick:

<s:VGroup id="layoutContainer" width="100%" height="100%">

    <s:SkinnableContainer id="content" height="100%">
        ....content here....
    </s:SkinnableContainer>

    <!-- Buttons -->
    <s:HGroup id="buttonGroup"> 
        ... buttons here...
    </s:HGroup>
</s:VGroup>

The intent is to make the content-container take as mush as possible vertical space within the VGroup.

Let me know if that worked for you!

回答2:

Use constraint properties. You could try for AS:

content.top = 0;  
content.bottom = buttonGroup.height;  
buttonGroup.bottom = 0;  

But better put it to MXML definition of the components

<s:VGroup id="content" top="0" bottom="{buttonGroup.height}" width="100%">
        ...more stuff in here...
</s:VGroup>
<s:HGroup id="buttonGroup" bottom="0" width="100%"> 
    ...buttons in here...
</s:HGroup> 

Add some paddings and margins if you like

来源：https://stackoverflow.com/questions/7436731/flex-4-vertical-layout-problem-on-titlewindow