flex 中的可折叠布局

Question

我刚刚完成了掌握 flex 的第一个月。到目前为止，我的所有项目都是非常小的固定大小的容器，应用程序中的所有内容都处于绝对位置。

下一个即将到来的项目将需要更动态的布局并需要一些建议。

该应用将包含 3 个容器（尚不确定要使用哪些）

容器 1

将是应用的整个宽度和高度的四分之一。

容器 2 将位于 Container 1 下方。它将是应用宽度的一半和高度的四分之三。

容器 3 将与容器 2 相同。

我希望能够折叠每个容器并让其他容器对此做出响应。

例如，我想折叠容器 1，使容器 2 和 3 从 3 quaters 高度变为 100% 高度。

如果我折叠容器 2，容器 1 保持不变，但容器 3 从应用程序宽度的一半变为宽度的 100%。

这种事情会不会很难做。 从哪里开始研究这个的好地方。

一个教程的链接会很棒，或者提供一些小建议，做/不要做也会有很大的帮助。

谢谢大家，

配音

Answer 1

我是凭记忆写的（因为我现在没有FB来测试它），所以如果这不起作用，请告诉我，我会删除它。

<mx:VBox width="800" height="600">
  <custom:Comp1 width="100%" height="25%"/>
  <mx:HBox width="100%" height="75%">
    <custom:Comp2 width="50%" height="100%"/>
    <custom:Comp3 width="50%" height="100%"/>
  </mx:HBox>
</mx:VBox>

当您折叠某些内容时，将其 width 和 height 设置为零。展开它时，将其percentWidth 和percentHeight 设置为其原始值。

尝试在任何地方使用 100%，看看是否有效；如果没有，请使用给定的值并按照以下步骤操作：

• 折叠comp1时，将hbox的percentHeight设置为100
• 折叠comp2或comp3时，将对方的percentWidth设置为100。
• 恢复展开时的值。