Question

我有一个具有2个状态的组件，并且我添加了用于在状态之间切换的转换，其中2个移动影响应用于2个不同的对象。这一切都很好，但是，在从第一个状态到第二个状态的转换完成后，第二个状态无法正确呈现。它包含一个不可见的TextInput控件，以及一个带有自定义外观的Button，它有时只是可见，如果单击它就会消失。我在加载第二个状态后尝试调用invalidateDisplayList（）和validateNow（）但没有做任何事情。我也有一个带有cornerRadius属性集的VBox，奇怪的是这似乎不再适用了，角落是方形的，在我添加转换之前它们正确显示。有没有人有任何想法？

谢谢！

以下是我的州及其过渡的代码：

<!-- 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实例，其中我使用了他们的graphics属性来绘制矩形。

Answer 1

好的，所以我发现了问题所在，但感谢您试图帮助shaunhusain。

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

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

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

1 个答案: