在 Flex 4.5 中使用 TileLayout 滚动火花列表的问题 [英] Problem with scrolling a sparks list with TileLayout in Flex 4.5

问题描述

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

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.

问题是，如果列表具有默认的 VerticalLayout 一切正常，但如果您将 TileLayout 分配给同一个列表，它只会部分呈现项目(在 iPhone 4 上测试时大约有 30 个项目).

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).

这是功能齐全的代码.先像这样尝试，然后尝试删除 部分以确认它与 VerticalLayout 配合良好:

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.

更好的解决方案是在 ActionScript 类中扩展列表组件并添加一个您可以设置的标题.

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 滚动火花列表的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！