Actionscript 3 水平布局：mx与spark-调整子级大小

在Flex3中，我曾经能够拿2个面板，在HBox中以100%宽度设置进行布局。如果我将第一个面板的width属性更改为更小的值，比如说20%，第二个面板将自动更新并填充第一个面板在第一个面板缩小时占用的空间

我注意到在spark中，这并没有发生。我有一个带有水平布局的应用程序，左侧有一个可调整大小的面板控件，右侧有一个宽度为100%的面板。“当我向下调整左侧面板的大小时，右侧面板没有任何作用。所以我最终得到了一个干净的可调整大小的面板，一堆浪费的空间，我的右侧面板就在那里

我所期望的是，由于右侧面板的宽度为=“100%”，因此如果调整左侧面板的大小，则右侧面板中的填充将相应增加

我试图手动触发对属性和大小的验证，但没有效果。我想知道是什么改变了水平布局，不再允许这种技术工作。我还想知道有哪些解决方案

这里有一些大嚼大嚼：

<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>

//使用40%
//填充剩余的可用空间

---

当pnl1的大小更改时，Flex 4.5不会自动更新pnl2的大小。我认为既然使用了水平布局，当其中一个的宽度改变时，两个孩子都会更新。但事实似乎并非如此。我知道我可以创建两种状态来实现这一点，但我认为我不应该为如此琐碎的事情创建状态。

此示例运行良好，并说明了正确的大小更改：

<?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>

---

所以这就是我最终解决这个问题的方法。在我的帖子中，我应该更具体地解释一下，Panel1实际上是一个“可折叠”的面板，只要点击它的标题按钮，它就会修改自己的大小。上面的示例确实有效，但由于视图上没有数字控件“告诉”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>

//填充剩余的可用空间

谢谢您的评论。如果我们有一些控件正在“执行”百分比调整，那么这个示例可以很好地工作。在我的例子中，我使用的是一个“可折叠面板”，当单击可折叠面板标题按钮时，它会自行增长和收缩。我试图让面板2在面板1的大小改变时自动调整其大小。