取消状态转换并直接转到另一个视图

Question

我的皮肤有3种状态。我将来可能会有更多州。但它是一个具有正常状态的工具栏，然后是一个展开的视图，其中一次只能看到一个展开的视图。

当我有两种状态时，我可以使用下面的转换代码在两者之间轻松转换。但现在我有三个州，次要国家没有关闭。如果我处于次要状态，我想首先关闭它。

以下是皮肤类的代码：

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

    <fx:Script>
        <![CDATA[
            protected function imageViewButton_clickHandler(event:MouseEvent):void
            {

                if (currentState==NORMAL_VIEW) {
                    currentState = IMAGE_VIEW;
                }
                else {
                    currentState = NORMAL_VIEW;
                }
            }

            protected function linkViewButton_clickHandler(event:MouseEvent):void
            {
                if (currentState==NORMAL_VIEW) {
                    currentState = LINK_VIEW;
                }
                else {
                    currentState = NORMAL_VIEW;
                }
            }

            public static var NORMAL_VIEW:String = "normal";
            public static var LINK_VIEW:String = "linkView";
            public static var IMAGE_VIEW:String = "imageView";
        ]]>
    </fx:Script>


    <s:transitions>
        <s:Transition fromState="normal" toState="*">
            <s:Sequence duration="250">
                <s:Resize target="{this}"/>
                <s:AddAction target="{linkViewButton}"/>
                <s:Fade target="{linkViewButton}"/>
            </s:Sequence>
        </s:Transition>

        <s:Transition fromState="linkView" toState="*">
            <s:Sequence duration="250">
                <s:Fade target="{linkViewButton}"/>
                <s:Resize target="{this}"/>
            </s:Sequence>
        </s:Transition>

        <s:Transition fromState="imageView" toState="*">
            <s:Sequence duration="250">
                <s:Fade target="{imageViewButton}"/>
                <s:Resize target="{this}"/>
            </s:Sequence>
        </s:Transition>
    </s:transitions>

    <s:states>
        <s:State name="normal"/>
        <s:State name="linkView"/>
        <s:State name="imageView"/>
    </s:states>


    <s:VGroup width="100%">
        <s:HGroup width="100%" >    
            <s:Button label="Button 1" />
            <s:Line height="100%">
                <s:stroke>
                    <s:SolidColorStroke color="#B3C2B8"/>
                </s:stroke>
            </s:Line>
            <s:ToggleButton id="gotoLinkView" label="Link Details" click="linkViewButton_clickHandler(event)"/>
            <s:Line height="100%">
                <s:stroke>
                    <s:SolidColorStroke color="#B3C2B8"/>
                </s:stroke>
            </s:Line>
            <s:ToggleButton id="gotoImageView" label="Image Details" click="imageViewButton_clickHandler(event)"/>
            <s:Line height="100%">
                <s:stroke>
                    <s:SolidColorStroke color="#B3C2B8"/>
                </s:stroke>
            </s:Line>
        </s:HGroup>

        <s:Button id="linkViewButton" label="Link View"
                  includeIn="linkView" 
                  itemCreationPolicy="immediate" width="100%"/>

        <s:Button id="imageViewButton" label="Image View"
                  includeIn="imageView" 
                  itemCreationPolicy="immediate"
                  width="100%"/>
    </s:VGroup>
</s:WindowedApplication>

Answer 1

检测到一个简单的逻辑错误。您的代码应该知道所有按钮（如果按下/释放有效则更改其状态），或者使每个按钮只知道其自己的状态并且不受其他代码的影响。根据你的方法，我说你应该做第二个变种。

        protected function imageViewButton_clickHandler(event:MouseEvent):void
        {

            if (currentState!=IMAGE_VIEW) {
                currentState = IMAGE_VIEW;
            }
            else {
                currentState = NORMAL_VIEW;
            }
        }

        protected function linkViewButton_clickHandler(event:MouseEvent):void
        {
            if (currentState!=LINK_VIEW) {
                currentState = LINK_VIEW;
            }
            else {
                currentState = NORMAL_VIEW;
            }
        }

您不应该假设您的“皮肤”处于NORMAL_VIEW状态，而是检查每个按钮的所需状态，如果不存在则更改为所需状态，并更改为预定义的正常状态（每个按钮可以不同，如果你已经处于理想状态，你应该需要，但最好是正常休假。

Answer 2

