表单项的创建策略

Question

我正在尝试创建一个具有平滑过渡效果的扩展表单，代码如下：

<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               currentState="Login" creationPolicy="all"
               close="PopUpManager.removePopUp(this)">

<fx:Metadata> 
    [ResourceBundle("I18N")]
</fx:Metadata>

<s:states>
    <s:State name="Login" ></s:State>
    <s:State name="Register"></s:State>
</s:states>
<fx:Script>
    <![CDATA[
        import caurina.transitions.Tweener;

        import mx.controls.Alert;
        import mx.managers.PopUpManager;
        [Bindable]private var show:Boolean = false;

        private function extendForm():void
        {
            Tweener.addTween(this, {height:320, time:1, onComplete:this.toogleMode(true)})
        }

        private function reduceForm():void
        {
            Tweener.addTween(this, {height:150, time:1, onComplete:this.toogleMode(false)});
        }

        private function toogleMode(visible:Boolean):void
        {
            this.show = visible;
            if(visible){this.setCurrentState("Register");}
            else{this.setCurrentState("Login")}
        }
    ]]>
</fx:Script>

<fx:Declarations>
    <mx:EmailValidator source="{email}" property="text" required="true"
                       trigger="{submit}" triggerEvent="click"
                       valid="Alert.show('Validation Succeeded!');"/>

    <mx:Validator source="{password}" property="text" required="true"
                  trigger="{submit}" triggerEvent="click"
                  requiredFieldError="{resourceManager.getString('I18N','requiredField')}"/>

    <mx:Validator source="{repeatpw}" property="text"
                  trigger="{submit}" triggerEvent="click"
                  required="{show}" requiredFieldError="{resourceManager.getString('I18N','requiredField')}"/>
</fx:Declarations>

<s:VGroup id="container" width="100%" height="100%" gap="10">
    <s:Group width="100%" height="100%">
        <mx:Form id="formfield" width="100%" height="100%" left="0" layoutDirection="ltr" creationPolicy="all" >
            <mx:FormItem creationPolicy="all" label="{resourceManager.getString('I18N','email')}">
                <s:TextInput id="email" 
                             width="100%"
                             maxChars="40"
                             minWidth="170" />
            </mx:FormItem>  

            <mx:FormItem creationPolicy="all" label="{resourceManager.getString('I18N','password')}">
                <mx:TextInput id="password" 
                              width="100%" 
                              displayAsPassword="true"
                              maxChars="40"
                              minWidth="170"/>
            </mx:FormItem>

            <mx:FormItem creationPolicy="all" includeIn="Register" label="{resourceManager.getString('I18N','repeatpw')}">
                <s:TextInput id="repeatpw" 
                             width="100%"
                             displayAsPassword="true"
                             maxChars="40"
                             minWidth="170" />
            </mx:FormItem>  
        </mx:Form>
    </s:Group>

    <s:HGroup width="100%">
        <s:Group>
            <s:Button includeIn="Login" enabled="{!show}" label="{resourceManager.getString('I18N','register')}" left="5" bottom="5" click="{this.extendForm()}"/>
            <s:Button includeIn="Register" enabled="{show}" label="{resourceManager.getString('I18N','login')}" left="5" bottom="5" click="{this.reduceForm()}"/>

        </s:Group>
        <mx:Spacer width="100%" height="100%"/>
        <s:HGroup>
            <s:Button label="{resourceManager.getString('I18N','submit')}" id="submit"/>
            <s:Button label="{resourceManager.getString('I18N','cancel')}" click="PopUpManager.removePopUp(this)" />
        </s:HGroup>
    </s:HGroup>
</s:VGroup>

但这样做的问题是，即使将creationPolicy设置为all，似乎也不是所有项目都被初始化。这会导致第一次单击“注册”按钮时补间动画出现滞后。第一次点击后，动画很流畅。

谁能告诉我我做错了什么或者是什么导致动画滞后？

Answer 1

我认为你的问题是，即使一切都已创建，但在状态已知之前无法进行布局。

因此，我建议您避免对转换进行微观管理，而是依靠与 Spark 架构完美集成的效果语法。 http://help.adobe.com/en_US/Flex/4.0 /UsingSDK/WS2db454920e96a9e51e63e3d11c0bf600c1-7fff.html

因此，不要将creationPolicy设置为“all”，而是在主组件中设置一个height.Register和一个height.Login。如果您设置了一个 fromState 为 * 且 toState 为 * 的转换，以及一个以此为目标但没有参数的调整大小效果（除非您可能想要调整持续时间），您应该会发现这会变得容易得多。