iPad上的Adobe AIR滾動性能（2） - 我可以期待什麼？

Question

我目前正在研究將iPad2作爲硬件平臺的Adobe AIR應用程序，並且無法在其中一個屏幕上獲得像樣的滾動性能。我使用的火花列表，自定義項目渲染就像這樣：

<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; 
    } 
} 

正如你可以看到這是非常輕的重量，但我的DataProvider包含的向上的100個項目，其中有11可以在屏幕上在任何時候。我所讀到的關於提高滾動性能的所有內容都圍繞着使用opaqueBackground和cacheAsBitmap，但是不管我在這裏嘗試的都不是什麼。在列表級別使用cacheAsBitmap不會有所幫助，因爲只要滾動了多行代碼就需要重新渲染整個內容，並且在項目渲染器級別使用它仍然非常慢當滾動速度很快時 - 大概是因爲很多文件在非常快的滾動中被一次性回收。

我知道iPad應該沒有問題在60幀/秒的幀中刷新一幀信息，但當我快速滾動時，我看到它奮鬥到10 fps（從視線）。所以問題：我錯過了一些顯而易見的事情，或者這是由於使用AIR時涉及的層數（和向量渲染）而導致的。爲了記錄，我試圖改變應用程序的渲染模式，並嘗試改變幀速率以消除明顯的。

Answer 1

這是一個猜測，但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（AKA StageText）還是使用StyleableTextField的4.5皮膚？我想知道StageText滾動是否會導致性能下降，因爲它懸掛在Flash Display列表上方。

如果您完全刪除textInput並替換爲標籤，會發生什麼情況？

這些都是小事，我不確定他們是否會幫忙。

Answer 2

嘗試只是這個你的「Spark List組件」在
1 /加布局（水平或垂直取決於你想要什麼;）在您的列表組件
2 /添加屬性「useVirtualLayout =真」！

並告訴我有什麼結果......但我認爲這將是平滑的（非常非常平滑）， 因爲當你添加元素到列表中，所有的組件都呈現，即使 他們出來的佈局......所以只有在視口上的「useVirtualLayout」項目被渲染其他人被銷燬...

請看！並與Flash Builder玩得開心！有一個多支持應用程序是一個非常酷的技術！

Answer 3

有點晚了。但。

這是真的，它更好地使用椋鳥和羽毛，如果你想要的東西接近本機的表現。

但是你仍然可以優化你的渲染器。 請不要在Flex移動應用程序中的任何位置使用綁定。 擴展UIComponent是正確的做法。 我認爲最好不要在數據設置器中使用失效並設置屬性。

希望它有幫助。