Question

我下面有从服务器获取的JSON数据，我需要在pageviewbuilder以及flutter应用程序中的listview构建器中进行获取和配置。

“列表视图”构建器（垂直滚动）嵌套在“页面视图”构建器（水平滚动）中，这是我已经配置的

要显示的东西是这样的

页面----------订单项

第16项>>第16项，第1项，第16项，第2项

第18项>>第18项，第1项，第18项，第2项，第18项项目3

我是不熟悉JSON的新手，请指导我如何获取数据并根据需要用于上述配置。

{
    "error": "false",
    "content": [
        {
            "comp_code": "4",
            "comp_name": "KMT OVERSEAS",
            "order_no": "16",
            "soh_pk": "23660",
            "order_items": [
                {
                    "comp_code": "4",
                    "comp_name": "KMT OVERSEAS",
                    "order_no": "16",
                    "sod_pk": "31689",
                },
                {
                    "comp_code": "4",
                    "comp_name": "KMT OVERSEAS",
                    "order_no": "16",
                    "sod_pk": "31688",
                }
            ]
        },
        {
            "comp_code": "4",
            "comp_name": "KMT OVERSEAS",
            "order_no": "18",
            "soh_pk": "23702",
            "order_items": [
                {
                    "comp_code": "4",
                    "comp_name": "KMT OVERSEAS",
                    "order_no": "18",
                    "sod_pk": "31749",
                },
                {
                    "comp_code": "4",
                    "comp_name": "KMT OVERSEAS",
                    "order_no": "18",
                    "sod_pk": "31742",

                },
                {
                    "comp_code": "4",
                    "comp_name": "KMT OVERSEAS",
                    "order_no": "18",
                    "sod_pk": "31743",
                },
               
            ]
        }
    ]
}

Answer 1

要从服务器获取JSON：

添加Http包。
使用Http包发出网络请求。
将响应转换为列表
将这项工作移至单独的隔离区。

有关更多信息，请查看this链接

Answer 2

您必须遵循以下步骤，并根据自己的需要自定义给定代码：

1 将此插件放置在pubspec.yaml文件 http: ^0.12.0+4

中

2 导入“ package：http / http.dart”为http； /// http我在下面使用，您可以更改它

3 构建获取数据的功能：

  Future<Map> getNews() async {
  String apiurl = "https://your url/";
  http.Response response = await http.get(apiurl);
  return json.decode(response.body);
}

4 删除一个Map变量

Map data;

5 调用异步方法内部的函数，例如：

// Future<void> main() async {} you can call inside  initstate or any custom function 
 data = await getNews();

现在您的json数据位于data内，您可以根据需要使用任何方式。 6 在您的listview.builder内部使用，如下所示

new Center(
        child: new ListView.builder(
            itemCount: data.length,
            padding: EdgeInsets.all(8.0),
            itemBuilder: (BuildContext context, int position) {
              return new ListTile(
//here posts and title are json variables that are in json file
                title: new Text("${data["posts"][position]["title"]}"),
                subtitle: new Text(
                  parseHtmlString("${data["posts"][position]["content"]}"),
                  maxLines: 18,
                ),
              );
            }),
      ),

如何在Flutter应用程序中获取JSON数据？

2 个答案: