flutter - 更改 flutter 中数据表的交替行的颜色

Question

这是我的代码

class Reference extends StatefulWidget {
  @override
  _ReferenceState createState() => _ReferenceState();
}

class _ReferenceState extends State<Reference> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: ListView(
          children: [
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: DataTable(
                dataRowHeight: 30,
                dividerThickness: 1.0,
                columnSpacing: 30,
                columns: [
                  DataColumn(
                      label: Text('ID',
                          style: TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold))),
                  DataColumn(
                      label: Text('Parameter',
                          style: TextStyle(
                              fontSize: 18, fontWeight: FontWeight.bold))),
                 
                rows: [
                  DataRow(cells: [
                    DataCell(Text('1')),
                    DataCell(Text('a')),
                  ]),
                  DataRow(cells: [
                    DataCell(Text('2')),
                    DataCell(Text('b')),
                  ]),
                  DataRow(cells: [
                    DataCell(Text('15')),
                    DataCell(Text('c')),
                  ]),
                ],
              ),
            ),
            Divider(
              height: 5,
              thickness: 5,
            ),
            
 ],
        ));
  }
}

我的表有 50 行长。我没有使用构造函数，因为数据是预先确定的并且每行都不同。如何为交替行着色？我是否必须单独设置每个 DataRow 的颜色，还是有办法自动设置？我进行了搜索，得到的解决方案都与构造函数一起用于创建行。

例如我在 flutter api 上发现了这个

import 'package:flutter/material.dart';

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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  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: MyStatefulWidget(),
      ),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  static const int numItems = 10;
  List<bool> selected = List<bool>.generate(numItems, (index) => false);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      child: DataTable(
        columns: const <DataColumn>[
          DataColumn(
            label: Text('Number'),
          ),
        ],
        rows: List<DataRow>.generate(
          numItems,
          (index) => DataRow(
            color: MaterialStateProperty.resolveWith<Color>(
                (Set<MaterialState> states) {
              // All rows will have the same selected color.
              if (states.contains(MaterialState.selected))
                return Theme.of(context).colorScheme.primary.withOpacity(0.08);
              // Even rows will have a grey color.
              if (index % 2 == 0) return Colors.grey.withOpacity(0.3);
              return null; // Use default value for other states and odd rows.
            }),
            cells: [DataCell(Text('Row $index'))],
            selected: selected[index],
            onSelectChanged: (bool value) {
              setState(() {
                selected[index] = value;
              });
            },
          ),
          ),
        ),
      );
    }
  }

与构造函数一起使用

Answer 1

终于找到办法了!

我创建了一个类和该类的相应列表来包含表的所有数据。然后我使用了我在问题中提到的构造函数方法来做到这一点。

最终代码

rows: List<DataRow>.generate(
                    ReferenceList.length,
                    (index) => DataRow(
                            color: MaterialStateProperty.resolveWith<Color>(
                                (Set<MaterialState> states) {
                              // Even rows will have a grey color.
                              if (index % 2 == 0)
                                return Colors.pinkAccent.withOpacity(0.3);
                              return null; // Use default value for other states and odd rows.
                            }),
                            cells: [
                              DataCell(Center(
                                  child: Text(ReferenceList[index].id))),
                              DataCell(Center(
                                  child: Text(
                                      ReferenceList[index].parameter))),
                              DataCell(Center(
                                  child: Text(ReferenceList[index]
                                      .refValu1))),
                              DataCell(Center(
                                  child: Text(ReferenceList[index]
                                      .refVal2))),
                            ])),