如何使用颤振在小部件中显示复杂的 JSON？答案

【问题标题】：How to display in widget the complex JSON using flutter?如何使用颤振在小部件中显示复杂的 JSON？
【发布时间】：2020-04-10 05:10:07
【问题描述】：

我的问题是我不知道如何在 JSON 对象中显示对象。但我已经显示了外部对象，如名称、用户名等。我想在地址和地理范围内显示对象。我是 JSON 新手，请指导我

我读了这个，但我不知道我需要什么here

代码来自here

JSON OUTPUT json 来自here

[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
  "street": "Kulas Light",
  "suite": "Apt. 556",
  "city": "Gwenborough",
  "zipcode": "92998-3874",
  "geo": {
    "lat": "-37.3159",
    "lng": "81.1496"
  }
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
  "name": "Romaguera-Crona",
  "catchPhrase": "Multi-layered client-server neural-net",
  "bs": "harness real-time e-markets"
}
},
]

型号我在here 中生成我的模型

import 'dart:convert';

List<UserModel> userModelFromJson(String str) => 
List<UserModel>.from(json.decode(str).map((x) => UserModel.fromJson(x)));

String userModelToJson(List<UserModel> data) => 
json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class UserModel {
int id;
String name;
String username;
String email;
Address address;
String phone;
String website;
Company company;

UserModel({
    this.id,
    this.name,
    this.username,
    this.email,
    this.address,
    this.phone,
    this.website,
    this.company,
});

factory UserModel.fromJson(Map<String, dynamic> json) => UserModel(
    id: json["id"],
    name: json["name"],
    username: json["username"],
    email: json["email"],
    address: Address.fromJson(json["address"]),
    phone: json["phone"],
    website: json["website"],
    company: Company.fromJson(json["company"]),
);

Map<String, dynamic> toJson() => {
    "id": id,
    "name": name,
    "username": username,
    "email": email,
    "address": address.toJson(),
    "phone": phone,
    "website": website,
    "company": company.toJson(),
};
}

class Address {
String street;
String suite;
String city;
String zipcode;
Geo geo;

Address({
    this.street,
    this.suite,
    this.city,
    this.zipcode,
    this.geo,
});

factory Address.fromJson(Map<String, dynamic> json) => Address(
    street: json["street"],
    suite: json["suite"],
    city: json["city"],
    zipcode: json["zipcode"],
    geo: Geo.fromJson(json["geo"]),
);

Map<String, dynamic> toJson() => {
    "street": street,
    "suite": suite,
    "city": city,
    "zipcode": zipcode,
    "geo": geo.toJson(),
};
}

class Geo {
String lat;
String lng;

Geo({
    this.lat,
    this.lng,
});

factory Geo.fromJson(Map<String, dynamic> json) => Geo(
    lat: json["lat"],
    lng: json["lng"],
);

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

class Company {
String name;
String catchPhrase;
String bs;

Company({
    this.name,
    this.catchPhrase,
    this.bs,
});

factory Company.fromJson(Map<String, dynamic> json) => Company(
    name: json["name"],
    catchPhrase: json["catchPhrase"],
    bs: json["bs"],
);

Map<String, dynamic> toJson() => {
    "name": name,
    "catchPhrase": catchPhrase,
    "bs": bs,
};
}

Services.dart

  class Services {
static const String url = 'https://jsonplaceholder.typicode.com/users';
static Future<List<UserModel>> getUsers() async {
  try {
    final response = await http.get(url);
    if (200 == response.statusCode) {
      final List<UserModel> users = userModelFromJson(response.body);
      return users;
    } else {
      return List<UserModel>();
    }
  } catch (e) {
    return List<UserModel>();
  }
}

}

HomeView.dart

class _HomeViewState extends State<HomeView> {

List<UserModel> _users;
bool _loading;

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

_loading = true;
Services.getUsers().then((users) {
  setState(() {
    _users = users;
    _loading = false;
  });
});
}
@override
Widget build(BuildContext context) {

  return Scaffold(

  appBar: AppBar(
    title: Text(_loading ? 'Loading...' : 'Users'),
  ),
  body: Container(
    color: Colors.white,
    child: ListView.builder(
      itemCount: _users == null ? 0 : _users.length,
      itemBuilder: (context, index) {
        UserModel user = _users[index];
        return Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            ListTile(
              title: Text(user.name),
              subtitle: Text(user.email),
              trailing: Text(user.phone),
            ),
          ],
        );
      },
    ),
  ),
  );
}
}

谢谢你的好意

【问题讨论】：

你的代码是不是不能正常工作，因为它看起来对我来说是正确的

标签： json flutter dart

【解决方案1】：

您创建的模型是正确的，您（好习惯）只在解析模型之前检查模型中的对象

UserModel.fromJson(Map<String, dynamic> json) {
   // ...
    address =
        json['address'] != null ? new Address.fromJson(json['address']) : null;
    company =
        json['company'] != null ? new Company.fromJson(json['company']) : null;
   // ...
  }

在您的服务类上，使用 Flutter 文档中设置的 fetch 方式来简化您的代码

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<List<UserModel>> fetchUsers(http.Client client) async {
  final response =
      await client.get('https://jsonplaceholder.typicode.com/users');

  return parseUsers(response.body);
}

List<UserModel> parseUsers(String responseBody) {
  final parsed = json.decode(responseBody).cast<Map<String, dynamic>>();

  return parsed.map<UserModel>((json) => UserModel.fromJson(json)).toList();
}

