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

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

        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 状态,而是检查每个按钮的所需状态,如果没有,则更改为所需状态;如果已经处于所需状态则更改为预定义的正常状态(如果需要,每个按钮可以不同,但最好保持正常)。

以下是在多个状态之间转换的完整示例,其中可能存在打开状态,并且您希望在转换到另一个打开状态之前保留转换动画或将其从打开状态中反转。感谢@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>