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

Question

我正在实现一个图片库，它将 Assets 呈现为形成网格的大小相等的框。我认为我可以通过使用 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 因为它们取决于可用空间，所以上面的代码从 left-to 布局所有元素-right 然后从 top-to-bottom - 这与我真正想要实现的目标尽可能接近。

问题

此框 列表应该能够呈现假 分页。实际上，这意味着如果最后一个可见行不完全适合可用空间，则应将其移至下一页。

举个例子，假设我们有一个包含 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。