如何在网格布局中对齐 "boxes"

Question

我有这个 "menu" 我正在通过 XML 在我的 .swf

中加载

这是我的代码：

for each(var datos: XML in xml.datos) {


    var menuItem: MenuItem = new MenuItem();
    menuItem.x = count * menuItem.height * 6;
    menuItem.y = 0;
    menuItem.menuText.text = datos.@causa;
    menuItem.mouseChildren = false;
    menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem);
    menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem);
    menuItem.addEventListener(MouseEvent.CLICK, itemClicked);
    menuHolder.addChild(menuItem);
    count++;
}

这将使加载的每个 "menu" 彼此相邻（从左到右）。

假设我正在加载 30 "boxes"，我需要的是像这样显示它们：

Answer 1

像这样的东西应该有用。基本上，每次 count 达到 5 时它都会重置。由于您的 x 值基于 count，它也将被重置并从左侧重新开始。此外，您的 yPos 将增加一些值（例如我选择 50），下一行将被该值抵消。

var yPos: Number = 0;
for each(var datos: XML in xml.datos) {
    var menuItem: MenuItem = new MenuItem();
    menuItem.x = count * menuItem.height * 6;
    menuItem.y = yPos;
    menuItem.menuText.text = datos.@causa;
    menuItem.mouseChildren = false;
    menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem);
    menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem);
    menuItem.addEventListener(MouseEvent.CLICK, itemClicked);
    menuHolder.addChild(menuItem);
    count++;
    if (count % 5 == 0) {
        count = 0;
        yPos += 50;
    }
}

你也可以不使用条件和 yPos 变量。

正如@DodgerThud 所建议的那样，我根据您要尝试做的事情使数学变得更加合理。

var margin: Number = 5;
var numPerRow: Number = 4;
for each(var datos: XML in xml.datos) {
    var menuItem: MenuItem = new MenuItem();
    menuItem.x = (count % numPerRow) * (menuItem.width + margin);
    menuItem.y = Math.floor(count / numPerRow) * (menuItem.height + margin);
    menuItem.menuText.text = datos.@causa;
    menuItem.mouseChildren = false;
    menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverItem);
    menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutItem);
    menuItem.addEventListener(MouseEvent.CLICK, itemClicked);
    menuHolder.addChild(menuItem);
    count++;
}

如何在网格布局中对齐 "boxes"

How to align "boxes" in a grid layout

xml

actionscript-3

menu

grid-layout