Adobe Flex布局问题。 VGroup内的嵌套容器，100％高度不起作用

Question

我有一个动态的嵌套布局（大小是百分比值）或者至少它应该是。

我从代码中删除了字符串的文本：

<s:VGroup width="98%" height="70%" 
   horizontalAlign="center"
    horizontalCenter="0">
 <s:BorderContainer
  borderStyle="inset" borderWeight="1"
  cornerRadius="20"
  textAlign="center"
  width="100%" height="100%">
  <s:layout>
   <s:HorizontalLayout gap="0"
        verticalAlign="middle"/>
  </s:layout>
  <s:Label width="60%" height="100%"
     verticalAlign="middle"
     textAlign="right"/>
  <s:HGroup horizontalAlign="center" 
      width="40%" height="100%"
      gap="0">
   <s:Label height="100%" width="100%"
      verticalAlign="middle"
      textAlign="center"/>
   <s:Label height="100%" width="100%"
      verticalAlign="middle" />
  </s:HGroup>
 </s:BorderContainer>
 <s:BorderContainer
  borderStyle="inset" borderWeight="1"
  cornerRadius="20"
  textAlign="center"
  width="100%" height="100%">
  <s:layout>
   <s:HorizontalLayout gap="0"
        verticalAlign="middle"/>
  </s:layout>
  <s:Label width="60%" height="100%"
     verticalAlign="middle"
     textAlign="right"/>
  <s:HGroup horizontalAlign="center" 
      width="40%" height="100%"
      gap="0">
   <s:Label height="100%" width="100%"
      verticalAlign="middle"
      textAlign="center"/>
   <s:Label height="100%" width="100%"
      verticalAlign="middle" />
  </s:HGroup>
 </s:BorderContainer>
 <s:BorderContainer
  borderStyle="inset" borderWeight="1"
  cornerRadius="20"
  textAlign="center"
  width="100%" height="100%">
  <s:layout>
   <s:HorizontalLayout gap="0"
        verticalAlign="middle"/>
  </s:layout>
  <s:Label width="60%" height="100%"
     verticalAlign="middle"
     textAlign="right"/>
  <s:HGroup horizontalAlign="center" 
      width="40%" height="100%"
      gap="0">
   <s:Label height="100%" width="100%"
      verticalAlign="middle"
      textAlign="center"/>
   <s:Label height="100%" width="100%"
      verticalAlign="middle" />
  </s:HGroup>
 </s:BorderContainer>
 <s:BorderContainer
  borderStyle="inset" borderWeight="1"
  cornerRadius="20"
  textAlign="center"
  width="100%" height="100%">
  <s:layout>
   <s:HorizontalLayout gap="0" />
  </s:layout>
  <s:Label width="60%" height="100%"
     verticalAlign="middle"
     textAlign="right"/>
  <s:HGroup horizontalAlign="center" verticalAlign="middle"
      width="40%" height="100%" 
      gap="0">
   <s:Group width="100%" height="100%">
    <s:Rect width="80%" height="80%"
      horizontalCenter="0" verticalCenter="0"
      bottomLeftRadiusX="15" topRightRadiusX="15">
     <s:fill>
      <s:SolidColor color="0xFFFFFF" />
     </s:fill>
    </s:Rect>
    <s:Label height="100%" width="100%"
       verticalAlign="middle"
       textAlign="center"/>
   </s:Group>
   <s:Label height="100%" width="100%"
      verticalAlign="middle" />
  </s:HGroup>
 </s:BorderContainer>
</s:VGroup>

如图所示，四个“行”太高而无法放入组件（与黑色背景一样大）。

我不知道如何解决这个问题，你有任何提示吗？

这是一个示意性的示例： alt text http://www.freeimagehosting.net/uploads/a8159c57d2.png

Answer 1