如何在 Flutter 中更改 DataTable 中一行的颜色？

Question

我有数据table，我用这种方式改变了所有行的颜色：

class _SimpleTableState extends State<SimpleTable> {
  @override
  Widget build(BuildContext context) {
    return DataTable(
       dataRowColor: 
         MaterialStateColor.resolveWith((states) => Colors.lightGreen),
      columns: initHeader(),
      rows: initRows(),
    );
  }

但是如何只改变一行的颜色，例如索引为 1?

initRows():

  List<DataRow> initRows() {
    List<DataRow> items = [];
    var itemList = widget.items;
    for (var r = 0; r < itemList.length; r++) {
      items.add(createRow(itemList[r]));
    }
    return items;
  }

xzxzxzxzxxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxxzxzxzzxzxzxzxzxzxxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxzxz=x[xx1]

使用解决方案后编辑（所有代码）：

import 'package:flutter/material.dart';
import 'package:warehouse/components/simpleTable/headerTable.dart';

class SimpleTable extends StatefulWidget {
  final List<HeaderTable> headerList;
  final List<dynamic> items;

  SimpleTable(this.headerList, this.items);

  @override
  _SimpleTableState createState() => _SimpleTableState();
}

class _SimpleTableState extends State<SimpleTable> {
  var _highlightIndex = 1;
  @override
  Widget build(BuildContext context) {
    return DataTable(
      dataRowColor:
          MaterialStateColor.resolveWith((states) => Colors.lightGreen),
      columns: initHeader(),
      rows: initRows(_highlightIndex),
    );
  }

  List<DataColumn> initHeader() {
    List<DataColumn> header = [];
    for (var i = 0; i < widget.headerList.length; i++) {
      header.add(new DataColumn(
          label: Flexible(
        child: Text(
          widget.headerList[i].name,
          style: TextStyle(fontStyle: FontStyle.italic),
        ),
      )));
    }
    return header;
  }

  DataCell createCell(String text) {
    return DataCell(Flexible(
        child: Text(
      text,
    )));
  }

  List<DataRow> initRows(int highlightIndex) {
    List<DataRow> items = [];
    var itemList = widget.items;
    for (var r = 0; r < itemList.length; r++) {
      if (r == highlightIndex) {
        items.add(createRow(itemList[r],
            color: MaterialStateProperty.all(Colors.red)));
      } else {
        items.add(createRow(itemList[r]));
      }
    }
    return items;
  }

  DataRow createRow(Map item, {MaterialStateProperty<Color> color}) {
    var headerList = widget.headerList;
    List<DataCell> cell = [];
    for (var i = 0; i < headerList.length; i++) {
      cell.add(createCell(item[headerList[i].value]));
    }
    return DataRow(cells: cell);
  }
}

Answer 1

DataRow class has a property color 类型 MaterialStateProperty<Color?>?。

见

/// Flutter code sample for DataTable

// This sample shows how to display a [DataTable] with three columns: name, age, and
// role. The columns are defined by three [DataColumn] objects. The table
// contains three rows of data for three example users, the data for which
// is defined by three [DataRow] objects.
//
// ![](https://flutter.github.io/assets-for-api-docs/assets/material/data_table.png)

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DataTable(
      columns: const <DataColumn>[
        DataColumn(
          label: Text(
            'Name',
            style: TextStyle(fontStyle: FontStyle.italic),
          ),
        ),
        DataColumn(
          label: Text(
            'Age',
            style: TextStyle(fontStyle: FontStyle.italic),
          ),
        ),
        DataColumn(
          label: Text(
            'Role',
            style: TextStyle(fontStyle: FontStyle.italic),
          ),
        ),
      ],
      rows: [
        DataRow(
          cells: <DataCell>[
            DataCell(Text('Sarah')),
            DataCell(Text('19')),
            DataCell(Text('Student')),
          ],
        ),
        DataRow(
          color: MaterialStateProperty.all(Colors.green),
          cells: <DataCell>[
            DataCell(Text('Janine')),
            DataCell(Text('43')),
            DataCell(Text('Professor')),
          ],
        ),
        DataRow(
          cells: <DataCell>[
            DataCell(Text('William')),
            DataCell(Text('27')),
            DataCell(Text('Associate Professor')),
          ],
        ),
      ],
    );
  }
}

在您的情况下，您可以更新 createRow() 函数以接受另一个参数 MaterialStateProperty<Color?>? color 并传入特定值 r 的颜色。

编辑：

class _SimpleTableState extends State<SimpleTable> {
  var _highlightIndex = 1;
  @override
  Widget build(BuildContext context) {
    return DataTable(
       dataRowColor: 
         MaterialStateColor.resolveWith((states) => Colors.lightGreen),
      columns: initHeader(),
      rows: initRows(_highlightIndex),
    );
  }

  List<DataRow> initRows(int highlightIndex) {
    List<DataRow> items = [];
    var itemList = widget.items;
    for (var r = 0; r < itemList.length; r++) {
      if (r == highlightIndex) {
        items.add(createRow(itemList[r], color: MaterialStateProperty.all(Colors.green)));
      } else {
        items.add(createRow(itemList[r]));
      }
    }
    return items;
  }

createRow(... , {MaterialStateProperty<Color?>? color})

如何在 Flutter 中更改 DataTable 中一行的颜色？

How to change the color of one row in DataTable in Flutter?

datatable

colors

dart

flutter