Flex - 在向父级添加子级之前播放调整大小效果

Question

我有一个面板，里面有一个按钮。单击该按钮将指示面板进入“State2”状态，将另外两个按钮添加到面板中。在状态更改期间，我希望面板先调整大小，然后显示新添加的两个按钮，因此我将转换应用于状态更改。

我的问题是：

如果我将两个按钮直接放在 addChild 标记下的 HBox 中，它就可以正常工作。但是，如果我使用相同的代码创建一个新组件（其中有两个按钮的 HBox），然后将新组件添加到面板（注释代码中的 Comp），它不会显示调整大小的效果。

谁能告诉我如何解决这个问题？提前致谢。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">

    <mx:Script>
        <![CDATA[
            protected function button1_clickHandler(event:MouseEvent):void
            {
                currentState="State2";
            }
        ]]>
    </mx:Script>

    <mx:transitions>
        <mx:Transition>
            <mx:Sequence targets="{[comp,panel1]}">
                <mx:Resize target="{panel1}" />
                <mx:AddChildAction />
            </mx:Sequence>
        </mx:Transition>
    </mx:transitions>

    <mx:states>
        <mx:State name="State2">
            <mx:AddChild relativeTo="{panel1}" position="lastChild">
                <mx:HBox id="comp">
                    <mx:Button label="B" />
                    <mx:Button label="C" />
                </mx:HBox>
                <!--<local:Comp id="comp" />-->
            </mx:AddChild>

        </mx:State>
    </mx:states>

    <mx:Panel layout="horizontal" borderThickness="1" borderStyle="solid" id="panel1" title="AB">
        <mx:Button label="A" click="button1_clickHandler(event)"/>
    </mx:Panel>
</mx:Application>

Answer 1

我猜<mx:AddChild> 标签一次只能处理一个组件。

如果您将自定义组件与另一个 <mx:AddChild> 标记分开，您将获得甜蜜的调整大小效果，类似于以下代码：

<mx:AddChild relativeTo="{panel1}" position="lastChild">
      <mx:HBox id="comp">
           <mx:Button label="B" />
           <mx:Button label="C" />
           <!-- Don't put your custom component here. --> 
      </mx:HBox>
</mx:AddChild> 
<!-- Use separated AddChild. Still add to same relativeTo object  -->           
<mx:AddChild relativeTo="{panel1}" position="lastChild">
     <local:Comp id="comp2" />
</mx:AddChild>

希望你得到你想要的。