在颤振中更改数据表的交替行颜色

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