如何判断控件何时第一次可见？

Question

我有一个包含 TabNavigator 控件的弹出窗口。加载弹出窗口时，选项卡会动态添加到 TabNavigator。有没有一种好方法可以从选项卡本身判断何时加载其中一个选项卡？

我有一个需要进行服务调用的选项卡，并且我不希望进行服务调用，除非用户实际单击该选项卡来查看它。当 TabNavigator 索引更改时，我可以从弹出控件本身通知选项卡，但这似乎不是一个好方法。我想知道是否有一个事件或我可以挂钩的东西可以让我知道第一次需要渲染选项卡（从选项卡控件本身内部）。提前致谢！

Answer 1

我想我不太明白这个问题，所以我再尝试一下。我认为这段代码可以解决您的问题。

诀窍是将组件的创建策略设置为“无”。 Flex 将创建选项卡，但不会创建组件本身。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="onCreationComplete()" layout="vertical" minWidth="955" minHeight="600">
<mx:TextArea id="log" width="100%" height="500"/>

<mx:Script>
    <![CDATA[
        import mx.containers.Canvas;
        import mx.events.FlexEvent;
        private function onCreationComplete():void{
            var canv:Canvas = new Canvas();
            canv.label = "One";
            canv.addEventListener(FlexEvent.CREATION_COMPLETE,onCreateTab);
            canv.creationPolicy="none";
            tn.addChild(canv);
            canv = new Canvas();
            canv.label = "Two";
            canv.addEventListener(FlexEvent.CREATION_COMPLETE,onCreateTab);
            canv.creationPolicy="none";
            tn.addChild(canv);
            canv = new Canvas();
            canv.label = "Three";
            canv.addEventListener(FlexEvent.CREATION_COMPLETE,onCreateTab);
            canv.creationPolicy="none";
            tn.addChild(canv);
        }

        private function onCreateTab(event:Event):void{
            log.text+=event.currentTarget.label+ " created for the very first time\n";
        }
    ]]>
</mx:Script>    
<mx:TabNavigator id="tn" width="500"/>
</mx:Application>

Answer 2

有一个名为“FlexEvent.SHOW”的事件应该适合您。请参阅：http://help.adobe .com/en_US/FlashPlatform/reference/actionscript/3/mx/events/FlexEvent.html#SHOW

您可以将其放在 TabNavigator 上。即

<mx:TabNavigator>
   <comp:SomeComp show="doSomething()" label="My Tab"/>
</mx:TabNavigator>

或者你可以将它放在你的组件中。即，

<mx:Canvas show="doSomething">
<!-- My Component-->
</mx:Canvas>

如果您设置了创建策略，您也可以在创建完成时执行此操作，但只会在第一次创建选项卡时发生。

运行示例：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600">
    <mx:TextArea id="log" width="100%" height="500">

    </mx:TextArea>
    <mx:TabNavigator width="500">
        <mx:Canvas label="One" show="{log.text+='One Clicked\n';}"/>
        <mx:Canvas label="Two" show="{log.text+='Two Clicked\n';}"/>
        <mx:Canvas label="Three" show="{log.text+='Three Clicked\n';}"/>
        <mx:Canvas label="Four" show="{log.text+='Four Clicked\n';}"/>
    </mx:TabNavigator>
</mx:Application>

使用动态选项卡。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="cc()" layout="vertical" minWidth="955" minHeight="600">
<mx:TextArea id="log" width="100%" height="500">

</mx:TextArea>

<mx:Script>
    <![CDATA[
        import mx.containers.Canvas;
        import mx.events.FlexEvent;
        private function cc():void{
            var canv:Canvas = new Canvas();
            canv.label = "One";
            canv.addEventListener(FlexEvent.SHOW,onShow);
            tn.addChild(canv);
            canv = new Canvas();
            canv.label = "Two";
            canv.addEventListener(FlexEvent.SHOW,onShow);
            tn.addChild(canv);
        }

        private function onShow(event:Event):void{
            log.text+=event.currentTarget.label+ " clicked\n";
        }
    ]]>
</mx:Script>

<mx:TabNavigator id="tn" width="500">
</mx:TabNavigator>
</mx:Application>

Answer 3

阅读 Flex 组件生命周期。根据您的描述，我可能会监听选项卡内容上的creationComplete 事件。