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

问题描述

在我的 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',TableCell(
                  child: Text('Slot 3',textAlign: TextAlign.center))
            ]),TableRow(children: [
              TableCell(
                  child: Text('Monday',TableCell(
                  child: Text('1',TableCell(
                  child: Text('A',TableCell(
                  child: Text('B',TableRow(children: [
              TableCell(
                  child: Text('Tuesday',TableCell(
                  child: Text('2',TableCell(
                  child: Text('C',TableCell(
                  child: Text('D',TableRow(children: [
              TableCell(
                  child: Text('Wednesday',TableCell(
                  child: Text('3',TableCell(
                  child: Text('E',TableCell(
                  child: Text('F',TableRow(children: [
              TableCell(
                  child: Text('Thursday',TableCell(
                  child: Text('4',TableCell(
                  child: Container(
                      color: Colors.redAccent,child: Text('G',textAlign: TextAlign.center))),TableCell(
                  child: Text('H',TableRow(children: [
              TableCell(
                  child: Text('Friday',TableCell(
                  child: Text('5',TableCell(
                  child: Text('I',TableCell(
                  child: Text('J',TableRow(children: [
              TableCell(
                  child: Text('Saturday',TableCell(
                  child: Text('6',TableCell(
                  child: Text('K',TableCell(
                  child: Text('L',TableRow(children: [
              TableCell(
                  child: Text('Sunday',TableCell(
                  child: Text('7',TableCell(
                  child: Text('M',TableCell(
                  child: Text('N',],),);
  }
}

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

P.S. 我使用的是 Table 小部件而不是 DataTable 小部件

解决方法

您需要将此属性添加到 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,child: Text(text,);
  }
}

喜欢这个

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

试试看。

  TableCell(
              verticalAlignment: TableCellVerticalAlignment.fill,child: Container(
                alignment: Alignment.center,color: Colors.red,child: Text('4',)),

tablecell tablecell