Question

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

问题是，如果列表具有默认的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类中扩展列表组件并添加可以设置的标题。

在Flex 4.5中使用TileLayout滚动火花列表时出现问题

1 个答案: