水平布局：mx vs spark - 调整孩子的大小答案

【问题标题】：Horizontal Layout: mx vs spark - Resizing children水平布局：mx vs spark - 调整孩子的大小
【发布时间】：2011-11-06 05:11:03
【问题描述】：

在 Flex 3 中，我曾经能够使用 2 个面板，在 HBox 中以 100% 的宽度设置将它们布置好。如果我将第一个面板的宽度属性更改为更小的值，比如 20%，第二个面板会自动更新并填充第一个面板在缩小第一个面板时占用的空间。

我在 spark 中注意到，这不会发生。我有一个带有 HorizontalLayout 的应用程序，左侧有一个可调整大小的面板控件，右侧有一个宽度 =“100%”的面板。当我向下调整左侧面板的大小时，右侧面板不执行任何操作。所以我最终得到了一个干净的可调整大小的面板，一堆浪费的空间，而我的右侧面板就坐在那里。

我期望的是，由于右侧面板的宽度为“100%”，那么如果调整其左侧面板的大小，则右侧面板中会有相应的增长来填充。

我尝试手动触发对属性和大小的验证，但没有效果。我想知道 HorizontalLayout 中的哪些变化不再允许这种技术工作。我也想知道有哪些解决方案？

这里有一些 chomp chomp：

<mx:Application>

   <mx:Script>
      <![CDATA[

         protected function resizeClick(event:MouseEvent):void
         {
            pnl1.percentWidth = 10;  // When this would execute, pnl2 would automatically
                                     // fill in the space previously held by pnl1.
         }

      ]]>
   </mx:Script>
   <mx:HBox width="100%" height="100%">
      <mx:Panel id="pnl1" width="40%" height="100%">  // Uses 40%
         <mx:Button id="resizeButton" click="resizeClick(event)"/>
      </mx:Panel>
      <mx:Panel id="pnl2" width="100%" height="100%"/>  // Fills in the rest of the available space
   </mx:HBox>
</mx:Application>

当 pnl1 的大小发生变化时，Flex 4.5 不会自动更新 pnl2 的大小。我认为由于使用了 HorizontalLayout，因此当其中一个的宽度发生更改时，两个孩子都会更新。但这似乎并非如此。我知道我可以创建两个状态来完成此操作，但我认为我不应该为如此微不足道的事情而这样做。

【问题讨论】：

标签： actionscript-3 apache-flex layout flex4 flex3

【解决方案1】：

此示例工作正常，并说明了尺寸的正确变化：

<?xml version="1.0" encoding="utf-8"?>
<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
    <s:VGroup height="100%" width="100%">
        <s:HSlider change="firstPanel.percentWidth = event.currentTarget.value" maximum="100" minimum="0"
            value="{firstPanel.percentWidth}" />
        <s:HGroup height="100%" width="100%">
            <s:Panel height="100%" id="firstPanel" minWidth="0" width="40%" />
            <s:Panel height="100%" width="100%" />
        </s:HGroup>
    </s:VGroup>
</s:Application>

【讨论】：

感谢您的评论。如果我们有一些“进行”百分比调整的控件，则此示例可以正常工作。在我的情况下，我使用了一个“可折叠面板”，当单击可折叠面板标题按钮时，它会自行增长和缩小。我试图让面板 2 在面板 1 的大小发生变化时自动调整其大小。

【解决方案2】：

这就是我最终解决这个问题的方法。我应该在我的帖子中更具体地解释一下 Panel 1 实际上是一个“可折叠”面板，只要单击其标题按钮，它就会修改自己的大小。上面的示例确实有效，但是由于视图上没有数字控件来“告诉”panel.percentWidth 属性要更改多少，因此我将可折叠面板设置为调度由包装器处理的自定义事件。自定义事件基本上表明可折叠面板发生了什么。从那里，我可以分别处理事件，然后控制面板 2 的大小。

解决方案实际上相当简单，我希望有更多“幕后”的东西，但效果很好。

<s:Application initialize="initApp(event)">

   <fx:Script>
      <![CDATA[

         protected function initApp(event:FlexEvent):void
         {
              this.addEventListener("PanelCollapse", panelHandler);
              this.addEventListener("PanelNormal", panelHandler);
         }    

         protected function panelHandler(event:Event):void
         {
             switch(event.type)
             {
                case "PanelCollapse":
                   pnl2.percentWidth = 100;
                   break;
                case "PanelNormal":
                   pnl2.percentWidth = 60;
                   break;
             }
         }
      ]]>
   </fx:Script>

      <comp:CollapsiblePanel id="pnl1" width="40%" height="100%">

      </mx:Panel>
      <s:Panel id="pnl2" width="100%" height="100%"/>  // Fills in the rest of the available space

</s:Application>

【讨论】：