3

私は現在、iPad2 をハードウェア プラットフォームとしてターゲットにしている Adob​​e AIR アプリケーションに取り組んでおり、画面の 1 つで適切なスクロール パフォーマンスを得ることができません。次のようなカスタム アイテム レンダラーを使用して、スパーク リストを使用しています。

<s:List id="productList" top="116" bottom="0" left="10" right="10" 
    width="100%"
    visible="true" includeInLayout="true"
    height="0"
    maxHeight="500"
    opaqueBackground="#ffffff"
    itemRenderer="myRenderer">
</s:List>

もともと、私は .mxml レンダラーを使用していましたが、パフォーマンスの悪さを見てから、UIComponent を拡張して自分で作成することにしました (水平方向のスペースを節約するために、パッケージとブレースを省略しました)。

import mx.controls.listClasses.IListItemRenderer;
import mx.core.UIComponent;
import mx.events.FlexEvent;
import mx.utils.ColorUtil;

import spark.components.Label;
import spark.components.TextInput;

public final class OrderViewProductLineTestIR extends UIComponent implements IListItemRenderer 
{
    public function OrderViewProductLineTestIR()
    {
        super();
    }

    // Internal variable for the property value.
    private var _data:Object;

    private var productName:Label;
    private var orderQty:TextInput;
    private var stockQty:TextInput;


    // Make the data property bindable.
    [Bindable("dataChange")]

    // Define the getter method.
    public function get data():Object
    {
        return _data;
    }

    // Define the setter method, and dispatch an event when the property
    // changes to support data binding.
    public function set data(value:Object):void
    {
        _data = value;
        invalidateProperties();
        dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
    }

    override protected function createChildren():void
    {
        super.createChildren();

        productName = new Label();
        // productName.visible = true;
        addChild(productName);

        orderQty = new TextInput();
        addChild(orderQty);

        stockQty = new TextInput();
        addChild(stockQty);

    }

    override protected function commitProperties():void
    {
        super.commitProperties();
        productName.text = _data.Name;
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        productName.move(0, 0);
        productName.setActualSize(250, 48);

        orderQty.move(270, 0);
        orderQty.setActualSize(100, 48);

        stockQty.move(390, 0);
        stockQty.setActualSize(100, 48);
    }

    override protected function measure():void
    {
        super.measure();

        measuredWidth = 490;
        measuredHeight = 48; 
    }
}

ご覧のとおり、これはかなり軽量ですが、私のデータ プロバイダーには 100 個以上の項目が含まれており、そのうち 11 個を一度に画面に表示できます。スクロールのパフォーマンスの向上について読んだことはすべて、 opaqueBackgroundandを使用することを中心に展開してcacheAsBitmapいますが、何を試してもここでは役に立ちません。リスト レベルで使用cacheAsBitmapしても、数行以上スクロールするとアイテム レンダラーのリサイクルが開始され、全体を再レンダリングする必要があるため役に立ちません。また、アイテム レンダラー レベルで使用すると、高速スクロール — おそらく、非常に高速なスクロール中に多くが一度にリサイクルされているためです。

iPad が 60 fps でフレーム内の画面いっぱいの情報を問題なくブリッティングすることはわかっていますが、すばやくスクロールすると、10 fps にするのに苦労しています (視覚的に)。質問:明らかなことを見落としていたのでしょうか、それとも AIR を使用する際に関係するレイヤー (およびベクター レンダリング) の数が原因で、これが予想されるのでしょうか? 記録として、アプリケーションのレンダリング モードを変更し、フレーム レートを変更して明らかな問題を排除しようとしました。

4

3 に答える 3

0

"Spark List コンポーネント" でこれを試してみて
ください
。

結果を教えてください...しかし、リストに要素を追加すると、レイアウトから外れていても、すべてのコンポーネントがレンダリングされるため、よりスムーズになると思います(非常にスムーズになる)。 「useVirtualLayout」では、ビューポートにあるアイテムだけがレンダリングされ、他のアイテムは破棄されます...

参照してください！そしてFlash Builderを楽しんでください！マルチサポートアプリがあるのはとてもクールなテクノロジーです！

于 2012-04-24T22:43:23.857 に答える
0

これは少し推測ですが、itemRenderer を最適化できますか? コンポーネントが再描画されるたびに、すべての子の位置とサイズを変更する必要がありますか? commitProperties を実行するたびに productName.text を更新する必要がありますか?

物事を変更する方法は次のとおりです。

import mx.controls.listClasses.IListItemRenderer;
import mx.core.UIComponent;
import mx.events.FlexEvent;
import mx.utils.ColorUtil;

import spark.components.Label;
import spark.components.TextInput;

public final class OrderViewProductLineTestIR extends UIComponent implements IListItemRenderer 
{
    public function OrderViewProductLineTestIR()
    {
        super();
    }

    // Internal variable for the property value.

private var _data:Object;

// Add a dataChanged property 
private var dataChanged :Boolean = false

private var productName:Label;
private var orderQty:TextInput;
private var stockQty:TextInput;


// Make the data property bindable.
[Bindable("dataChange")]

// Define the getter method.
public function get data():Object
{
    return _data;
}

// Define the setter method, and dispatch an event when the property
// changes to support data binding.
public function set data(value:Object):void
{
    _data = value;
    // switch the dataChanged flag 
    dataChanged = true;
    invalidateProperties();
    dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
}

override protected function createChildren():void
{
    super.createChildren();

    productName = new Label();
    // productName.visible = true;
    addChild(productName);

    orderQty = new TextInput();
    addChild(orderQty);

    stockQty = new TextInput();
    addChild(stockQty);

}

override protected function commitProperties():void
{
    super.commitProperties();
    // Only update the display if the data actually changed 
    If(dataChanged){
      productName.text = _data.Name;
      dataChanged = false;
    }
}


// add variable to tell whether the component's children have been sized and positioned or not
// since they have static locations, no need to set these each time
protected var compChildrenSized :Boolean = false;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    if(!compChildrenSized){
     productName.move(0, 0);
     productName.setActualSize(250, 48);

     orderQty.move(270, 0);
     orderQty.setActualSize(100, 48);

     stockQty.move(390, 0);
     stockQty.setActualSize(100, 48);

     compChildrenSized = true;
    }
}

override protected function measure():void
{
    super.measure();

    measuredWidth = 490;
    measuredHeight = 48; 
}
}

私は、測定が実行されるかどうかわからないことを付け加えると思います。textInputs をラベルに置き換えるとどうなりますか? Flex 4.6 を使用していますか? その場合、StyleableStageText (別名 StageText) または StyleableTextField を使用する 4.5 スキンを使用していますか? StageText のスクロールが Flash ディスプレイ リストの上にぶら下がっているため、パフォーマンスが低下するのではないかと思います。

textInput を完全に削除してラベルに置き換えるとどうなりますか?

これらは些細なことであり、役立つかどうかはわかりません。

于 2012-04-17T10:54:36.203 に答える