Flex状态转换

Question

我试图创建状态之间的转换。第一个状态转换工作正常（状态1 =>状态2），但第二状态转换很奇怪（状态2 =>状态3）。点击按钮更改 state2 => state3后，某些属于state2的文本区域出现并保留在屏幕上。我不知道为什么。如果有人能帮助我，我将不胜感激。

我的代码。

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 

    <fx:Script> 
     <![CDATA[ 
      protected function btn1_clickHandler(event:MouseEvent):void 
      { 
       currentState="state2"; 
      } 

      protected function btn2_clickHandler(event:MouseEvent):void 
      { 
       currentState="state3"; 
      } 



     ]]> 
    </fx:Script> 

    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 





    <s:states> 
     <s:State name="state1"/> 
     <s:State name="state2"/> 
     <s:State name="state3"/> 
    </s:states> 


    <s:transitions> 

     <s:Transition toState="state2" > 
      <s:Parallel> 

      <s:Move targets="{[btn1,btn2]}" /> 
      <s:AddAction targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" /> 
      <s:Fade targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}"/> 

      </s:Parallel> 

     </s:Transition> 
     <s:Transition toState="state3" > 
      <s:Fade targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}"/> 

     </s:Transition> 

    </s:transitions> 


    <s:Label y="10" text="label1" id="label1" includeIn="state2" /> 
    <s:TextInput y="30" id="textInput1" includeIn="state2" /> 
    <s:Label y="50" text="label1" id="label2" includeIn="state2" /> 
    <s:TextInput y="70" id="textInput2" includeIn="state2" /> 
    <s:Label y="90" text="label1" id="label3" includeIn="state2" /> 
    <s:TextInput y="120" id="textInput3" includeIn="state2" /> 



    <s:Button y="180" y.state2="350" label="btn1" id="btn1" click="btn1_clickHandler(event)"/> 
    <s:Button y="250" y.state2="550" label="btn2" id="btn2" click="btn2_clickHandler(event)"/> 



</s:Application> 

Answer 1

您的代码示例看起来不完整。我认为我们需要看到的不仅仅是国家和转型。如果您可以提供完整的运行样本，这将有所帮助。

我认为这是一个示例问题，但在当前代码中，不会在文档中创建到状态的转换。既然你有三个状态，你可能想添加一个'fromState'并明确设计从/到每个状态的转换。

如果我不得不猜测，您可能需要在相关组件上指定'includeIn'属性。你可以用逗号分隔状态的列表中，这样的事情：

<s:Component includeIn="a" /> 
<s:Component includeIn="b,c" /> 
<s:Component includeIn="a,c" /> 

其中第一种成分会出现在状态，第二个出现在状态B和C，而第三部分将出现在状态和c。

---

更新海报代码：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 

    <fx:Script> 
     <![CDATA[ 
      protected function btn1_clickHandler(event:MouseEvent):void 
      { 
       currentState="state2"; 
      } 

      protected function btn2_clickHandler(event:MouseEvent):void 
      { 
       currentState="state3"; 
      } 



     ]]> 
    </fx:Script> 

    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 



    <s:states> 
     <s:State name="state1"/> 
     <s:State name="state2"/> 
     <s:State name="state3"/> 
    </s:states> 


    <s:transitions> 

     <s:Transition toState="state2" > 
      <s:Parallel> 

       <s:Move targets="{[btn1,btn2]}" /> 
       <!--<s:AddAction targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" /> --> 
       <s:Fade targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" alphaFrom="0" alphaTo="1"/> 

      </s:Parallel> 

     </s:Transition> 
     <s:Transition toState="state3" > 
      <s:Parallel> 
<!--    <s:Move targets="{[btn1,btn2]}" />--> 
       <!--<s:RemoveAction targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" /> --> 
       <s:Fade targets="{[label1,label2,label3,textInput1,textInput2,textInput3]}" alphaFrom="1" alphaTo="0"/> 
      </s:Parallel> 

     </s:Transition> 

    </s:transitions> 


    <s:Label y="10" text="label1" id="label1" includeIn="state2" /> 
    <s:TextInput y="30" id="textInput1" includeIn="state2" /> 
    <s:Label y="50" text="label2" id="label2" includeIn="state2" /> 
    <s:TextInput y="70" id="textInput2" includeIn="state2" /> 
    <s:Label y="90" text="label3" id="label3" includeIn="state2" /> 
    <s:TextInput y="120" id="textInput3" includeIn="state2" /> 



    <s:Button y="180" y.state2="350" includeIn="state1,state2,state3" label="To State 2" id="btn1" click="btn1_clickHandler(event)"/> 
    <s:Button y="250" y.state2="550" includeIn="state1,state2,state3" label="To State 3" id="btn2" click="btn2_clickHandler(event)"/> 



</s:Application>