如何在flutter中用传递的map json数据显示表格或类似结构？

Question

我有一个 person_details.dart 文件中包含一个Map类型的变量，如下所示

class PersonDetails extends StatefulWidget {
  final Map selectedData;
  ...

选择的数据如下

{ "id":"12345", "name":"Sameer Jadhav", "score" : 90}

所以在我的flutter应用中，当我导航到下一个屏幕时，我想动态显示表格（或类似的结构），就像下面的那样

_________________________
 KEY     VALUES
_________________________
 id      12345
_________________________
 name    Sameer Jadhav
_________________________
 score   90
_________________________

注意：JSON数据字段可以改变，包括更多更少的字段si.e。

{ "id":"12345", "name":"Sameer Jadhav", "score" : 90, "address" : "India"}

所以显示应该动态生成地图中可用字段数的表行。

所以有什么方法在flutter实现同样的。先谢谢你。

Answer 1

生成下面这个模型，并在你的模型中设置接收到的值，通过对象符号，你可以得到所有的值，如果有任何关键字，你可以在其中添加。

在你得到值的地方设置这个，并通过构造函数传递这个值。

PersonDetails.fromJson(data);

声明你的模型。

 class PersonDetails {
          String id;
          String name;
          int score;
          String address;

          PersonDetails({this.id, this.name, this.score, this.address});

          PersonDetails.fromJson(Map<String, dynamic> json) {
            id = json['id'];
            name = json['name'];
            score = json['score'];
            address = json['address'];
          }

          Map<String, dynamic> toJson() {
            final Map<String, dynamic> data = new Map<String, dynamic>();
            data['id'] = this.id;
            data['name'] = this.name;
            data['score'] = this.score;
            data['address'] = this.address;
            return data;
          }
        }

Answer 2

@hiashutoshsingh 谢谢你的时间。

似乎我想明白了我想要实现的东西。

Container(
    child: DataTable(
      columns: const <DataColumn>[
        DataColumn(label: Text('Field')),
        DataColumn(label: Text('Data')),
      ],
      rows: widget.selectedData.entries
          .map((e) => DataRow(cells: [
                DataCell(Text(e.key.toString())),
                DataCell(Text(e.value.toString())),
              ]))
          .toList(),
    ),
  ),

通过使用DataTable，你可以显示出你想要的数据。Map 成行表 key value 对动态地。