Flutter - 用动态数据填充表格

Question

在我的类(class)中，我有一个名为report 的变量，它看起来像这样:

{
    "id": 1,
    "type": "my type",
    "name": "Report 1",
    "client_name": "John",
    "website": "john.com",
    "creation_time": "2019-03-12T22:00:00.000Z",
    "items": [{
            "id": 1,
            "report_id": 1,
            "place": "Kitchen",
            "type": "sometype",
            "producer": "somepro",
            "serial_number": "123123",
            "next_check_date": "2019-03-19",
            "test_result": "Verified",
            "comments": "some comments"
        }]
    }

我想用 flutter 在表格中显示 items 的列表。

到目前为止，我只是创建了一个静态表，如下所示:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(report['name'])),
      body: Container(
        child: Table(children: [
                  TableRow(children: [
                    Text("TITLE 1"),
                    Text("TITLE 2"),
                    Text("TITLE 3"),
                  ]),
                  TableRow(children: [
                    Text("C1"),
                    Text("C2"),
                    Text("C3"),
                  ])
        ])
      )
    );
  }
}

找不到任何有关如何使用我的 JSON items 列表填充表格行(标题可以保持静态)的示例。每行应该是 items JSON 数组中的一个项目。

有什么想法吗？

Answer 1

您可以将 items 映射到 TableRow。不要忘记以 toList() 结尾。

例如:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text(report['name'])),
        body: Container(
            child: Table(
                children: (report['items'] as List)
                    .map((item) => TableRow(children: [
                          Text(item['id'].toString()),
                          Text(item['report_id'].toString()),
                          Text(item['place']),
                          // you can have more properties of course
                        ]))
                    .toList())));
  }

如果你想要你提到的静态标题，你可以在你上面创建的列表上使用 insert，然后你有:

  @override
  Widget build(BuildContext context) {
    var list = (report['items'] as List)
        .map((item) => TableRow(children: [
              Text(item['id'].toString()),
              Text(item['report_id'].toString()),
              Text(item['place']),
              //...
            ]))
        .toList();
    list.insert(
        0,
        TableRow(children: [
          Text("TITLE 1"),
          Text("TITLE 2"),
          Text("TITLE 3"),
          //...
        ]));
    return Scaffold(
        appBar: AppBar(title: Text(report['name'])),
        body: Container(child: Table(children: list)));
  }