Question

我已经成功显示了带有DataTable的硬编码JSON，如下所示：

  final List<Map<String, String>> listOfPetrol = [
    {"logo": "assets/images/shell.jpg", "location": "Johnson Road 1235", "distance": "0.2 KM", "price":"\$12.45", "facilities":"ATM, Restaurant"},
    {"logo": "assets/images/sinopec.jpg", "location": "Hennessy Road", "distance": "0.5 KM", "price":"\$10.00", "facilities":"Toilet"},
    {"logo": "assets/images/shell.jpg", "location": "Lockhart Rd", "distance": "0.9 KM", "price":"\$11.20", "facilities":"ATM"}
  ];


 DataTable(
                    columns: [
                      DataColumn(label: Text('Logo')),
                      DataColumn(label: Text('Location')),
                      DataColumn(label: Text('Distance')),
                      DataColumn(label: Text('Price')),
                      DataColumn(label: Text('Facilities')),
                    ],
                    rows:
                    listOfPetrol
                        .map(
                      ((element) => DataRow(
                        cells: <DataCell>[
                          DataCell(Image.asset(element["logo"])),
                          DataCell(Text(element["location"])),
                          DataCell(Text(element["distance"])),
                          DataCell(Text(element["price"])),
                          DataCell(Text(element["facilities"])),
                        ],
                      )),
                    )
                        .toList(),
                  ),

现在，我想改为从HTTP API获取JSON。我已经弄清楚了这部分。好吧...

FetchPetrolList() async {
    var data = await http.get("http://157.230.131.4/gda-api-dev/petrol.php");
    var jsonData = json.decode(data.body);

    List<PetrolItem> petrolList = [];

    for (var u in jsonData) {
      PetrolItem petrol = PetrolItem(u["logo"], u["location"], u["distance"], u["price"], u["facilities"]);
      petrolList.add(petrol);
      print(petrol.logo+" "+petrol.location+" "+petrol.distance+" "+petrol.price+" "+petrol.facilities);
    }
  }

然后我如何将JSON传递到DataTable？完整代码：https://gist.github.com/anta40/5b172d885795c71417f2ed2dccffe50c

Answer 1

您可以将JSON数据解析为模型。我有两种自动解析JSON数据的方法。

On-line Generation

安装Flutter JsonBeanFactory插件生成

Android Studio以一种简单的方式安装Flutter JsonBeanFactory插件，在此不再赘述。

安装后右键单击软件包目录，然后选择新建

然后从JSON中选择dart bean类File

然后将JSON数据粘贴到输入框中，输入类名称，然后单击make。

因此生成了实体类。

如何使用JSON API填充Flutter DataTable？

1 个答案: