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

問題は、1 回の更新で操作 ( 「すべての要素を削除」および「新しい子を追加」 ) を実行できることが保証されていないことです。実際、少なくとも 2 回の更新 (1 回は削除用、もう 1 回は追加用) でそれらが発生することは絶対に確実です。ちらつきは、2 つの更新の間の短い時間枠によって発生します。

最も簡単な解決策は、タイマーの更新ごとにラベル付きの 50 個のコンテナーを作成するという骨の折れる作業の代わりに、既に作成されたコンポーネントを再利用することです。もう少し努力すれば、新しいコンポーネントを動的に作成および削除したり、バインディングを使用したりできます。

コンポーネントの再利用によるコードの簡単な変更を次に示します。ラベルは 1 回の更新で変更されるため、ちらつきは発生しません。

<?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 に答える