在 Flex 4.5 中使用 TileLayout 滚动火花列表的问题

Question

我在使用 TileLayout 放置在滚动条内的火花列表时遇到了一种非常奇怪的行为。基本上，我希望在我的列表上方有一个标题区域，当用户向下滚动列表时它会滚动。为此，我将标题和列表放入 Group 中，并将组包裹在宽度和高度 = 100% 的滚动条中。我还在列表中将verticalScrollPolicy 设置为关闭，以确保所有内容一起滚动。

问题在于，如果列表具有默认的 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>

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

Answer 1

您需要计算和设置列表的高度。您可以通过计算行数乘以行高来轻松计算它，如下所示：

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 类中扩展列表组件并添加一个您可以设置的标题。