TileLayout 具有用于分页的动态行和列

Question

我正在实现一个图像库，它将资产呈现为形成网格的同等大小的盒子。我认为我可以通过使用 Spark.layouts.TileLayout 轻松实现这一点，但不幸的是我有一些无法用它实现的额外要求。

一般原则应该是在给定的空间内呈现尽可能多的盒子。应用程序的整个布局是液体并且取决于用户的屏幕分辨率。

我从带有 TileLayout 的基本 DataGroup 开始：

<s:DataGroup id="dgpImages" width="100%" height="100%" top="12" dataProvider="{ list }" 
    minHeight="0" minWidth="0" clipAndEnableScrolling="true" itemRenderer="LibraryImageRenderer">
    <s:layout>
        <s:TileLayout orientation="rows" clipAndEnableScrolling="true"
            requestedColumnCount="-1" requestedRowCount="-1"
            verticalGap="12" horizontalGap="12" useVirtualLayout="true" />
    </s:layout>
</s:DataGroup>

我不知道中的 RequestedColumnCount 或 RequestedRowCount前进，因为它们取决于可用空间，因此上面的代码从左到右布局所有元素，然后从上到下布局 - 这与你可以从我真正想要实现的目标中得到。

问题

这个框列表应该是渲染假分页的电缆。实际上，这意味着如果最后一个可见行不完全适合可用空间，则应将其移动到下一页。

举个例子，假设我们有一个包含 10 张图像的列表。每个都是 10x10 像素，但我的屏幕分辨率只能容纳 35x35 像素的网格。这意味着一个页面只能以 3x3 网格的形式呈现 9 个图像（因为 5 像素不足以呈现完整图像）。然后，第 10 个图像应转移到第二页。

问题

这显然不会自动发生在我上面粘贴的代码中，因为 TileLayout 允许显示部分可见的行（以垂直滚动列表的形式） 。 我想知道如何实现上述行为。

如果上述描述听起来不合逻辑，请告诉我，以便我可以调整它（或包含更多详细信息）。

对此的任何帮助将不胜感激！

Answer 1

您需要为此类功能创建自定义布局。好消息是我发现一个教程几乎可以完成您想要为您做的事情：

http://www.adobe.com/devnet/flex/articles/spark_layouts.html

所以首先实现它。在 updateDisplayList() 方法中，查找这一行：

if (x + elementWidth > containerWidth)

在检查是否将其移至下一行时，您将检查总高度与当前行高度，如果超出边界，则停止添加元素。 （只需break跳出for循环）

然后，您所要做的就是根据当前页面为该组分页dataProvider。