2011-09-01 40 views
0

我遇到了一個非常奇怪的行爲,其中放置在Scroller中的TileLayout具有Spark列表。基本上,我想在列表上方有一個標題區域,當用戶向下滾動列表時滾動。爲了做到這一點,我把標題和列表放入一個組中,並將組裹在寬度和高度爲100%的卷軸中。我還將verticalScrollPolicy設置爲關閉列表以確保所有內容都滾動到一起。使用Flex 4.5中的TileLayout滾動火花列表時出現的問題

問題是,如果列表具有默認的VerticalLayout,那麼一切正常,但如果將TileLayout分配給同一個列表,它只會部分呈現項目(在iPhone 4上測試時大約有30個項目)。

下面是功能完整的代碼。嘗試像這樣,然後再嘗試刪除<s:layout>部分,以確認其與VerticalLayout的效果很好:

<?xml version="1.0" encoding="utf-8"?> 
<s:View 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    > 

    <fx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayCollection; 

      [Bindable] 
      public var myAC:ArrayCollection = new ArrayCollection([ 
       "01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35","36","37","38","39","40","41","42","43","44","45","46","47","48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73","74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100" 
      ]); 
     ]]>  
    </fx:Script> 

    <s:Scroller width="100%" height="100%"> 
     <s:VGroup> 

      <s:Label text="TITLE" width="100%" height="200" backgroundColor="#333333" color="#EEEEEE"/> 

      <s:List 
       id="list" 
       width="100%" 
       verticalScrollPolicy="off" 
       dataProvider="{myAC}" > 

       <s:layout> 
        <s:TileLayout 
         columnWidth="200" 
         rowHeight="200" 
         useVirtualLayout="true" /> 
       </s:layout> 

      </s:List> 

     </s:VGroup> 
    </s:Scroller>  

</s:View> 

我在做什麼錯?或者這是一個錯誤?

+0

我不明白你想要完成什麼。 –

回答

4

您需要計算並設置列表的高度。

private function listHeight():Number { 
    // In this example you had 3 items to a row on the iPhone4 emulator 
    var numRows:Number = Math.ceil(myAC.length/3); 

    // The height of the row (200) plus the gap between rows (6) 
    var rowHeight:Number = 200 + 6; 
    return numRows * rowHeight; 
} 

這不是一個完美的解決方案,特別是如果你是針對多屏幕密度(按項目數:您可以輕鬆地找出行數乘以行下面的高度計算它每個設備的行數會有所不同),但它可能會讓您走上正確的軌道。

更好的解決方案是在ActionScript類中擴展列表組件並添加一個您可以設置的標題。

+0

謝謝乍得,我喜歡擴展List類和添加標題的解決方案。非常優雅,比我想要做的更有效率。 – Andy

+0

花了一整天的時間想弄清楚如何擴展列表類,我在這裏發佈了一個關於它的問題。也許你可以在回答時採取措施? [鏈接](http://stackoverflow.com/questions/7306672/extending-a-spark-list-in-flex-4-5)http://stackoverflow.com/questions/7306672/extending-a-spark-列表中-FLEX-4-5 – Andy