Question

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

我尝试通过用 Text 小部件包装特定单元格的 Container 小部件来实现，但我得到的颜色格式不正确。它不会填充整个单元格，而是仅覆盖单元格的中间部分，如下所示：here is what I have created

我想用红色填充整个单元格。喜欢：here is what I want to achieve

这是我的表格代码：

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 的单元格。

P.S. 我使用的是 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),
              )),

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

2 个答案: