Flutter 如何将json响应放入widget flift中

我想使用小部件中显示的响应数据。我将数据发布到API中，然后得到返回结果

我的回答是这样的：

{
    "responses": [
        {
            "Contents": {
                "Images": [
                    {"url":"https:URL"}, 
                    {"url":"https:URL"}, 
                ],
                "Ages": [
                    {"age":"33"},
                    {"age":"34"}, 
                ],
                "Labels":[
                    {"label":"game"}
                ]
            }
        }
    ]
}

---

我的问题是如何获取图像、年龄和标签的详细信息？我想使用这些细节，并把我的小部件。我能知道怎么做吗

解码JSON时，不必在Dart中制作完整的模型。 您可以简单地执行以下操作：

// Requires import
import 'dart:convert';

// Do like this
var data = jsonDecode(jsonString);

data['responses'][0]['Contents']['Labels'][0]['label'].toString();

现在，数据将自动充当地图

例如，如果您想访问您提供的JSON示例中的标签，只需执行以下操作：

// Requires import
import 'dart:convert';

// Do like this
var data = jsonDecode(jsonString);

data['responses'][0]['Contents']['Labels'][0]['label'].toString();

说到实际部分， 你需要根据你的需要来塑造你的小部件

创建一个无状态或StatefulWidget来满足您的需要，并开始设计

根据您发布的JSON示例，您需要显示一个图像列表。因此，您可能会根据URL生成一个小部件列表，并在构建方法中向GridView提供该列表

检查我做的这个例子：

编辑：

我使用了您发布的确切JSON响应。它没有给我任何错误

class _MyWidgetState extends State<MyWidget> {
  final String mJson = '''
    {
    "responses": [
        {
            "Contents": {
                "Images": [
                    {"url":"https:URL"}, 
                    {"url":"https:URL"}
                ],
                "Ages": [
                    {"age":"33"},
                    {"age":"34"}
                ],
                "Labels":[
                    {"label":"game"}
                ]
            }
        }
    ]
}
  ''';

  bool _loading = false;
  List<String> _infos = [];

  Widget _loadingBar() {
    return SizedBox.fromSize(
        size: Size.fromRadius(30),
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(
              Colors.white,
            ),
          ),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('MY APPS'), actions: <Widget>[
          _loading
              ? _loadingBar()
              : IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () => {
                        submit(context)
                            .then((res) => setState(() => _loading = false))
                      }),
        ]),
        body: SingleChildScrollView(
          padding: const EdgeInsets.all(16.0),
          child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: List.generate(_infos.length, (i) => Text(_infos[i]))),
        ));
  }

  Future<void> submit(BuildContext context) async {
    setState(() => _loading = true);
    await Future.delayed(const Duration(seconds: 3));
    var data = jsonDecode(mJson);
    print(data);
    _infos.add(data['responses'][0].toString());
    _infos.add(data['responses'][0]['Contents'].toString());
    _infos.add(data['responses'][0]['Contents']['Images'][0]['url'].toString());
    _infos.add(data['responses'][0]['Contents']['Ages'][0]['age'].toString());
  }
}

注意：您稍后发布的代码不应该工作，因为您已经在无状态小部件类中声明了非最终变量，并且还使用了setState。此外，在未来的submitBuildContext上下文中，您应该使用jsonDecoderes而不是demoJson。未分配demoJson。请参见我发布的示例。我将其更改为有状态小部件。访问您给出的JSON示例中的任何字段都没有问题。不过，您的JSON示例有点错误，它有额外的“，”可能会在解码时出错

---

只需检查我制作的以下示例： 下面是您提供的json文件，我已经在本地解析了它

{
    "responses": [{
        "Contents": {
            "Images": [{
                    "url": "https:URL"
                },
                {
                    "url": "https:URL"
                }
            ],
            "Ages": [{
                    "age": "33"
                },
                {
                    "age": "34"
                }
            ],
            "Labels": [{
                    "age": "33"
                }

            ]
        }
    }]
}

为json文件创建的模型类：

// To parse this JSON data, do
//
//     final response = responseFromJson(jsonString);

import 'dart:convert';

Response responseFromJson(String str) => Response.fromJson(json.decode(str));

String responseToJson(Response data) => json.encode(data.toJson());

class Response {
    List<ResponseElement> responses;

    Response({
        this.responses,
    });

