Question

我正在实施一个图像库，它将资产显示为形成网格的同等大小的框。我认为我可以通过使用spark.layouts.TileLayout轻松实现这一点，但遗憾的是我还有一些额外的要求，我无法用它来实现。

一般原则应该是在给定空间内尽可能多地提供框。应用程序的整个布局为liquid，具体取决于用户的屏幕分辨率。

我是从基本的DataGroup开始的TileLayout：

<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的所有元素然后从TileLayout - 这可以从我真正想要实现的目标中获得。

问题

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

举个例子，让我们想象一下我们有10个图像的列表。每个都是10x10像素，但我的屏幕分辨率只允许我适合35x35像素的网格。这意味着一个页面仅能够以3x3网格的形式呈现9个图像（因为5像素不足以呈现完整图像）。然后应将第10张图像传输到第二页。

问题

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

如果以上描述听起来不符合逻辑，请告诉我，以便我能够对其进行调整（或包含更多细节）。

对此的任何帮助将非常感谢！

Answer 1

您需要为此类功能创建自定义布局。好消息是我找到了一个教程，几乎完成了你想要做的事情：

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

首先实施。在updateDisplayList（）方法中，查找以下行：

if (x + elementWidth > containerWidth)

当检查将其撞到下一行时，您将检查总高度与当前行高度，并在超出边界时停止添加元素。（只有break出于for循环）

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

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

1 个答案: