1

我有以下应用程序，我在运行时动态加载标签，我需要它们每 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>
4

1 回答 1

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" />

于 2012-09-24T09:22:18.213 回答