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

Question

我正在 flutter 中创建动态数据表视图，其中列标题和行值是动态添加的。数据是一个 Json 响应，标题是一个字符串数组，要在行中显示的数据也是一个字符串数组。目标是在表视图中显示数据，而不需要任何硬编码值。\n这就是我尝试过的方法就是显示数据。

\n

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

\n

这是 JSON 响应

\n

 "DayEnd": {\n        "ColumnWidths": "40\xc2\xb4168\xc2\xb496\xc2\xb496\xc2\xb4108\xc2\xb4156",\n        "Headers": "SL.>\xc2\xb4Customer< \xc2\xb4Balance Qty>\xc2\xb4Amount>\xc2\xb4Oldest / Recent ",\n        "FieldSeparator": "\xc2\xb4",\n        "DataList": [\n            {\n                "Data": "1. \xc2\xb4ABD \xc2\xb414 / 14.60\xc2\xb411,090\xc2\xb4313 / 313",\n                "NextLevelZoomData": [\n                    {\n                        "Element": "eg7P27fbW/GmCr"\n                    },\n                    {\n                        "Element": "AAA=="\n                    }\n                ],\n                "NextLevelZoomType": 2\n            },\n            {\n                "Data": "2. \xc2\xb4LATA\xc2\xb416\xc2\xb47,921\xc2\xb420 / 9",\n                "NextLevelZoomData": [\n                    {\n                        "Element": "MT63z0m7piukmtJZqdZ"\n                    },\n                    {\n                        "Element": "QT/2zE/AAA="\n                    }\n                ],\n                "NextLevelZoomType": 2\n            },\n            {\n                "Data": "3. \xc2\xb4ANAND\xc2\xb411\xc2\xb4915\xc2\xb4426 / 426",\n                "NextLevelZoomData": [\n                    {\n                        "Element": "AAA="\n                    }\n                ],\n                "NextLevelZoomType": 2\n            },\n            {\n                "Data": "4. \xc2\xb4Asts\xc2\xb41\xc2\xb41,010\xc2\xb427 / 27",\n                "NextLevelZoomData": [\n                    {\n                        "Element": "w/VbTHwKgQAAA=="\n                    }\n                ],\n                "NextLevelZoomType": 2\n            },\n            }\n

\n

上面的响应给出了一个Headers由特殊字符“`”分隔的字符串数据，每个字符必须显示在每个列标题中，以便转换为数组。同样的数据也是如此。columnWidth 中提到了必须为每个数据维护的列宽\n类似地，数据的对齐方式（如“SL.>”然后“>”）必须右对齐。

\n

我不确定这是否是获取它的正确方法，这会产生错误

\n

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

\n

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

\n

Answer 1

步骤1：

\n

[\n  {\n    "DayEnd": [\n      {\n        "ColumnWidths": "40\xc2\xb4168\xc2\xb496\xc2\xb496\xc2\xb4108\xc2\xb4156",\n        "Headers": "SL.>\xc2\xb4Customer< \xc2\xb4Balance Qty>\xc2\xb4Amount>\xc2\xb4Oldest / Recent ",\n        "FieldSeparator": "\xc2\xb4",\n        "DataList": [\n          {\n            "Data": "1. \xc2\xb4ABD \xc2\xb414 / 14.60\xc2\xb411,090\xc2\xb4313 / 313",\n            "NextLevelZoomData": [\n              {\n                "Element": "eg7P27fbW/GmCr"\n              },\n              {\n                "Element": "AAA=="\n              }\n            ],\n            "NextLevelZoomType": 2\n          }\n        ]\n      }\n    ]\n  }\n]\n

\n

第2步：

\n

 class TableModel {\n  TableModel(this.headerData, this.rowData);\n  List<String> headerData;\n  List<List<String>> rowData;\n\n  factory TableModel.fromJson(Map<String, dynamic> json) {\n    return TableModel(\n      json[\'DayEnd\'][0]["Headers"].split(\'\xc2\xb4\').toList(),\n      buildRowData(json),\n    );\n  }\n}\n\nList<List<String>> buildRowData(Map<String, dynamic> json){\n  List<List<String>> rowDataCollection = [];\n  json[\'DayEnd\'][0]["DataList"].forEach((rows){\n    rowDataCollection.add(rows[\'Data\'].split(\'\xc2\xb4\').toList());\n  });\n\n  return rowDataCollection;\n}\n

\n

步骤3：

\n

Future<void> generateList() async {\n    String responseBody = await rootBundle.loadString("assets/data.json");\n    var list = await json.decode(responseBody).cast<Map<String, dynamic>>();\n    return await list\n        .map<TableModel>((json) => TableModel.fromJson(json))\n        .toList();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return SafeArea(\n        child: Scaffold(\n            appBar: AppBar(\n              title: Text(\'DataTable\'),\n            ),\n            body: FutureBuilder(\n              future: generateList(),\n              builder: (context, snapShot) {\n                if (snapShot.data == null ||\n                    snapShot.connectionState == ConnectionState.waiting ||\n                    snapShot.hasError ||\n                    snapShot.data.length == 0) {\n                  return Container(\n                    child: Center(child: CircularProgressIndicator()),\n                  );\n                } else {\n                  return ListView.builder(\n                      shrinkWrap: true,\n                      scrollDirection: Axis.vertical,\n                      itemCount: snapShot.data.length,\n                      itemBuilder: (BuildContext context, int index) {\n                        final TableModel table = snapShot.data[index];\n                        return SingleChildScrollView(\n                          scrollDirection: Axis.horizontal,\n                          child: DataTable(\n                            columns: table.headerData.map<DataColumn>((e) {\n                              var columnName = e;\n                              TextAlign align;\n                              if (columnName.contains(\'<\')) {\n                                align = TextAlign.start;\n                                columnName = columnName.replaceAll(\'<\', \'\');\n                              } else if (columnName.contains(\'>\')) {\n                                align = TextAlign.end;\n                                columnName = columnName.replaceAll(\'>\', \'\');\n                              } else {\n                                align = TextAlign.center;\n                              }\n\n                              return DataColumn(\n                                  label: Text(\n                                columnName,\n                                textAlign: align,\n                              ));\n                            }).toList(),\n                            rows: table.rowData.map<DataRow>((e) {\n                              return DataRow(\n                                  cells: e\n                                      .map<DataCell>((e) => DataCell(Text(e)))\n                                      .toList());\n                            }).toList(),\n                          ),\n                        );\n                      });\n                }\n              },\n            )));\n  }\n

\n

\n