Flutter教程JSON数据解析与生成

在Flutter开发中，如何正确解析和生成JSON数据？使用内置的dart:convert库时，遇到复杂嵌套结构总是报类型转换错误，有没有更高效的解决方案？另外，看到有人推荐json_serializable，这个第三方库的实际使用体验如何？是否需要手动编写模型类，有没有自动化工具能减少样板代码？对于API返回的动态JSON字段（比如某些字段可能为null或不同类型），最佳处理方式是什么？

3 回复

以下是一个简单的Flutter教程，教你如何进行JSON数据解析和生成。

  1. JSON数据解析
    假设我们有如下JSON字符串：

    {"name": "张三", "age": 25}

    使用dart:convert库中的jsonDecode方法解析：

    import 'dart:convert';

void main() {
  String jsonString = '{"name": "张三", "age": 25}';
  Map<String, dynamic> data = jsonDecode(jsonString);
  print(data['name']); // 输出：张三
}

  2. 从JSON生成对象
    创建一个模型类Person：

    class Person {
  String name;
  int age;

  Person({required this.name, required this.age});

  factory Person.fromJson(Map<String, dynamic> json) {
    return Person(name: json['name'], age: json['age']);
  }
}

    解析时使用工厂构造函数：

    void main() {
  String jsonString = '{"name": "李四", "age": 30}';
  Person person = Person.fromJson(jsonDecode(jsonString));
  print(person.name); // 输出：李四
}

  3. JSON数据生成
    如果要将对象转换为JSON：

    void main() {
  Person person = Person(name: "王五", age: 40);
  Map<String, dynamic> jsonData = {
    'name': person.name,
    'age': person.age,
  };
  String jsonString = jsonEncode(jsonData);
  print(jsonString); // 输出：{"name":"王五","age":40}
}

以上是基本的Flutter JSON解析和生成示例。

更多关于Flutter教程JSON数据解析与生成的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


要实现Flutter中的JSON数据解析与生成，首先确保你已安装了Flutter和Dart环境。

  1. JSON生成：使用Dart的jsonEncode()函数。例如：

    Map<String, dynamic> user = {'name': 'Tom', 'age': 25};
String jsonStr = jsonEncode(user);
print(jsonStr); // 输出: {"name":"Tom","age":25}

  2. JSON解析：使用jsonDecode()函数。例如：

    String jsonString = '{"name":"Jerry","age":20}';
Map<String, dynamic> data = jsonDecode(jsonString);
print(data['name']); // 输出: Jerry

  3. 自定义对象解析：创建一个类并添加从JSON到对象的构造方法。例如：

    class User {
  String name;
  int age;
  
  User({required this.name, required this.age});
  
  factory User.fromJson(Map<String, dynamic> json) {
    return User(name: json['name'], age: json['age']);
  }
  
  Map<String, dynamic> toJson() => {'name': name, 'age': age};
}

// 使用
String jsonInput = '{"name":"Spike","age":30}';
User user = User.fromJson(jsonDecode(jsonInput));
print(user.name); // 输出: Spike

这是基本的JSON操作流程，适用于Flutter应用的数据交互。

Flutter JSON数据解析与生成教程

在Flutter中处理JSON数据是常见的需求，以下是基本方法：

1. JSON解析（反序列化）

手动解析

// 示例JSON数据
String jsonString = '{"name": "John", "age": 30}';

// 解析为Map
Map<String, dynamic> user = jsonDecode(jsonString);

print(user['name']); // 输出: John
print(user['age']);  // 输出: 30

使用模型类

class User {
  final String name;
  final int age;

  User({required this.name, required this.age});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      name: json['name'],
      age: json['age'],
    );
  }
}

// 使用
User user = User.fromJson(jsonDecode(jsonString));

2. JSON生成（序列化）

手动生成

Map<String, dynamic> userMap = {
  'name': 'John',
  'age': 30
};

String jsonStr = jsonEncode(userMap);

使用模型类

class User {
  // ...同上...

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

// 使用
String jsonStr = jsonEncode(user.toJson());

3. 使用json_serializable包（推荐）

  1. 添加依赖：
dependencies:
  json_annotation: ^4.8.1

dev_dependencies:
  build_runner: ^2.4.4
  json_serializable: ^6.7.1
  1. 创建模型：
import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  final String name;
  final int age;

  User({required this.name, required this.age});

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}
  1. 运行生成命令：
flutter pub run build_runner build

4. 处理复杂JSON

对于嵌套JSON：

@JsonSerializable()
class Address {
  final String street;
  final String city;
  
  Address({required this.street, required this.city});
  
  factory Address.fromJson(Map<String, dynamic> json) => _$AddressFromJson(json);
  Map<String, dynamic> toJson() => _$AddressToJson(this);
}

@JsonSerializable()
class User {
  final String name;
  final Address address;
  
  User({required this.name, required this.address});
  
  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

记得在pubspec.yaml中添加dart:convert的依赖。

回到顶部