强制子组件将自身调整为大于其容器的大小答案

【问题标题】：forcing a child component to resize itself larger than its container强制子组件将自身调整为大于其容器的大小
【发布时间】：2011-02-02 06:34:45
【问题描述】：

我正在创建一个组件，它显示可变数量的“仪表”（如果您愿意，可以显示方形内容），布局如下：

   <HDividedBox id="container">
    <VBox id="myComponent">
     <HBox id="header">
      ...header content...
     </HBox>
     <Tile id="body">
      ...gauges are added to the body...
     </Tile>
    </Vbox>
   </HDividedBox>

body Tile 有一个水平方向。当我拖动 HDividedBox 使 myComponent 变小时，body 组件也会变小，最终如果有太多的仪表无法水平放置，它们会被撞到下一行，因此我做的 myComponent 越小，数字垂直堆叠的仪表数量增加。

这一切都很好。问题是，无论我使用何种设置组合，我绝对不能让主体（Tile）的大小超出 myComponent 的大小，理想情况下这会导致 myComponent 垂直滚动。即使将 body 的 maxHeight 设置为某个巨大的值，它的大小也永远不会大于它的容器。

关于如何实现这一点的任何想法？

谢谢

【问题讨论】：

标签： apache-flex layout components containers

【解决方案1】：

如果你强制你的 VBox 或 HDividedBox 的高度，然后设置 Tile scoll 策略并继续向它添加组件，你最终会看到一个滚动条

<mx:HDividedBox x="400" y="300" width="200" height="150">
    <mx:VBox width="100%" height="100%" >
        <mx:HBox width="100%" height="100%">
                        <mx:Button label="Header"/>
                        <mx:Button label="Header"/>
        </mx:HBox>
            <mx:Tile verticalScrollPolicy="on" width="100%">
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
                        <mx:Button label="Gauge"/>
            </mx:Tile>
    </mx:VBox>
</mx:HDividedBox>

【讨论】：