Question

我有一个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"),
    ),
  ],
)

Answer 1

现在在flutter版本1.22中，您可以像这样

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

Answer 2

对于仍在寻找答案的任何人，我发现可以使用IntrinsicWidth，Stack和Container来完成。我已根据Buggycoder的问题60修改了高度。由于dataRowHeight小部件的默认DataTable是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"),
                  ),
                ],
              ),
            ],
          ),
        )

Answer 3

Container与BoxDecoration-> Column / Row-> DataTable

您也可以使用BoxDecoration的{{1}}属性。

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

gradient

Answer 4

如果要突出显示列，可以通过一种简便的方法来更改背景，而不必更改背景，而是更改DataColumn中文本的颜色。

Answer 5

 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],
            );
          },
         ),
        ),

Answer 6

新版本的 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),)),
        ],
      ),

    ],
  ),

Answer 7

您可以为 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());

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

7 个答案: