Flex viewstack 子项 includeIn 作品很有趣

Question

我有一个带有子项的视图堆栈，我想根据应用程序所处的状态显示/隐藏它，

    <?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" 
               xmlns:eworx="com.eworx.*"
               xmlns:view="com.eworx.view.*" 
               xmlns:components="com.eworx.view.components.*"
               skinClass="com.eworx.view.skins.MainAppSkin" 
               xmlns:layouts="com.eworx.view.layouts.*"
               currentState="login"
               initialize="init(event)"
               creationComplete="complete(event)" 
               width="100%" 
               height="100%">


    <fx:Style source="assets/css/screen.css" />
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.core.FlexGlobals;
            import mx.events.FlexEvent;

            import nl.demonsters.debugger.MonsterDebugger;

            private var debugger:MonsterDebugger;

            [Bindable]
            public var apiUrl:String;

            [Bindable]
            public var customerType:String;



            protected function init(event:FlexEvent):void
            {
                debugger = new MonsterDebugger(this);
            }

            protected function complete(event:FlexEvent):void
            {
                var activated:Boolean = FlexGlobals.topLevelApplication.parameters.activated;
                var passwordReset:Boolean = FlexGlobals.topLevelApplication.parameters.passwordReset;
                var message:String = FlexGlobals.topLevelApplication.parameters.message;

                apiUrl = FlexGlobals.topLevelApplication.parameters.apiUrl;

                if(activated)
                {
                    Alert.show(message,"Notice");
                }

                if(passwordReset)
                {
                    Alert.show(message,"Notice");
                }

                systemManager.addEventListener(MouseEvent.MOUSE_WHEEL,onMouseWheel,true);

            }

            private function onMouseWheel(e:MouseEvent):void
            {
                e.delta *= 5;
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <eworx:Seven7Context contextView="{this}" />
        <s:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="300" />
        <s:Fade id="fadeOut" alphaFrom="1" alphaTo="0" duration="300" />
        <s:Rotate3D id="r3d" angleYFrom="0" angleYTo="360"  duration="300" />
    </fx:Declarations>

    <s:states>
        <s:State name="login" />
        <s:State name="wholesale"  />
        <s:State name="retail"  />
    </s:states>

    <view:LoginForm id="loginForm" includeIn="login" horizontalCenter="0" verticalCenter="0" />

    <s:Group excludeFrom="login" width="960" horizontalCenter="0">

        <s:BitmapImage width="100%" height="42" x="13" y="80" source="@Embed('assets/garnish/bar.png')" />
        <mx:Image source="assets/garnish/logo.png" top="23" />

        <s:HGroup verticalAlign="middle" x="198" y="47">
            <s:TabBar  skinClass="MainMenuTabBarSkin" dataProvider="{vs}"  buttonMode="true"/>
            <mx:LinkButton id="logout" label="Logout" click="{currentState='login'}" />
        </s:HGroup>

        <s:HGroup top="0" right="0" gap="1" verticalAlign="top">
            <components:OfferList />
            <components:MarginBuildersTrack />
            <components:CartTrack top="0" />
        </s:HGroup>

        <mx:ViewStack 
            id="vs" 
            top="120"
            horizontalCenter="0" 
            width="960" 
            height="100%" 
            resizeToContent="true" >
            <view:HomePage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="Home" />
            <view:ShowroomPage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="Showroom" />
            <view:CataloguePage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="Catalogue" />
            <!--<view:IncentivesPage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="Incentives" />-->
            <view:RetailCustomerProfilePage includeIn="retail" showEffect="{fadeIn}" hideEffect="{fadeOut}" label="My Profile" />
            <view:WholesaleCustomerProfilePage includeIn="wholesale" showEffect="{fadeIn}" hideEffect="{fadeOut}" label="My Profile" />
            <view:ClientsPage excludeFrom="retail,login" showEffect="{fadeIn}" hideEffect="{fadeOut}" label="My Clients" />
            <view:CartPage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="My Cart" />
            <view:OrdersPage showEffect="{fadeIn}" hideEffect="{fadeOut}" label="My Orders" />
        </mx:ViewStack>
    </s:Group>

</s:Application>

正如您所看到的，我包括零售状态下的零售客户视图和批发状态下的批发客户视图。问题是，当我运行我的应用程序时，它们不会出现在这两种状态下。

有什么想法吗？

Answer 1

这对我来说是一种奇怪的方法。 ViewStack 的全部目的是一次仅显示一项。这是一种非常奇怪的方法。

我看到你有一个标签栏，其 dataProvider 是 ViewStack。但是，您的 ViewStack 不是作为组件上的可绑定属性创建的，并且您似乎从未设置初始状态。因此，我推测这种情况正在发生：

1. 默认状态下的应用程序加载，即空字符串
2. ViewSTack 和/或 TabBar 在没有这些子应用程序状态更改的情况下初始化，
3. 由于某种原因
4. TabBar 不更新

CreationPolicy 也可能发挥作用，但我'我不确定。您必须单步执行代码才能弄清楚发生了什么。我强烈建议您考虑采用替代方法。可能根据用户安全设置或当前状态手动创建选项卡导航器 dataProvider。