水平佈局：mx vs spark - 調整兒童大小

Question

在Flex 3中，我曾經能夠使用2個面板，在HBox中將其寬度設置爲100％。如果我將第一個面板的寬度屬性更改爲更小，比如說20％，那麼第二個會自動更新並填充第一個調整大小時第一個佔用的空間。

我注意到火花，這不會發生。我有一個Horizo​​ntalLayout應用程序，左側有一個可調整大小的面板控件，右側有一個寬度爲「100％」的面板。當我調整左側面板的大小時，右側面板不會執行任何操作。所以我最終得到了一個乾淨的可調整大小的面板，一堆浪費的空間，還有我的右側面板就坐在那裏。

我期望的是，由於右側面板的寬度爲「100％」，因此如果其左側的面板被調整大小，那麼右側面板中將會有相應的增長以填充。

我試過手動觸發驗證屬性和大小沒有效果。我想知道在Horizo​​ntalLayout中發生了什麼變化，不再允許這種技術工作。我也想知道哪些解決方案可用？

下面是一些格格格格：

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

Flex 4.5中不會自動更新PNL2的大小時的PNL1的大小變化。我會認爲，因爲正在使用Horizo​​ntalLayout，當兩個孩子的寬度發生變化時，這兩個孩子都會更新。但似乎並非如此。我知道我可以創建兩個狀態來完成這個任務，但是我在想，我不應該爲了一件如此微不足道的事情。

Answer 1

因此，這是多麼我最終解決了這個問題。在我的文章中，我應該更具體一些，以解釋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> 

Answer 2

此示例工作正常，並說明了大小的正確的變化：

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