我正在使用带有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;