一旦你从 json 获取数据，你就可以根据 json 内部的层次结构访问每个对象，在你的情况下，有状态的小部件看起来像，我用地理和城市内的纬度替换名称和电话地址里面

class _HomeViewState extends State<HomeView> {
  List<UserModel> _users;
  bool _loading;

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

    _loading = true;
    fetchUsers(http.Client()).then((users) {
      setState(() {
        _users = users;
        _loading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_loading ? 'Loading...' : 'Users'),
      ),
      body: Container(
        color: Colors.white,
        child: ListView.builder(
          itemCount: _users == null ? 0 : _users.length,
          itemBuilder: (context, index) {
            UserModel user = _users[index];
            return Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                ListTile(
                  title: Text(user.name),
                  subtitle: Text(user.address.geo.lat),
                  trailing: Text(user.address.city),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

希望对你有帮助

【讨论】：

我很高兴@KenVerganio！
你好@Mohamed Dernoun 我还有一个问题，如何用这个“朋友”替换地址对象：[ { "id": 0, "name": "Bell Gilmore" }, { "id" : 1, "name": "Brady Armstrong" }, { "id": 2, "name": "Lambert Lott" } ]，你能帮我如何显示这个对象吗谢谢
对象内的数组请帮帮我，谢谢
您的问题是如何在 Object 内的数组中获取数据？
您可以使用此方法从列表中获取数据，该方法使用 for 循环来获取数组中对象的详细信息 Friend getFriend(int friendID) { // friends 是您的对象列表 for (int i = 0; i

【解决方案2】：

您可以在下面复制粘贴运行完整代码
您可以直接分配属性
代码sn-p

title: Text('${user.name} ${user.address.city} ${user.address.geo.lat}'),

工作演示

完整代码

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

List<UserModel> userModelFromJson(String str) =>
    List<UserModel>.from(json.decode(str).map((x) => UserModel.fromJson(x)));

String userModelToJson(List<UserModel> data) =>
    json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class UserModel {
  int id;
  String name;
  String username;
  String email;
  Address address;
  String phone;
  String website;
  Company company;

  UserModel({
    this.id,
    this.name,
    this.username,
    this.email,
    this.address,
    this.phone,
    this.website,
    this.company,
  });

  factory UserModel.fromJson(Map<String, dynamic> json) => UserModel(
        id: json["id"],
        name: json["name"],
        username: json["username"],
        email: json["email"],
        address: Address.fromJson(json["address"]),
        phone: json["phone"],
        website: json["website"],
        company: Company.fromJson(json["company"]),
      );

  Map<String, dynamic> toJson() => {
        "id": id,
        "name": name,
        "username": username,
        "email": email,
        "address": address.toJson(),
        "phone": phone,
        "website": website,
        "company": company.toJson(),
      };
}

class Address {
  String street;
  String suite;
  String city;
  String zipcode;
  Geo geo;

  Address({
    this.street,
    this.suite,
    this.city,
    this.zipcode,
    this.geo,
  });

  factory Address.fromJson(Map<String, dynamic> json) => Address(
        street: json["street"],
        suite: json["suite"],
        city: json["city"],
        zipcode: json["zipcode"],
        geo: Geo.fromJson(json["geo"]),
      );

  Map<String, dynamic> toJson() => {
        "street": street,
        "suite": suite,
        "city": city,
        "zipcode": zipcode,
        "geo": geo.toJson(),
      };
}

class Geo {
  String lat;
  String lng;

  Geo({
    this.lat,
    this.lng,
  });

  factory Geo.fromJson(Map<String, dynamic> json) => Geo(
        lat: json["lat"],
        lng: json["lng"],
      );

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

class Company {
  String name;
  String catchPhrase;
  String bs;

  Company({
    this.name,
    this.catchPhrase,
    this.bs,
  });

  factory Company.fromJson(Map<String, dynamic> json) => Company(
        name: json["name"],
        catchPhrase: json["catchPhrase"],
        bs: json["bs"],
      );

  Map<String, dynamic> toJson() => {
        "name": name,
        "catchPhrase": catchPhrase,
        "bs": bs,
      };
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeView(title: 'Flutter Demo Home Page'),
    );
  }
}

class Services {
  static const String url = 'https://jsonplaceholder.typicode.com/users';
  static Future<List<UserModel>> getUsers() async {
    try {
      final response = await http.get(url);
      if (200 == response.statusCode) {
        final List<UserModel> users = userModelFromJson(response.body);
        return users;
      } else {
        return List<UserModel>();
      }
    } catch (e) {
      return List<UserModel>();
    }
  }
}

class HomeView extends StatefulWidget {
  HomeView({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _HomeViewState createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  List<UserModel> _users;
  bool _loading;

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

    _loading = true;
    Services.getUsers().then((users) {
      setState(() {
        _users = users;
        _loading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_loading ? 'Loading...' : 'Users'),
      ),
      body: Container(
        color: Colors.white,
        child: ListView.builder(
          itemCount: _users == null ? 0 : _users.length,
          itemBuilder: (context, index) {
            UserModel user = _users[index];
            return Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                ListTile(
                  title: Text('${user.name} ${user.address.city} ${user.address.geo.lat}'),
                  subtitle: Text(user.email),
                  trailing: Text(user.phone),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

【讨论】：

谢谢你的帮助