    factory Response.fromJson(Map<String, dynamic> json) => Response(
        responses: List<ResponseElement>.from(json["responses"].map((x) => ResponseElement.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "responses": List<dynamic>.from(responses.map((x) => x.toJson())),
    };
}

class ResponseElement {
    Contents contents;

    ResponseElement({
        this.contents,
    });

    factory ResponseElement.fromJson(Map<String, dynamic> json) => ResponseElement(
        contents: Contents.fromJson(json["Contents"]),
    );

    Map<String, dynamic> toJson() => {
        "Contents": contents.toJson(),
    };
}

class Contents {
    List<Image1> images;
    List<Age> ages;
    List<Age> labels;

    Contents({
        this.images,
        this.ages,
        this.labels,
    });

    factory Contents.fromJson(Map<String, dynamic> json) => Contents(
        images: List<Image1>.from(json["Images"].map((x) => Image1.fromJson(x))),
        ages: List<Age>.from(json["Ages"].map((x) => Age.fromJson(x))),
        labels: List<Age>.from(json["Labels"].map((x) => Age.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "Images": List<dynamic>.from(images.map((x) => x.toJson())),
        "Ages": List<dynamic>.from(ages.map((x) => x.toJson())),
        "Labels": List<dynamic>.from(labels.map((x) => x.toJson())),
    };
}

class Age {
    String age;

    Age({
        this.age,
    });

    factory Age.fromJson(Map<String, dynamic> json) => Age(
        age: json["age"],
    );

    Map<String, dynamic> toJson() => {
        "age": age,
    };
}

class Image1 {
    String url;

    Image1({
        this.url,
    });

    factory Image1.fromJson(Map<String, dynamic> json) => Image1(
        url: json["url"],
    );

    Map<String, dynamic> toJson() => {
        "url": url,
    };
}

这是您获取和显示数据的主UI文件，我已经在列表视图中显示了您的数据

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:sample_project_for_api/model.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isLoading = false;
  List<Age> ages = List();
  List<Age> labels = List();
  List<Image1> image = List();

  // here i have taken the  json locally which you posted on stack
  Future<String> loadFromAssets() async {
    return await rootBundle.loadString('json/parse.json');
  }

  @override
  void initState() {
    super.initState();
    givenFunction();
  }

  Future givenFunction() async {
    setState(() {
      isLoading = true;
    });

    //http.Response response = await http.post(url, body: json.encode(data));
    // you can make the http call above just uncomment is and comment the below line
    String jsonString = await loadFromAssets();
    // Here you can just replace down your response.body with jsonString
    final response = responseFromJson(jsonString);
    print(response.responses[0].contents.ages[0].age);
    //ages =response.responses[0].contents.
    for (int i = 0; i < response.responses[0].contents.ages.length; i++) {
      ages.add(response.responses[0].contents.ages[i]);
    }

    for (int i = 0; i < response.responses[0].contents.images.length; i++) {
      image.add(response.responses[0].contents.images[i]);
    }
    for (int i = 0; i < response.responses[0].contents.labels.length; i++) {
      labels.add(response.responses[0].contents.labels[i]);
    }
    setState(() {
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: isLoading
              ? CircularProgressIndicator()
              : SafeArea(
                  child: Container(
                    child: Column(
                      children: <Widget>[
                        Container(
                          width: 400,
                          height: 100,
                          child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: ages.length,
                            itemBuilder: (BuildContext context, int index) {
                              return Container(
                                width: 100,
                                height: 100,
                                child: Card(
                                  elevation: 10,
                                  child: Center(child: Text(ages[index].age)),
                                ),
                              );
                            },
                          ),
                        ),
                        Container(
                          width: 500,
                          height: 200,
                          child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: image.length,
                            itemBuilder: (BuildContext context, int index) {
                              return Container(
                                width: 100,
                                height: 100,
                                child: Card(
                                  elevation: 10,
                                  child: Center(child: Text(image[index].url)),
                                ),
                              );
                            },
                          ),
                        ),
                        Container(
                          width: 500,
                          height: 200,
                          child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            itemCount: labels.length,
                            itemBuilder: (BuildContext context, int index) {
                              return Container(
                                width: 100,
                                height: 100,
                                child: Card(
                                  elevation: 10,
                                  child: Center(child: Text(labels[index].age)),
                                ),
                              );
                            },
                          ),
                        )
                      ],
                    ),
                  ),
                )),
    );
  }
}

void main() {
  runApp(HomePage());
}

刚刚拍摄了一个屏幕截图：

---

请检查一下并告诉我。

谢谢您的帮助。我什么时候需要做模型代码？当我不需要的时候？我认为非常需要做模型代码。这完全取决于你。如果你喜欢，你可以使用模型。唯一会改变的是在模型的情况下访问数据的方式。例如，在我的dartpad示例中，personData是一个类模型。我必须以personData.name而不是personData['name']访问名称，以此类推。所以我的文本小部件会有${personData.name}等等。哦，我明白了，谢谢你的帮助对不起，先生，为什么我使用我的响应数据时会显示这个错误？类型“\u InternalLinkedHashMap”不是类型“Map”的子类型我已经编辑了我的问题您是否在某处键入了var数据？太好了，它起作用了，只需向上投票，以便对其他人有所帮助