列表中用不同的列数 [英] List with different column count

问题描述

由于PIC节目（这是通过PhotoShop的绘制，尚未实现），我想implemnt一个列表赞一个。它具有不同列计数，表示在第一行中只有一个项目，其他有两个项目。我试图用 itemRendererFunction 来检测不同项目（第一行治疗作为rendererA，别人当作另一个rendererB），但没有奏效。

As the pic show(This is drawn by PhotoShop, not implemented yet), I want to implemnt a List like this one. It has different column count, say the first row has only one item, and the others have two items . I tried to use itemRendererFunction to detect the different item(the first row treat as a rendererA, the others treat as another rendererB),but it didn't work.

推荐答案

最简洁的解决这个问题，是创建一个自定义布局（我们在评论中讨论了罗米的解决方案将最终导致太多的问题）。然而，这通常不是一件容易的事。

The cleanest solution to this problem, is to create a custom layout (we've discussed in the comments how Romi's solution will eventually cause too many problems). However, this is usually not an easy thing to do.

我会给你这是什么自定义布局可能看起来像，所以你可以使用它作为一个起点，不正是你需要创建一个草图。 要创建一个自定义布局，您必须继承的baselayout 和覆盖，并实施其的updateDisplayList 和措施的方法。

I will give you a rough sketch of what this custom layout might look like, so you can use it as a starting point to create one that does exactly what you need. To create a custom layout, you must subclass BaseLayout and override and implement its updateDisplayList and measure methods.

为了让事情变得容易多了（为了不倾倒在这里500行code），我用这个例子一些硬codeD变数。它假定总是会有两列，第一项将总是200x200的像素，以及其他项永远是100x100像素的。没有horizo​​ntalGap或的verticalGap。
其结果当然是，你可以使用这个自定义布局（像现在一样），只对这个特定的名单和这些具体的itemRenderer的。如果你希望它是更通用的，你就必须做更多的计算。

To make things easier (and in order not to dump 500 lines of code in here), I used some hardcoded variables for this example. It assumes there will always be two columns, the first item will always be 200x200 px, and the other items will always be 100x100 px. There is no horizontalGap or verticalGap.
The consequence is of course that you can use this custom layout (as it is now) only for this specific List and these specific ItemRenderers. If you want it to be more generic, you'll have to do a lot more calculations.

但现在的code：

public class MyCustomLayout extends LayoutBase {

    //hardcoded variables
    private var columnCount:int = 2;

    private var bigTileWidth:Number = 200;
    private var bigTileHeight:Number = 200;
    private var smallTileWidth:Number = 100;
    private var smallTileHeight:Number = 100;

    override public function updateDisplayList(width:Number, height:Number):void {
        var layoutTarget:GroupBase = target;
        if (!layoutTarget) return;

        var numElements:int = layoutTarget.numElements;
        if (!numElements) return;

        //position and size the first element
        var el:ILayoutElement = useVirtualLayout ? 
            layoutTarget.getVirtualElementAt(0) : layoutTarget.getElementAt(0);
        el.setLayoutBoundsSize(bigTileWidth, bigTileHeight);
        el.setLayoutBoundsPosition(0, 0);

        //position & size the other elements in 2 columns below the 1st element
        for (var i:int=1; i<numElements; i++) {
            var x:Number = smallTileWidth  * ((i-1) % 2);
            var y:Number = smallTileHeight * Math.floor((i-1) / 2) + bigTileHeight;

            el = useVirtualLayout ? 
                layoutTarget.getVirtualElementAt(i) : 
                layoutTarget.getElementAt(i);
            el.setLayoutBoundsSize(smallTileWidth, smallTileHeight);
            el.setLayoutBoundsPosition(x, y);
        }

        //set the content size (necessary for scrolling)
        layoutTarget.setContentSize(
            layoutTarget.measuredWidth, layoutTarget.measuredHeight
        );
    }

    override public function measure():void {
        var layoutTarget:GroupBase = target;
        if (!layoutTarget) return;

        var rowCount:int = Math.ceil((layoutTarget.numElements - 1) / 2);

        //measure the total width and height
        layoutTarget.measuredWidth = layoutTarget.measuredMinWidth = 
            Math.max(smallTileWidth * columnCount, bigTileWidth);
        layoutTarget.measuredHeight = layoutTarget.measuredMinHeight = 
            bigTileHeight + smallTileHeight * rowCount;
    }

}

和您可以使用它是这样的：

And you can use it like this:

<s:List dataProvider="{dp}" height="300">
    <s:layout>
        <l:MyCustomLayout />
    </s:layout>
</s:List>

这篇关于列表中用不同的列数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！