如何设置flutter tablecell的背景颜色？

Question

以下代码生成一个 3 行 3 列的表格。在第二行中，第一个和第三个单元格的颜色没有显示 - 我猜想所包含的容器只是尺寸不正确，因此不可见，导致中央红色单元格两侧都有白色单元格。如何强制侧单元格的颜色？鉴于我不知道屏幕的大小或可能的图标的大小，有没有办法强制表格完全正方形？我基本上希望中央单元格包含我的数据，其他单元格充当细边框，可以在运行时单独着色。

附上我的应用程序的图像，在

Gridview.count()

中显示了一堆这些表格。请注意网格每行下方的空白区域。我怎样才能摆脱那个空白空间？

return GestureDetector(
  onTap: () => print('$name was tappped'),
  child: Table(columnWidths: {
    0: FixedColumnWidth(10.0),
    1: FlexColumnWidth(),
    2: FixedColumnWidth(10.0)
  }, children: [
    TableRow(children: [
      TableCell(
        child: Container(
          color: Colors.black,
          child: SizedBox(
            width: 10.0,
            height: 10.0,
          ),
        ),
      ),
      TableCell(
        child: Container(
          color: Colors.blue,
          child: SizedBox(
            height: 10.0,
          ),
        ),
      ),
      TableCell(
        child: Container(
          color: Colors.green,
          child: SizedBox(
            width: 10.0,
            height: 10.0,
          ),
        ),
      ),
    ]),
    TableRow(
      children: [
        TableCell(
          child: Container(
            color: Colors.blue,                 
            child: SizedBox(
              width: 10.0,
            ),
          ),
        ),
        TableCell(
          child: Container(
            color: Colors.red,
            alignment: Alignment.center,
            child: Center(
              child: Icon(
                icon,
              ),
            ),
          ),
        ),
        TableCell(
          child: Container(
            color: Colors.blue,
            child: SizedBox(
              width: 10.0,
            ),
          ),
        ),
      ],
    ),
    TableRow(children: [
      TableCell(
        child: Container(
          color: Colors.green,
          child: SizedBox(
            width: 10.0,
            height: 10.0,
          ),
        ),
      ),
      TableCell(
        child: Container(
          color: Colors.greenAccent,
          child: SizedBox(
            height: 10.0,
          ),
        ),
      ),
      TableCell(
        child: Container(
          color: Colors.grey,
          child: SizedBox(
            width: 10.0,
            height: 10.0,
          ),
        ),
      ),
    ]),
  ]),
);

谢谢！

Answer 1

我通过将内部表包装在另一个表（在居中且方形的 SizedBox 内）而不是 GridView 中的某些 TableRow 中，并在一些媒体查询的帮助下严格调整内部表中的单元格和列的大小，从而解决了我的问题。新代码如下。关于表格内灵活大小的小部件仍然存在一些棘手的问题，我需要稍后理解，但也许通过这种方法我可以避免这个项目中的大部分问题。我还必须更正内部表的

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,
            ),
          ),
        ),
      ]),
    ]);

PS：我最终停止在这个应用程序中使用表格，而是使用基本的行和列。

Answer 2

我认为你可以将单元格放入容器中并将其包装为 Expanded 然后你可以设置背景颜色

        Table( 
            children: 
            [
              TableRow( 
                  children: [ 
                    Expanded(
                        child: Container(color: Colors.grey, child: Center(child: Text('العشاء')))
                    ), 
                    Expanded(
                        child: Container(color: Colors.grey, child: Center(child: Text('المغرب')))
                    ), 
                    Expanded(
                        child: Container(color: Colors.grey, child: Center(child: Text('العصر')))
                    ), 
                    Expanded(
                        child: Container(color: Colors.grey, child: Center(child: Text('الظهر')))
                    ), 
                    Expanded(
                        child: Container(color: Colors.grey, child: Center(child: Text('الفجر')))
                    ), 
                    Expanded(
                        child: Container(color: Colors.grey, child: Center(child: Text('الايام')))
                    ), 
                  ] 
              ) 
            ]
        ),