如何在 Flutter 中更改 DataColumn 的背景颜色？答案

【问题标题】：How to change background color of DataColumn in Flutter?如何在 Flutter 中更改 DataColumn 的背景颜色？
【发布时间】：2020-02-27 12:52:43
【问题描述】：

我有一个DataTable 小部件，用于以表格格式显示一些数据。我找不到任何方法来更改 DataColumn 的背景颜色，它默认为白色。

我尝试将 label 包装在 Container 中，但这无济于事，因为容器采用了孩子的尺寸。

有没有更简单的方法来设置`DataColum'的背景色？

下面是一些代码供参考-

DataTable(
  dataRowHeight: 70,
  headingRowHeight: 60,
  rows: List.generate(4, (index) {
    return DataRow(
      cells: <DataCell>[
        DataCell(
          Text("Number",),
        ),
        DataCell(
          Text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
          ),
        ),
      ]
    );
  }),
  columns: [
    DataColumn(
      label: Text("Name"),
    ),
    DataColumn(
      label: Text("Description"),
    ),
  ],
)

【问题讨论】：

您找到问题的答案了吗？我需要答案。

标签： flutter dart flutter-layout

【解决方案1】：

你可以给datatable添加装饰要覆盖它，您可以像在我的代码中一样使用它的dataRowColor 属性

Widget landData() => DataTable(
  decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.centerLeft,
        end: Alignment.centerRight,
        // 10% of the width, so there are ten blinds.
        colors: <Color>[
          ColorUtils.greenGradientColor1,
          ColorUtils.greenGradientColor2,
          ColorUtils.greenGradientColor1
        ],
        // red to yellow
        tileMode: TileMode
            .repeated, // repeats the gradient over the canvas
      ),
      border: Border.all(color:Colors.white,width:2),
      borderRadius: BorderRadius.circular(16)
  ),
  onSelectAll: (b) {},
  //sortColumnIndex: 1,
  sortAscending: true,
  columnSpacing: 12,
  horizontalMargin: 0,
  //headingRowColor: MaterialStateColor.resolveWith((states) {return ColorUtils.greenlabelColor;},),
  dataRowColor: MaterialStateColor.resolveWith((states) {return Colors.white;},),
  headingRowHeight: 30,
  columns: <DataColumn>[
    DataColumn(
      label: Text("Khasra No.", textAlign: TextAlign.center,style: CommonTextStyles.formLabelStyle,),
      numeric: false,
      // onSort: (i, b) {
      //   print("$i $b");
      //   setState(() {
      //     //names.sort((a, b) => a.firstName.compareTo(b.firstName));
      //   });
      // },
      tooltip: "To display Khasra No",
    ),
    DataColumn(
      label: Text("Plot No.", textAlign: TextAlign.center,),
      numeric: false,
      // onSort: (i, b) {
      //   //print("$i $b");
      //   setState(() {
      //     //names.sort((a, b) => a.lastName.compareTo(b.lastName));
      //   });
      // },
      tooltip: "To display Plot No",
    ),
    DataColumn(
      label: Text("Area (In ha).", textAlign: TextAlign.center,),
      numeric: false,
      onSort: (i, b) {
        //print("$i $b");
        setState(() {
          //names.sort((a, b) => a.lastName.compareTo(b.lastName));
        });
      },
      tooltip: "To display Plot No",
    ),
  ],
  rows: lstLandInfo
      .map(
        (name) => DataRow(
      cells: [
        DataCell(
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text(name.khasrano),
              Text('Latitude:'),
            ],
          ),
          showEditIcon: false,
          placeholder: false,
        ),
        DataCell(
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text(name.plotno),
              Text('0.23587'),
            ],
          ),
          showEditIcon: false,
          placeholder: false,
        ),
        DataCell(
          Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text(name.area),
              Text('Longitude:' + " 0.25845"),
            ],
          ),
          showEditIcon: false,
          placeholder: false,
        )
      ],
    ),
  )
      .toList());

【讨论】：

【解决方案2】：

较新版本的flutter无法在DataRow()中设置颜色，但您可以在DataTable中设置颜色，如下例所示。

[![enter image description here][1]][1]DataTable(
    headingRowColor:
    MaterialStateColor.resolveWith((states) => Colors.blue),
    dataRowColor: MaterialStateColor.resolveWith((states) => Colors.grey),
    columns: const <DataColumn>[
      DataColumn(
        label: Text(
          'Profesional',
          style: TextStyle(fontStyle: FontStyle.italic,fontWeight: FontWeight.bold),
        ),
      ),
      DataColumn(
        label: Text(
          'Entregados',
          style: TextStyle(fontStyle: FontStyle.italic,fontWeight: FontWeight.bold),
        ),
      ),
      DataColumn(
        label: Text(
          'Aceptado',
          style: TextStyle(fontStyle: FontStyle.italic,fontWeight: FontWeight.bold),
        ),
      ),
      DataColumn(
        label: Text(
          'Rechazado',
          style: TextStyle(fontStyle: FontStyle.italic,fontWeight: FontWeight.bold),
        ),
      ),
      DataColumn(
        label: Text(
          'Pendiente',
          style: TextStyle(fontStyle: FontStyle.italic,fontWeight: FontWeight.bold),
        ),
      ),
      DataColumn(
        label: Text(
          'Total',
          style: TextStyle(fontStyle: FontStyle.italic,fontWeight: FontWeight.bold),
        ),
      ),
      DataColumn(
        label: Text(
          'Precio Aceptado',
          style: TextStyle(fontStyle: FontStyle.italic,fontWeight: FontWeight.bold),
        ),
      ),
      DataColumn(
        label: Text(
          'Precio Rechazado',
          style: TextStyle(fontStyle: FontStyle.italic,fontWeight: FontWeight.bold),
        ),
      ),
      DataColumn(
        label: Text(
          'Precio Pendiente',
          style: TextStyle(fontStyle: FontStyle.italic,fontWeight: FontWeight.bold),
        ),
      ),
    ],
    rows: const <DataRow>[
      DataRow(
        cells: <DataCell>[
          DataCell(Text('Iván Molina Pastor',style: TextStyle(color: Colors.blue),)),
          DataCell(Text('1',style:TextStyle(color: Colors.blueAccent),)),
          DataCell(Text('1',style: TextStyle(color: Colors.lightGreen),),),
          DataCell(Text('0',style: TextStyle(color: Colors.redAccent),)),
          DataCell(Text('0',style: TextStyle(color: Colors.orangeAccent),)),
          DataCell(Text('€ 36.30',style: TextStyle(color: Colors.indigo),)),
          DataCell(Text('€ 36.30',style: TextStyle(color: Colors.lightGreen),)),
          DataCell(Text('€ 0.00',style: TextStyle(color: Colors.red),)),
          DataCell(Text('€ 0.00',style: TextStyle(color: Colors.yellowAccent),)),
        ],
      ),
      DataRow(
        cells: <DataCell>[
          DataCell(Text('Juan Celdran Alenda',style:TextStyle(color: Colors.blue),)),
          DataCell(Text('3',style:TextStyle(color: Colors.blueAccent),)),
          DataCell(Text('2',style: TextStyle(color: Colors.lightGreen),),),
          DataCell(Text('0',style: TextStyle(color: Colors.redAccent),)),
          DataCell(Text('0',style: TextStyle(color: Colors.orangeAccent),)),
          DataCell(Text('€ 8,433.70',style: TextStyle(color: Colors.indigo),)),
          DataCell(Text('€ 6,316.20',style: TextStyle(color: Colors.lightGreen),)),
          DataCell(Text('€ 0.00',style: TextStyle(color: Colors.red),)),
          DataCell(Text('€ 2,117.50',style: TextStyle(color: Colors.yellowAccent),)),
        ],
      ),

    ],
  ),

【讨论】：

【解决方案3】：

 DataTable(
          showCheckboxColumn: false,
          dataRowHeight: 35,
          headingRowHeight: 35,
          columns: <DataColumn>[//column list],
          rows: List.generate( // use this instead of map()
            yourlist.length, (index) {
            return DataRow(
              color: MaterialStateColor.resolveWith((states) {
                return index % 2 == 0 ? Colors.red : Colors.black; //make tha magic!
              }),
              cells: [//cells list],
            );
          },
         ),
        ),

【讨论】：

【解决方案4】：

如果您想突出显示您的列，而不是更改背景，只需更改 DataColumn 中文本的颜色。

【讨论】：

【解决方案5】：

现在在 Flutter 1.22 版本中，你可以这样做

DataTable(
    headingRowColor:
        MaterialStateColor.resolveWith((states) => Colors.blue),
    columns: [
       DataColumn(),
       DataColumn(),
                
    ],
           
    rows: [
      DataRow(
          cells: [
              DataCell(),
              DataCell(),
          ],
      ),
    ],
)

【讨论】：

【解决方案6】：

对于仍在寻找答案的人，我发现可以通过使用IntrinsicWidth、Stack 和Container 来完成。我已经根据 thebuggycoder 的问题 60 修改了高度。由于DataTable 小部件的默认dataRowHeight 是kMinInteractiveDimension，您可以相应地替换它！

     IntrinsicWidth(
          child: Stack(
            children: [
              Container(
                height: 60, // default would be kMinInteractiveDimension
                color: Colors.blue,
              ),
              DataTable(
                dataRowHeight: 70,
                headingRowHeight: 60,
                rows: List.generate(4, (index) {
                  return DataRow(cells: <DataCell>[
                    DataCell(
                      Text(
                        "Number",
                      ),
                    ),
                    DataCell(
                      Text(
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                      ),
                    ),
                  ]);
                }),
                columns: [
                  DataColumn(
                    label: Text("Name"),
                  ),
                  DataColumn(
                    label: Text("Description"),
                  ),
                ],
              ),
            ],
          ),
        )

【讨论】：

【解决方案7】：

Container 和 BoxDecoration -> Column/Row -> DataTable

您也可以使用BoxDecoration 的gradient 属性。

查看本教程：YouTube
代码示例：GitHub

child: Container(
        width: MediaQuery.of(context).size.width - 40.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(12.0),
          color: Color(0xff5a348b),
          gradient: LinearGradient(
              colors: [Color(0xffebac38), Color(0xffde4d2a)],
              begin: Alignment.centerRight,
              end: Alignment(-1.0, -2.0)), //Gradient
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: Row(
                children: <Widget>[
                  DataTable(
                    columns: <DataColumn>[
                      DataColumn(
                        label: Text(
                          'Storage',
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 16.0,
                          ),
                        ),
                      ),
                      DataColumn(
                        label: Text(
                          '1TB',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.white,
                            fontSize: 16.0,
                          ),
                        ),
                      ),
                    ],
                    rows: <DataRow>[
                      DataRow(cells: <DataCell>[
                        DataCell(
                          Text(
                            'Smart synchronization',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 16.0,
                            ),
                          ),
                        ),
                        DataCell(
                          Icon(
                            Icons.add,
                            color: Colors.white54,
                          ),
                        ),
                      ]),
                      DataRow(cells: <DataCell>[
                        DataCell(
                          Text(
                            'Full text search',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 16.0,
                            ),
                          ),
                        ),
                        DataCell(
                          Icon(
                            Icons.edit,
                            color: Colors.white54,
                          ),
                        ),
                      ]),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),

【讨论】：

我不想改变整个DataTable的背景。我只需要更改表格标题的背景，即DataColumn 小部件。
你没有回答问题，他只是想改变 DataColumn 背景颜色