如何更改 flutter 表中特定单元格的背景颜色

Question

在我的 flutter 项目中，我正在使用Table小部件实现类似表的结构。 我想更改/设置该表格特定单元格的背景颜色。

我尝试通过使用Container小部件包装特定单元格的Text小部件来做到这一点，但我得到的颜色格式不正确。 它不会填满整个单元格，而是只覆盖单元格的中间部分，如下所示：这是我创建的

我希望整个单元格充满红色。 喜欢：这是我想要实现的目标

这是我的表格代码：

class SlotsManagement extends StatefulWidget {
  @override
  _SlotsManagementState createState() => _SlotsManagementState();
}

class _SlotsManagementState extends State<SlotsManagement> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: aapBarSection('Slots Management', Colors.blueAccent[700],
          'Poppins-Medium', 16.0, context),
      body: Container(
        width: MediaQuery.of(context).size.width,
        margin: EdgeInsets.all(10.0),
        child: Table(
          defaultColumnWidth: FixedColumnWidth(100.0),
          border: TableBorder.all(width: 1.0, color: Colors.black),
          textDirection: TextDirection.ltr,
          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
          // columnWidths: {0: FractionColumnWidth(.4)},
          children: [
            TableRow(children: [
              TableCell(
                  child: Text(
                '\*',
                style: TextStyle(fontSize: 10),
                textAlign: TextAlign.center,
              )),
              TableCell(
                  child: Text('Slot 1',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('Slot 2',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('Slot 3',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center))
            ]),
            TableRow(children: [
              TableCell(
                  child: Text('Monday',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('1',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('A',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('B',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center))
            ]),
            TableRow(children: [
              TableCell(
                  child: Text('Tuesday',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('2',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('C',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('D',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center))
            ]),
            TableRow(children: [
              TableCell(
                  child: Text('Wednesday',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('3',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('E',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('F',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center))
            ]),
            TableRow(children: [
              TableCell(
                  child: Text('Thursday',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('4',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Container(
                      color: Colors.redAccent,
                      child: Text('G',
                          style: TextStyle(fontSize: 10),
                          textAlign: TextAlign.center))),
              TableCell(
                  child: Text('H',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center))
            ]),
            TableRow(children: [
              TableCell(
                  child: Text('Friday',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('5',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('I',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('J',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center))
            ]),
            TableRow(children: [
              TableCell(
                  child: Text('Saturday',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('6',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('K',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('L',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center))
            ]),
            TableRow(children: [
              TableCell(
                  child: Text('Sunday',
                      style: TextStyle(fontSize: 15),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('7',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('M',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center)),
              TableCell(
                  child: Text('N',
                      style: TextStyle(fontSize: 10),
                      textAlign: TextAlign.center))
            ]),
          ],
        ),
      ),
    );
  }
}

我想更改特定单元格的背景颜色（既不是整行也不是整列） 。 在我的示例中，它是写入G的单元格。

PS我使用的是 Table 小部件而不是 DataTable 小部件

Answer 1

您需要将此属性添加到 TableCells

verticalAlignment: TableCellVerticalAlignment.fill,

并将alignment属性添加到容器

alignment: Alignment.center,

像这样

        TableCell(
          verticalAlignment: TableCellVerticalAlignment.fill,
          child: Container(
            color: Colors.redAccent,
            alignment: Alignment.center,
            child: Text('G', style: TextStyle(fontSize: 10), textAlign: TextAlign.center),
          ),
        )

但我建议创建可重复使用的小部件

class Cell extends StatelessWidget {
  final String text;
  final Color color;

  Cell({@required this.text, @required this.color, Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TableCell(
      verticalAlignment: TableCellVerticalAlignment.fill,
      child: Container(
        color: color,
        alignment: Alignment.center,
        child: Text(text, style: TextStyle(fontSize: 10), textAlign: TextAlign.center),
      ),
    );
  }
}

像这样

Cell(text: 'G', color: Colors.redAccent),

Answer 2

试试看。

  TableCell(
              verticalAlignment: TableCellVerticalAlignment.fill,
              child: Container(
                alignment: Alignment.center,
                color: Colors.red,
                child: Text('4',
                    style: TextStyle(fontSize: 10),
                    textAlign: TextAlign.center),
              )),