Flex：转换状态更改后无法正确呈现内容

Question

我有一个具有2个状态的组件，并且我添加了状态之间切换的转换，其中2个Move影响应用于2个不同的对象。这一切都很好，但是，从第一个状态转换到第二个状态后，第二个状态没有正确呈现。它包含一个不可见的TextInput控件，以及一个带有自定义皮肤的按钮，该按钮有时仅可见，如果点击该按钮就会消失。在加载第二个状态之后，我尝试调用invalidateDisplayList（）和validateNow（），但没有做任何事情。我也有一个VBRX的cornerRadius属性设置，奇怪的是，这似乎不适用了，角落是方形的，他们在我添加过渡之前正确显示。有没有人有任何想法？

谢谢！

这里是我的国家和他们的转换代码：

<!-- different states of this component --> 
<mx:states> 
    <s:State name="useForFree" 
      enterState="renderState()"/> 
    <s:State name="enterLicence" 
      enterState="renderState()"/> 
</mx:states> 


<!-- transitions between different states --> 
<mx:transitions> 

    <!-- transition from useForFree to enterLicence state --> 
    <s:Transition id="toEnterLicence" 
        fromState="useForFree" 
        toState="enterLicence"> 
     <s:Parallel id="p1" 
        targets="{[freeBtn, _enterLicenceMask]}">    
      <s:Move yFrom="250" 
        yTo="0" 
        duration="500" 
        targets="{[freeBtn]}"/> 
      <s:Move yFrom="289" 
        yTo="39" 
        duration="500" 
        targets="{[_enterLicenceMask]}"/> 
     </s:Parallel>  
    </s:Transition> 

    <!-- transition from enterLicence to useForFree state --> 
    <s:Transition id="toUseForFree" 
        fromState="enterLicence" 
        toState="useForFree"> 
     <s:Parallel id="p2" 
        targets="{[enterLicenceBtn, _useForFreeMask]}">    
      <s:Move yFrom="0" 
        yTo="240" 
        duration="500" 
        targets="{[enterLicenceBtn]}"/> 
      <s:Move yFrom="-250" 
        yTo="0" 
        duration="500" 
        targets="{[_useForFreeMask]}"/> 
     </s:Parallel>  
    </s:Transition> 
</mx:transitions> 

这里是我的布局代码：

<mx:Canvas id="freeStateCanvas" 
      width="100%"> 

    <mx:VBox width="100%" 
      horizontalAlign="center" 
      top="0" 
      mask="{_useForFreeMask}"> 

     <mx:VBox id="freeBox" 
       includeIn="useForFree"> 
      <s:Label text="some text"/> 
      <s:Spacer height="20"/> 
      <s:Image source="image path"/> 
      <s:Spacer height="20"/> 
      <mx:Button id="connectBtn"/> 
      <s:Spacer height="10"/> 
      <mx:HBox > 
       <s:Label text="some text"/>/> 
      </mx:HBox> 
     </mx:VBox> 

     <s:Label text="some text" 
       includeIn="useForFree"/>   
    </mx:VBox> 

     <mx:Button id="enterLicenceBtn" 
        includeIn="useForFree"/> 

</mx:Canvas> 

<!-- enter licence state --> 

<mx:Canvas id="enterLicenceStateCanvas" 
      width="100%"> 

     <mx:VBox id="enterLicenceBox"      
       mask="{_enterLicenceMask}" 
       includeIn="enterLicence"> 

      <s:Label text="some text"/> 
      <s:Spacer height="20"/> 
      <s:TextInput id="licenceInput" 
         width="200" 
         height="30"/> 
      <s:Spacer height="20"/> 
      <mx:Button id="registerBtn"/> 
      <s:Spacer height="10"/> 
      <mx:HBox> 
       <s:Label text="some text"/> 
       <s:Label text="some more text"/> 
      </mx:HBox> 
     </mx:VBox> 

     <mx:Button id="freeBtn" 
        includeIn="enterLicence"/> 

</mx:Canvas> 

其中的变量被设置为面具是UIComponent实例我已经使用他们的图形属性绘制一个矩形。

Answer 1

好的，所以我找到了问题所在，但是谢谢你帮助shaunhusain。

在我的代码中，你可以看到我有2个VBox容器，名为“freeBox”和“enterLicenceBox”，这些实际上有一个白色背景和圆角，以及应用于它们的DropShadowFilter（在放置代码时我删除了这些属性因为我觉得他们是无关紧要的，那是一个错误）。

这DropShadowFilter是我的所有问题的原因，并删除它，转换工作正常，所有内容都正确呈现。我认为这只是一个奇怪的Flex错误，我没有找到解决方法，我只是使用图像作为快速修复的背景框。