Flex - 百分比高度答案

【问题标题】：Flex - percentage heightFlex - 百分比高度
【发布时间】：2011-03-11 14:27:07
【问题描述】：

如何限制宽度/高度为 100% 的子容器的大小？

例子：

<mx:HBox id="container" width="100%" height="100%">
    <mx:HBox id="scrollContainer" width="100%" height="100%">
        <!-- keep this content limited to the size of "container" -->
        <!-- I also want to use the scollers from "scrollContainer" -->
    </mx:HBox>
</mx:HBox>

现在“scrollContainer”中的内容一旦大于“container”就会溢出

编辑

显然，如果我将 HBox 更改为 Canvas，我可以获得所需的行为，但我仍然想知道如何使用 HBox 完成此操作以及它与 Canvas 不同的原因。

【问题讨论】：

标签： apache-flex actionscript-3 mxml

【解决方案1】：

maxHeight、maxWidth 属性

并回答您的其他问题。
画布 - 设置表示 X 和 Y 的对象的子级绝对定位
HBox, VBox - 子元素定位基于父元素(HBox, VBox ) 对于 HBox、VBox，如果您在子节点上设置 x 或 y，您将不会注意到任何变化，父节点会覆盖它。

【讨论】：

【解决方案2】：

如果您将外部 HBox 上的verticalScrollPolicy 和horizontalScrollPolicy 设置为“关闭”，您也许可以做到这一点。这是最好使用单个顶级 HBox 完成的事情 - HBox 的存在是为了为您的控件提供水平布局，因此以 100% 将一个嵌套在另一个内部可以为您提供两级嵌套，而没有任何功能差异。

您使用 Canvas 的解决方案听起来比您最初要求的布局更好，因为 Canvas 是一个更轻量级的控件，但如果您没有另一个控件，它仍然无济于事子控件。

【讨论】：

【解决方案3】：

我认为你应该可以通过这样设置宽度来做到这一点：

<mx:HBox id="container" width="100%" height="100%">
    <mx:HBox id="scrollContainer" width="{container.width}" height="{container.height}">
        <!-- keep this content limited to the size of "container" -->
        <!-- I also want to use the scollers from "scrollContainer" -->
    </mx:HBox>
</mx:HBox>

【讨论】：