flutter - 如何制作像 "zebra"这样的交替颜色数据表行

Question

我正在尝试制作一个类似于我将在下面给出的示例的表格。
在示例中，表的行交替显示灰色和白色。
我有一个包含 MySQL 数据库数据的数据表，我不知 Prop 体的行数，它们根据数据量而变化。
按照这个逻辑，我想我需要一个计数器来计算行数，如果我们说这条线是偶数，那么它就会用灰色填充。但是我是 Flutter 的新手，我不知道如何在这里实现它。
我也想问一下例子中页面顶部使用了什么样的widget。它看起来像一个标签栏，是吗？

Answer 1

对于元素列表，您可以使用 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),
        );