Question

在我的课堂上，我有一个名为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"
        }]
    }

我想在一张桌子上显示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)));
  }

Answer 2

您正在寻找的是ItemBuilder。您可以找到一个出色的ItemBuilders here和here实例。这里的示例虽然使用ListView构建器。

Flutter-用动态数据填充表

2 个答案: