我正在使用带有Javascript(而不是Typescript和Angular)的NativeScript,并且很难在GridLayout中删除Button对象之间的额外空间 . 我基本上是制作一个棋盘并动态构建项目 . 我的代码摘录如下,但正如您所看到的,我已尝试设置margin,borderWidth和padding,但无济于事 . 我还附上了它如何出现的截图 . 我希望方块之间没有边框 . 我使用Button是因为它附带Tap事件,如果有更好的方法请告诉我 . (对不起,代码有点乱 . 我可以发布整个源代码,如果这会有用,它不会比这长 . )

GridLayout(或其行/列/单元格)是否在单元格之间具有默认填充或边距? Button有默认的填充/边距吗?以及如何将它们设置为零?谢谢!

var squareCount = 0;            // 0 to 63
var scale = platform.screen.mainScreen.scale;
var screenWidth = page.getMeasuredWidth() / scale;
var screenHeight = page.getMeasuredHeight() / scale;

squareWidth = (screenWidth > screenHeight ? screenHeight : screenWidth) / 8;

var stack = new stackLayout.StackLayout();

var grid = new GridLayout();
grid.paddingTop = grid.paddingLeft = grid.paddingBottom = grid.paddingRight = 0;

for (y=0; y<8; y++)
{
    var row = new ItemSpec(squareWidth, GridUnitType.PIXEL);
    row.paddingTop = row.paddingLeft = row.paddingBottom = row.paddingRight = 0;
    row.margin = 0;
    row.borderWidth = 0;
    grid.addRow(row);
    for (x=0; x<8; x++)
    {
        var col = new ItemSpec(squareWidth, GridUnitType.PIXEL);
        col.paddingTop = col.paddingLeft = col.paddingBottom = col.paddingRight = 0;
        col.margin = 0;
        col.borderWidth = 0;
        grid.addColumn(col);
        var square = new Button();
        square.width = squareWidth;
        square.height = squareWidth;
        square.effectiveWidth = squareWidth;
        square.effectiveHeight = squareWidth;
        square.text = "X";
        square.row = y;
        square.col = x;
        square.borderWidth = 0;
        square.padding = 0;

        if (y % 2 == 0)
            square.backgroundColor = (squareCount++ % 2 == 0 ? "white" : "gray");
        else
            square.backgroundColor = (squareCount++ % 2 == 0 ? "gray" : "white");

        if (squareCount == 63)
            square.backgroundImage = "res://testpiece";

        square.margin = "0";
        grid.addChild(square);
    }       
}

stack.addChild(grid);

page.content = stack;

Screenshot