Question

以下代码生成一个具有3行3列的表。在第二行中，第一个和第三个单元格的颜色没有显示出来-我猜所包含的容器的尺寸没有正确调整，因此是不可见的，从而导致中央红色单元格的任一侧出现白色单元格。我该如何强制侧面细胞的颜色？考虑到我不知道屏幕或图标的大小，是否还有一种方法可以强制表格完全方形？我基本上希望中央单元包含我的数据，而其他单元则充当细边框，可以在运行时分别进行着色。

在我的应用程序中附加了一张图片，其中在map中显示了一堆表格。请注意网格的每一行下方的空白。我如何摆脱那个空白？

Gridview.count()

谢谢！

Answer 1

我通过将内部表包装在另一个TableRows的另一个表中（在居中且方形的SizedBox内）而不是GridView来解决问题，并借助一些媒体查询严格调整了内部表中的单元格和列的大小。新代码如下。关于Tables中的灵活大小的小部件，仍然存在一些棘手的问题，以后我需要理解，但也许可以使用这种方法来避免本项目中的大多数问题。我还必须更正内部表的columnWidths参数，它们从0而不是1开始索引。

return Table(columnWidths: {
      0: FixedColumnWidth(wallThickness),
      1: FixedColumnWidth(roomLength),
      2: FixedColumnWidth(wallThickness)
    }, children: [
      TableRow(children: [
        TableCell(
          child: Container(
            color: wallColor,
            child: SizedBox(
              height: wallThickness,
              width: wallThickness,
            ),
          ),
        ),
        TableCell(
          child: Container(
            color: wallColor,
            child: SizedBox(
              height: wallThickness,
              width: double.infinity,
            ),
          ),
        ),
        TableCell(
          child: Container(
            color: wallColor,
            child: SizedBox(
              height: wallThickness,
              width: wallThickness,
            ),
          ),
        ),
      ]),
      TableRow(
        children: [
          TableCell(
            child: Container(
              color: wallColor,
              child: SizedBox(
                height: roomLength,
                width: wallThickness,
              ),
            ),
          ),
          TableCell(
            child: GestureDetector(
              onTap: () => print('$name was tappped'),
              child: Container(
                color: floorColor,
                alignment: Alignment.center,
                child: SizedBox(
                  width: roomLength,
                  height: roomLength,

                ),
              ),
            ),
          ),
          TableCell(
            child: Container(
              color: wallColor,
              child: SizedBox(
                width: wallThickness,
                height: roomLength,
              ),
            ),
          ),
        ],
      ),
      TableRow(children: [
        TableCell(
          child: Container(
            color: wallColor,
            child: SizedBox(
              width: wallThickness,
              height: wallThickness,
            ),
          ),
        ),
        TableCell(
          child: Container(
            color: wallColor,
            child: SizedBox(
              width: roomLength,
              height: wallThickness,
            ),
          ),
        ),
        TableCell(
          child: Container(
            color: wallColor,
            child: SizedBox(
              width: wallThickness,
              height: wallThickness,
            ),
          ),
        ),
      ]),
    ]);

如何设置颤动表格单元的背景颜色？

1 个答案: