flutter - 在flutter中动态显示数据表布局中的JSON数据

Question

我正在 flutter 中创建动态数据表 View ，其中动态添加列标题和行值。数据是一个 Json 响应，头部是一个字符串数组，要在行中显示的数据也是一个字符串数组。目标是在表格 View 中显示数据，没有任何硬编码值。
这就是我尝试显示数据的方式。

                     return ListView.builder(
                         shrinkWrap: true,
                         scrollDirection: Axis.vertical,
                         itemCount: snapshot.data.dataList.length,
                         itemBuilder: (BuildContext context, int index){
                           return SingleChildScrollView(
                             child: DataTable(
                               columns: (snapshot.data.headerList[index] as List).map((item) =>
                               DataColumn(
                                   label:(
                                       List.generate(item.length,(index){
                                         return Text(item[index].toString());
                                       })
                                   )
                               )).toList(),
                               rows: (snapshot.data.dataList[index].dataList as List).map((item) =>
                               
                               DataRow(
                                 
                                   cells:<DataCell>[
                                     DataCell(
                                         List.generate(item.length,(index){
                                           return Text(item[index].toString());
                                         })
                                     )
                                    ])).toList(),
                             ),

这是 JSON 响应

 "DayEnd": {
        "ColumnWidths": "40´168´96´96´108´156",
        "Headers": "SL.>´Customer< ´Balance Qty>´Amount>´Oldest / Recent ",
        "FieldSeparator": "´",
        "DataList": [
            {
                "Data": "1. ´ABD ´14 / 14.60´11,090´313 / 313",
                "NextLevelZoomData": [
                    {
                        "Element": "eg7P27fbW/GmCr"
                    },
                    {
                        "Element": "AAA=="
                    }
                ],
                "NextLevelZoomType": 2
            },
            {
                "Data": "2. ´LATA´16´7,921´20 / 9",
                "NextLevelZoomData": [
                    {
                        "Element": "MT63z0m7piukmtJZqdZ"
                    },
                    {
                        "Element": "QT/2zE/AAA="
                    }
                ],
                "NextLevelZoomType": 2
            },
            {
                "Data": "3. ´ANAND´11´915´426 / 426",
                "NextLevelZoomData": [
                    {
                        "Element": "AAA="
                    }
                ],
                "NextLevelZoomType": 2
            },
            {
                "Data": "4. ´Asts´1´1,010´27 / 27",
                "NextLevelZoomData": [
                    {
                        "Element": "w/VbTHwKgQAAA=="
                    }
                ],
                "NextLevelZoomType": 2
            },
            }

上面的响应给出了一个字符串数据 Headers由特殊字符“`”分隔，每个字符必须显示在每个列标题中，以便将其转换为数组。同样的数据也是如此。 columnWidth 中提到了必须为每个数据维护的列宽
类似地，数据的对齐方式如“SL.>” then ">“它必须右对齐。
我不确定这是否是获取它的正确方法，这会出现错误

The argument type 'List<Text>' can't be assigned to the parameter type 'Widget'.

任何以更好的方式接近的想法将不胜感激。

Answer 1

第1步:

[
  {
    "DayEnd": [
      {
        "ColumnWidths": "40´168´96´96´108´156",
        "Headers": "SL.>´Customer< ´Balance Qty>´Amount>´Oldest / Recent ",
        "FieldSeparator": "´",
        "DataList": [
          {
            "Data": "1. ´ABD ´14 / 14.60´11,090´313 / 313",
            "NextLevelZoomData": [
              {
                "Element": "eg7P27fbW/GmCr"
              },
              {
                "Element": "AAA=="
              }
            ],
            "NextLevelZoomType": 2
          }
        ]
      }
    ]
  }
]

第2步:

 class TableModel {
  TableModel(this.headerData, this.rowData);
  List<String> headerData;
  List<List<String>> rowData;

  factory TableModel.fromJson(Map<String, dynamic> json) {
    return TableModel(
      json['DayEnd'][0]["Headers"].split('´').toList(),
      buildRowData(json),
    );
  }
}

List<List<String>> buildRowData(Map<String, dynamic> json){
  List<List<String>> rowDataCollection = [];
  json['DayEnd'][0]["DataList"].forEach((rows){
    rowDataCollection.add(rows['Data'].split('´').toList());
  });

  return rowDataCollection;
}

第 3 步:

Future<void> generateList() async {
    String responseBody = await rootBundle.loadString("assets/data.json");
    var list = await json.decode(responseBody).cast<Map<String, dynamic>>();
    return await list
        .map<TableModel>((json) => TableModel.fromJson(json))
        .toList();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(
              title: Text('DataTable'),
            ),
            body: FutureBuilder(
              future: generateList(),
              builder: (context, snapShot) {
                if (snapShot.data == null ||
                    snapShot.connectionState == ConnectionState.waiting ||
                    snapShot.hasError ||
                    snapShot.data.length == 0) {
                  return Container(
                    child: Center(child: CircularProgressIndicator()),
                  );
                } else {
                  return ListView.builder(
                      shrinkWrap: true,
                      scrollDirection: Axis.vertical,
                      itemCount: snapShot.data.length,
                      itemBuilder: (BuildContext context, int index) {
                        final TableModel table = snapShot.data[index];
                        return SingleChildScrollView(
                          scrollDirection: Axis.horizontal,
                          child: DataTable(
                            columns: table.headerData.map<DataColumn>((e) {
                              var columnName = e;
                              TextAlign align;
                              if (columnName.contains('<')) {
                                align = TextAlign.start;
                                columnName = columnName.replaceAll('<', '');
                              } else if (columnName.contains('>')) {
                                align = TextAlign.end;
                                columnName = columnName.replaceAll('>', '');
                              } else {
                                align = TextAlign.center;
                              }

                              return DataColumn(
                                  label: Text(
                                columnName,
                                textAlign: align,
                              ));
                            }).toList(),
                            rows: table.rowData.map<DataRow>((e) {
                              return DataRow(
                                  cells: e
                                      .map<DataCell>((e) => DataCell(Text(e)))
                                      .toList());
                            }).toList(),
                          ),
                        );
                      });
                }
              },
            )));
  }