如何在传递的地图 json 数据中显示表格或类似结构

Posted 2023-02-23

【中文标题】如何在传递的地图 json 数据中显示表格或类似结构

【英文标题】：How do I display table or similar structure in flutter with passed map json data

【发布时间】：2020-09-12 04:13:07

【问题描述】：

我有一个 person_details.dart 文件，其类型为 Map 变量，如下所示

class PersonDetails extends StatefulWidget 
  final Map selectedData;
  ...

选择的数据如下

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

所以在我的颤振应用中，当我导航到下一个屏幕时，我想要一个动态显示表格（或类似结构），如下所示

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

注意：JSON 数据字段可以更改为包含更多/更少字段 即

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

因此显示应该动态地为地图中可用字段的数量生成表格行。

那么在颤振中有什么方法可以达到同样的效果。提前谢谢你。

【参考方案1】：

@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 对的行表中。

【讨论】：

我有一个地图数据列表。如何在 dataTable 中显示？

【参考方案2】：

在下面生成这个模型并在模型中设置接收到的值，通过对象表示法，您可以获得所有值，以防万一您可以在其中添加任何关键字。

在你获得价值的地方设置 this 并通过构造函数传递它。

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;