在Flex 4.5中使用TileLayout滚动Spark列表时出现问题 [英] Problem with scrolling a sparks list with TileLayout in Flex 4.5

问题描述

我遇到了一个非常奇怪的行为，在一个滚动条中放置了TileLayout。基本上，我想在列表上方有一个标题区域，当用户向下滚动列表时滚动。为了做到这一点，我把标题和列表放入一个组中，并将其包装在宽度和高度均为100％的滚动条中。

问题是，如果列表具有默认的VerticalLayout，一切正常，但如果您分配一个TileLayout到相同的列表，它只能部分呈现项目（当在iPhone 4上测试时，大约有30个项目）。

以下是完整的代码。先尝试一下，然后尝试删除< s：layout> 部分，以确认它与VerticalLayout的配合良好：

 <？xml version =1.0encoding =utf-8？> 
< s：查看
 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> 
 
  
  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：查看> 
  

我做错了什么？或者这是一个错误？

解决方案

您需要计算并设置列表的高度。你可以通过计算行数乘以行高来轻松地计算出它：

  private function listHeight（） ：Number {
 //在这个例子中，你在iPhone4模拟器上有3行到一行
 var numRows：Number = Math.ceil（myAC.length / 3）; 
 
 //行的高度（200）加上行间的差距（6）
 var rowHeight：Number = 200 + 6; 
返回numRows * rowHeight; 
 
 
 
 $ b $ p 
 $ b 
这不是一个完美的解决方案，特别是如果你的目标是多个屏幕密度因为每行中的项目数量会因设备而异），但它可能会让你走上正轨。
 
 
 
更好的解决方案是扩展列表组件在ActionScript类中添加一个您可以设置的标题。
 
I'm experiencing a very strange behavior with a spark list with TileLayout placed inside a scroller. Basically, I want to have a title area above my list that scrolls away when the user scrolls down the list. To do this I put the title and the list inside a Group and wrapped the group inside a scroller with width and height = 100%. I also set the verticalScrollPolicy to off on the list to make sure everything scrolls together.

The problem is that if the list has the default VerticalLayout everything works fine but if you assign a TileLayout to the same list it only partially renders the items (about 30 items when testing on iPhone 4).

Here's the fully functioning code. Try it like this first, then try removing the <s:layout> part to confirm that it works well with 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>
What am I doing wrong? Or is this a bug?
解决方案
You need to calculate and set the height of the list. You can easily calculate it by figuring out the number of rows times the height of a row as below:
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;
}
This is not a perfect solution, especially if you are targeting multiple screen densities (as the number of items per row will differ from device to device), but it might get you on the right track.

A better solution would be to extend the list component in an ActionScript class and add a header which you can set.

                        
这篇关于在Flex 4.5中使用TileLayout滚动Spark列表时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！