为什么这个布局类并不总是有效？

Question

这是我尝试为按钮面板（可能有 2 到 20 个按钮）编写自己的布局类。基本上它们应该具有统一的尺寸，具有恒定的间距（5px）并适当地调整大小。

然而它并不总是有效。

有时它工作得很好，但其他时候它为额外的列提供了空间，或者无法在调整大小时添加额外的列（删除列很好），或者有些东西不起作用。这需要很长时间，而且在计算方面似乎非常昂贵。由于某种原因，在这方面减少宽度似乎更加痛苦。

无论如何，这就是：

package layouts
{
    import mx.core.ILayoutElement;

import spark.components.supportClasses.GroupBase;
import spark.layouts.supportClasses.LayoutBase;

public class QButtonsLayout extends LayoutBase
{
    public function QButtonsLayout()
    {
        super();
    }

    override public function measure():void
    {
        super.measure();

        target.measuredHeight = 130;

    }

    override public function updateDisplayList(w:Number, h:Number):void
    {
        super.updateDisplayList(w,h);

        var tCount:int = target.numElements; // Number of elements
        var tW:Number = target.width; // Width of target (button area) - somewhere between 550 and 1000px

        var maxW:Number = 1; // Largest natural width of any given element
        var maxH:Number = 1; // Largest natural height of any given element

        var eSetW:Number = 1; // Set (to be) width of each element upon the target
        var eSetH:Number = 1; // Set (to be) height of each element upon the target

        var tCols:Number = 1; // Number of columns upon the target
        var tRows:Number = 1; // Number of rows upon the target 

        for (var i:int = 0; i<tCount; i++) // Find maxW
        {
            var layoutElement:ILayoutElement = useVirtualLayout ? target.getVirtualElementAt(i):target.getElementAt(i);         
            var thisW:Number = layoutElement.getPreferredBoundsWidth();
            var thisH:Number = layoutElement.getPreferredBoundsHeight();

            if(thisW > maxW)
            {
                maxW = thisW;
            };

            if(thisH > maxH)
            {
                maxH = thisH;
            };
        }

        tCols = Math.floor((tW-5)/(maxW+5)); //Find maximum number of columns one can fit onto the target

        if(tCols>tCount) //Fix to deal with cases with low tCounts
        {
            tCols = tCount;
        };

        tRows = Math.ceil(tCount/tCols); //Find corresponding number of rows

        eSetW = ((tW-5)/tCols)-5; //Set widths of elements based upon number of columns, 5s to add some space between elements
        eSetH = maxH; //Takes height as the largest height

        for (var j:int = 0; j<tCount; j++)
        {
            var layoutElement2:ILayoutElement = useVirtualLayout ? target.getVirtualElementAt(j):target.getElementAt(j);

            var eRow:int = Math.floor(j/tRows); //Row of given element, taking the 1st to be zero
            var eCol:int = j - eRow*tRows; // Column of given element, again taking the 1st column as zero

            var _x:Number = 5 + eRow*(eSetW+5);
            var _y:Number = 5 + eCol*(eSetH+5);

            layoutElement2.setLayoutBoundsPosition(_x,_y);
            layoutElement2.setLayoutBoundsSize(eSetW,eSetH);
        }           
    }
}
}

任何想法将不胜感激。

更欢迎批评。

Answer 1

事实证明并非如此。就计算元素位置和大小而言，布局类本身很好。

这实际上是按钮使用的计算其首选宽度的方式的问题。虽然我不熟悉这种情况发生的实际方式，但它是通过删除按钮外观内图形元素的任何高度和宽度值的 %width 值来解决的。 （例如将 width="100%" 更改为 left="0" right="0"）。

我希望这可以在某个时候、某个地方对某人有所帮助。