Flutter - Table / TableCell：如何设置一个单元格的背景颜色答案

【问题标题】：Flutter - Table / TableCell: How to set background color of one cellFlutter - Table / TableCell：如何设置一个单元格的背景颜色
【发布时间】：2020-09-14 15:45:14
【问题描述】：

我有一个表格小部件，我必须调整一个单元格的背景颜色。所以我在TableCell 小部件中放了一个Container 小部件并设置它的颜色。如果该行的所有单元格具有相同的高度 (b1)，则此方法可以正常工作。但是，如果另一个单元格的高度更大 (b2)，我的方法会失败，如您在这张图片中看到的那样。

我了解Container 的高度与其子级匹配，而不是其父级的高度。但我想不出更好的方法。有什么想法吗？

这是我用于表格的代码：

Table(
    border: TableBorder.symmetric(
        inside: BorderSide(width: 1, color: AppColors.grey600),
        outside: BorderSide.none
    ),
    children: [
        TableRow(
            children: [
                TableCell(child: Container(child: Text('a'))),
                TableCell(child: Container(child: Text('b'))),
                TableCell(child: Container(child: Text('c'))),
            ],
        ),
        TableRow(
            children: [
                TableCell(child: Container(child: Text('abc abc abc'))),
                TableCell(child: Container(color: Colors.grey[300], child: Text('b'))),
                TableCell(child: Container(child: Text('c'))),
            ],
        ),
        TableRow(
            children: [
                TableCell(child: Container(child: Text('a'))),
                TableCell(child: Container(child: Text('b'))),
                TableCell(child: Container(child: Text('c'))),
            ],
        )
    ]
)

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

使用verticalAlignment：TableCellVerticalAlignment.fill

TableCell(
  verticalAlignment: TableCellVerticalAlignment.fill, 
  child: Container(
    color: Colors.grey[300], 
    child: Text('b')
  )
),

【讨论】：

我刚刚意识到 TableCellVerticalAlignment.fill 仅适用于单个单元格。如果将其应用于一行中的所有单元格，则该行的高度设置为 0，不幸的是，这是一种非常不受欢迎的行为。

【解决方案2】：

TableRow(decoration: BoxDecoration( Colors.blue),

【讨论】：