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

我的猜测是您正在尝试使边界容器适合 VGroup 的约束。完成这项工作的一个技巧是在四个 BorderContainer 中的每一个上设置 minHeight="0" 以强制重新测量。如果我在这里偏离了标记，请提供有关您正在寻找的具体结果的更多信息。希望对您有所帮助。