以下是在多个状态之间进行转换的完整示例，其中可能存在打开状态，并且您希望在转换到另一个打开状态之前保留转换动画或将其转换为打开状态。感谢@Vesper对逻辑错误的了解。

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx"
                       applicationComplete="windowedapplication1_applicationCompleteHandler(event)"
                       stateChangeComplete="windowedapplication1_stateChangeCompleteHandler(event)">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            public static var NORMAL_VIEW:String = "normal";
            public static var LINK_VIEW:String = "linkView";
            public static var IMAGE_VIEW:String = "imageView";

            public var deferredState:String;
            public var deferredToggle:Object;

            protected function linkViewButton_clickHandler(event:MouseEvent):void
            {
                if (currentState!=LINK_VIEW) {
                    if (currentState != NORMAL_VIEW) {
                        deferredState = LINK_VIEW;
                        currentState = NORMAL_VIEW;
                        deferredToggle = event.currentTarget;
                        deselectToggles(deferredToggle);
                        return;
                    }

                    currentState = LINK_VIEW;
                }
                else {
                    currentState = NORMAL_VIEW;
                }
            }

            protected function imageViewButton_clickHandler(event:MouseEvent):void
            {

                if (currentState!=IMAGE_VIEW) {
                    if (currentState != NORMAL_VIEW) {
                        deferredState = IMAGE_VIEW;
                        currentState = NORMAL_VIEW;
                        deferredToggle = event.currentTarget;
                        deselectToggles(deferredToggle);
                        return;
                    }

                    currentState = IMAGE_VIEW;
                }
                else {
                    currentState = NORMAL_VIEW;
                }
            }

            protected function windowedapplication1_stateChangeCompleteHandler(event:FlexEvent):void
            {
                //trace("State change complete");

                if (currentState==NORMAL_VIEW) {
                    //trace("Normal state");
                }

                if (deferredState!=null) {
                    currentState = deferredState;
                    deferredState = null;
                    deferredToggle = null;
                }
            }

            public function deselectToggles(selectedToggle:Object=null):void {
                var toggle:ToggleButton;

                for (var i:int = 0; i < toggles.length; i++) 
                {
                    toggle = toggles[i] as ToggleButton;

                    if (toggle!=selectedToggle) {
                        toggle.selected = false;
                    }
                }

            }

            protected function windowedapplication1_applicationCompleteHandler(event:FlexEvent):void
            {
                toggles.push(gotoLinkView, gotoImageView);
            }

            public var toggles:Array = [];
        ]]>
    </fx:Script>


    <s:transitions>
        <s:Transition fromState="normal" toState="linkView" interruptionBehavior="stop" autoReverse="true">
            <s:Sequence duration="250" 
                        effectStart="trace('normal to link view')"
                        >
                <s:Resize target="{borderContainer}"/>
                <s:AddAction target="{linkViewButton}"/>
                <s:Fade target="{linkViewButton}"/>
            </s:Sequence>
        </s:Transition>

        <s:Transition fromState="normal" toState="imageView" interruptionBehavior="stop" autoReverse="true">
            <s:Sequence duration="250" 
                        effectStart="trace('normal to image view')"
                        >
                <s:Resize target="{borderContainer}"/>
                <s:AddAction target="{imageViewButton}"/>
                <s:Fade target="{imageViewButton}"/>
            </s:Sequence>
        </s:Transition>

    </s:transitions>

    <s:states>
        <s:State name="normal"/>
        <s:State name="linkView"/>
        <s:State name="imageView"/>
    </s:states>


    <s:BorderContainer width="100%" id="borderContainer">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <s:HGroup width="100%" >    
            <s:Button label="Button 1" />
            <s:Line height="100%">
                <s:stroke>
                    <s:SolidColorStroke color="#B3C2B8"/>
                </s:stroke>
            </s:Line>
            <s:ToggleButton id="gotoLinkView" label="Link Details" click="linkViewButton_clickHandler(event)"/>
            <s:Line height="100%">
                <s:stroke>
                    <s:SolidColorStroke color="#B3C2B8"/>
                </s:stroke>
            </s:Line>
            <s:ToggleButton id="gotoImageView" label="Image Details" click="imageViewButton_clickHandler(event)"/>
            <s:Line height="100%">
                <s:stroke>
                    <s:SolidColorStroke color="#B3C2B8"/>
                </s:stroke>
            </s:Line>
        </s:HGroup>

        <s:Button id="linkViewButton" 
                  label="Link View" 
                  height="100"
                  includeIn="linkView" 
                  itemCreationPolicy="immediate" width="100%"/>

        <s:Button id="imageViewButton" 
                  height="100"
                  label="Image View"
                  includeIn="imageView" 
                  itemCreationPolicy="immediate"
                  width="100%"/>
    </s:BorderContainer>
</s:WindowedApplication>