我正在尝试制作一个类似于我将在下面给出的示例的表格。
在示例中,表的行交替显示灰色和白色。
我有一个包含 MySQL 数据库数据的数据表,我不知 Prop 体的行数,它们根据数据量而变化。
按照这个逻辑,我想我需要一个计数器来计算行数,如果我们说这条线是偶数,那么它就会用灰色填充。但是我是 Flutter 的新手,我不知道如何在这里实现它。
我也想问一下例子中页面顶部使用了什么样的widget。它看起来像一个标签栏,是吗?
最佳答案
对于元素列表,您可以使用 ListView
并在 itemBuilder
中选择所需的颜色像这样:
ListView.builder(
reverse: true,
itemBuilder: (BuildContext context, int position) {
Color color = position.isOdd ? Colors.black12 : Colors.white; //choose color
return ColoredWidget(color); // some widget with color background
},
itemCount: snapshot.data.questionList.length,
)
UPD
DataTable
:看来你不能。
如果您查看方法
build
在 DataTable
类 - 它生成 List<TableRow>
并返回 Table
用它的行列表:final List<TableRow> tableRows = List<TableRow>.generate(
rows.length + 1, // the +1 is for the header row
(int index) {
return TableRow(
key: index == 0 ? _headingRowKey : rows[index - 1].key,
decoration: index > 0 && rows[index - 1].selected ? _kSelectedDecoration
: _kUnselectedDecoration,
children: List<Widget>(tableColumns.length),
);
},
);
我相信只有一种方法 - 定制
DataTable
- 将此类复制到您的项目并更改此位置,例如:
final BoxDecoration _customGrayDecoration = BoxDecoration(
color: Color(0x1F000000),
);
return TableRow(
key: index == 0 ? _headingRowKey : rows[index - 1].key,
decoration: index > 0 && rows[index - 1].selected
? _kSelectedDecoration
:
index > 0 && index.isOdd
? _customGrayDecoration
: _kUnselectedDecoration,
children: List<Widget>(tableColumns.length),
);
关于flutter - 如何制作像 "zebra"这样的交替颜色数据表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58534225/