如何更改 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),
              )),