Question

我有以下应用程序，我在运行时动态加载标签，我需要它们每X秒更新一次（示例中为3）。什么是防止与移除孩子相关的闪烁，然后在非常慢的互联网连接更新期间重新添加孩子的最佳方法？我希望这是无缝的。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            width="100%" height="100%" 
            creationComplete="init()">
<mx:Script>
    <![CDATA[
        import mx.containers.HBox;
        import mx.controls.Button;
        import mx.controls.Label;

        private var timer:Timer;

        protected function init():void
        {
            updateContainer();
            timer = new Timer(3000);
            timer.addEventListener(TimerEvent.TIMER, updateContainer);
            timer.start();
        }

        private function updateContainer(evt:TimerEvent = null):void
        {
            trace("update");
            container.removeAllChildren();

            for(var i:int = 0; i < 50; i++){
                var myHBox:HBox = new HBox();
                myHBox.percentWidth = 100;
                myHBox.setStyle("backgroundColor", "#FFFFFF");
                var myLabel:Label = new Label();
                myLabel.text = "Hello World " + i;

                myHBox.addChild(myLabel);
                container.addChild(myHBox);
            }
        }
    ]]>
</mx:Script>    

<mx:VBox id="container" />

</mx:Application>

Answer 1

您的问题是无法保证您可以在一次更新中执行操作（“删除所有元素”和“添加新子项”）。实际上，它绝对肯定会在至少两次更新中发生 - 一次用于删除，另一次用于添加。闪烁是由两次更新之间的短暂时间框架引起的。

最简单的解决方法是重复使用已创建的组件，而不是在每个计时器更新时花费大量创建50个带标签的容器。通过一些更多的努力，您可以动态创建和删除新组件或使用绑定。

以下是对代码重用的代码的快速修改。您不会在此处遇到闪烁，因为标签只在一次更新中更改。

<?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" minWidth="955" minHeight="600"
           creationComplete="init()">
<fx:Script>
    <![CDATA[
        import mx.containers.HBox;
        import mx.controls.Button;
        import mx.controls.Label;

        private var timer:Timer;
        private var labels:Array = [];

        protected function init():void
        {
            updateContainer();
            timer = new Timer(1000);
            timer.addEventListener(TimerEvent.TIMER, updateContainer);
            timer.start();
            initContainers();
        }

        private function initContainers():void
        {
            labels = [];
            for (var i:int = 0; i < 50; i++)
            {
                var myHBox:HBox = new HBox();
                myHBox.percentWidth = 100;
                myHBox.setStyle("backgroundColor", "#FFFFFF");
                var myLabel:Label = new Label();
                myHBox.addChild(myLabel);
                container.addChild(myHBox);
                labels.push(myLabel);
            }
        }

        private function updateContainer(evt:TimerEvent = null):void
        {
            trace("update");

            for(var i:int = 0; i < 50; i++)
            {
                if (labels[i] != null)
                {
                    (labels[i] as Label).text = "Hello World " + i + " " + (new Date).time;
                }
            }
        }
    ]]>
</fx:Script>
<mx:VBox id="container" />

如何防止flex中与addChild相关的闪烁？

1 个答案: