Question

在Flex 3中，我曾经能够拍摄2个面板，在HBox中以100％宽度设置布局。如果我将第一个面板的width属性更改为更小的值，假设为20％，则第二个面板会自动更新并填充第一个面板在第一个调整大小时占用的空间。

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

我期望的是，由于右侧面板的宽度=“100％”，如果左侧的面板调整大小，则右侧面板中会有相应的增长以填充。 / p>

我试图在没有效果的情况下手动触发属性和大小的验证。我想知道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，两个孩子都会在其中一个孩子的宽度发生变化时更新。但事实似乎并非如此。我知道我可以创造两种状态来实现这一目标，但我认为我不应该做一些如此微不足道的事情。

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

Answer 2

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

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

2 个答案: