Flutter 使用不同的背景色在静态行之间添加动态行表

我想展示一个动态表格

下面是我正在使用的代码

@override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: isAPICall
            ? spinner()
            : ListView.builder(
                itemCount: reportList.length,
                itemBuilder: (context, index) {
                  return reportListData(index);
                }));
  }



 Widget reportListData(int propertyIndex) {
    Data data = reportList[propertyIndex];

    return GestureDetector(
        child: SingleChildScrollView(
            child: Center(
                child:
                    Column(mainAxisSize: MainAxisSize.max, children: <Widget>[
      Container(
          color: Colors.white,
          padding: EdgeInsets.fromLTRB(20.0, 0, 20.0, 0),
          child: Table(
              border: TableBorder.all(color: Colors.black),
              columnWidths: {
                0: FractionColumnWidth(.25),
                0: FractionColumnWidth(.25),
                0: FractionColumnWidth(.25),
                0: FractionColumnWidth(.25),
              },
              children: [
                TableRow(children: [
                  Container(
                      padding: EdgeInsets.all(10.0), child: Text(data.level)),
                  Container(
                      padding: EdgeInsets.all(10.0),
                      child: Text(data.recievedAmt.toString())),
                  Container(
                      padding: EdgeInsets.all(10.0),
                      child: Text(data.pendingAmt.toString())),
                  Container(
                      padding: EdgeInsets.all(10.0),
                      child: Text(data.totalAmt.toString())),
                ]),
              ])),
    ]))));
  }
}

@覆盖
小部件构建（构建上下文）{
返回脚手架(
背景颜色：Colors.white，
正文：isAPICall
？旋转器（）
：ListView.builder(
itemCount:reportList.length，
itemBuilder：（上下文，索引）{
返回reportListData（索引）；
}));
}
小部件reportListData（int propertyIndex）{
数据=报表列表[propertyIndex]；
返回手势检测器(
子：SingleChildScrollView(
儿童：中心(
儿童：
列（mainAxisSize:mainAxisSize.max，子项：[
容器(
颜色：颜色，白色，
填充：来自LTRB（20.0,0,20.0,0）的边缘设置，
孩子：桌子(
边框：表格边框。全部（颜色：Colors.black），
列宽：{
0:FractionColumnWidth（.25），
0:FractionColumnWidth（.25），
0:FractionColumnWidth（.25），
0:FractionColumnWidth（.25），
},
儿童：[
TableRow（儿童：[
容器(
填充：EdgeInsets.all（10.0），子级：Text（data.level）），
容器(
填充：所有边缘设置（10.0），
子项：文本（data.receivedamt.toString（）），
容器(
填充：所有边缘设置（10.0），
子项：文本（data.pendingAmt.toString（）），
容器(
填充：所有边缘设置（10.0），
子项：文本（data.totalAmt.toString（）），
]),
])),
]))));
}
}

这里我想添加页眉和页脚行。 页眉行表示每列的标题，而页脚行则有两列

如何在代码中添加页眉和页脚 同样地,

如果没有数据，则需要显示带有标题的文本“无数据” 2.我需要为白色和灰色等行添加可选背景色-

代码示例：

class RadioTest extends StatefulWidget {
  @override
  _RadioTestState createState() => _RadioTestState();
}

class _RadioTestState extends State<RadioTest> {
  ScrollController _scrollController;
  List<String> list;
  @override
  void initState() {
    super.initState();
    _scrollController = ScrollController()
      ..addListener(() {
        print("offset = ${_scrollController.offset}");
      });
    list = List<String>();
    for (var i = 0; i < 10; i++) {
      list.add(i.toString());
    }
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Table(
        children: [
          TableRow(
            children: [
              TableCell(
                child: Text("level"),
              ),
              TableCell(
                child: Text("number 0 "),
              ),
              TableCell(
                child: Text("number 1 "),
              ),
              TableCell(
                child: Text("number 2 "),
              ),
            ],
          ),
          if (list.isNotEmpty)
            ...list.map(
              (item) => TableRow(
                children: [
                  TableCell(
                    child: Center(
                      child: Text("level-$item"),
                    ),
                  ),
                  TableCell(
                    child: Center(
                      child: Text("-"),
                    ),
                  ),
                  TableCell(
                    child: Center(
                      child: Text("-"),
                    ),
                  ),
                  TableCell(
                    child: Center(
                      child: Text("-"),
                    ),
                  ),
                ],
              ),
            ),
          TableRow(
            children: [
              TableCell(
                child: Text("footer"),
              ),
              TableCell(
                child: Text("number 0 "),
              ),
              TableCell(
                child: Text("number 1 "),
              ),
              TableCell(
                child: Text("number 2 "),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class RadioTest扩展了StatefulWidget{
@凌驾
_RadioTestState createState（）；
}
类_RadioTestState扩展状态{
ScrollController\u ScrollController；
名单；
@凌驾
void initState（）{
super.initState（）；
_scrollController=scrollController（）
…addListener（）{
打印（“偏移量=${u scrollController.offset}”）；
});
list=list（）；
对于（变量i=0；i<10；i++）{
添加（i.toString（））；
}
}
@凌驾
小部件构建（构建上下文）{
返回填充(
填充：常数边集全部（8.0），
孩子：桌子(
儿童：[
桌椅(
儿童：[
表细胞(
子项：文本（“级别”），
),
表细胞(
子项：文本（“数字0”），
),
表细胞(
子项：文本（“数字1”），
),
表细胞(
子项：文本（“数字2”），
),
],
),
if（list.isNotEmpty）
…list.map(
（项目）=>TableRow(
儿童：[
表细胞(
儿童：中心(
子项：文本（“级别-$item”），
),
),
表细胞(
儿童：中心(
子项：文本（“-”），
),
),
表细胞(
儿童：中心(
子项：文本（“-”），
),
),
表细胞(
儿童：中心(
子项：文本（“-”），
),
),
],
),
),
桌椅(
儿童：[
表细胞(
子项：文本（“页脚”），
),
表细胞(
子项：文本（“数字0”），
),
表细胞(
子项：文本（“数字1”），
),
表细胞(
子项：文本（“数字2”），
),
],
),
],
),
);
}
}

我只是使用了一些虚拟数据，如果它不是空的构建表行，则将一些案例置于数据状态，否则不要这样做。
希望它能帮你好运