当先锋百科网

首页 1 2 3 4 5 6 7

json 在 Flutter（Dart）中的使用

首先准备好json数据

//一个JSON格式的用户列表字符串
String jsonStr = '[{"name":"Jack"},{"name":"Rose"}]';
//
String jsonStr1 = '{"name": "John Smith","email": "[email protected]"}';

第一种方式：使用集合来操作数据

导入 

import 'dart:convert';
使用 json.decode()将JSON字符串转为集合对象
    json.encode()将集合对象转为JSON字符串

//将JSON字符串转为Dart对象(此处是List)
List items = json.decode(jsonStr);
//输出第一个用户的姓名
print(items[0]["name"]);

//Json字符串转Map类型
Map userMap = json.decode(jsonStr1);
print(userMap);

//Map转Json字符串
print(json.encode(userMap));

结果：

可以看到，Map类型是不带 双引号的

 

第二种方式：使用 Model class 操作数据

方法一：自定义 Model ，只是为了弄懂记录一下，不建议实际使用

首先准备好数据：使用上面的 jsonStr1

String jsonStr1 = '{"name": "John Smith","email": "[email protected]"}';

//Json字符串转Map类型
Map userMap = json.decode(jsonStr1);

现在针对这个Map 我们自定义一个 Model类：User

class User {
  String name;
  String email;

  User(this.name, this.email);

  // 把 Map 转为 User 类
  User.fromJson(Map<String, dynamic> json)
      : name = json['name'],
        email = json['email'];

  // 通过User属性，返回一个Map
  Map<String, dynamic> toJson() =>
      <String, dynamic>{
        'name': name,
        'email': email,
      };
}

使用：

var user = User.fromJson(userMap);
print(user.name);
user.name = "Bob";
// 这里只是把 User 转换 为 Map
print(user.toJson());
// 要 json 格式字符串 还需要使用 json.encode()
print(json.encode(user.toJson()));

结果：

方法二：使用 插件 FlutterJsonBeanFactory 自动生成 Model class

准备数据：

var webInfo = {
  "name":"网站",
  "num":3,
  "sites": [
    { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻译" ] },
    { "name":"Runoob", "info":[ "菜鸟教程", "菜鸟工具", "菜鸟微信" ] },
    { "name":"Taobao", "info":[ "淘宝", "网购" ] }
  ]
};

生成 Model 类(这里不好截图)

new -> JsonToDartBeanAction，出现：

Make后得到 Model 类：

class WebInfoEntity {
	int num;
	String name;
	List<WebInfoSite> sites;

	WebInfoEntity({this.num, this.name, this.sites});

	WebInfoEntity.fromJson(Map<String, dynamic> json) {
		num = json['num'];
		name = json['name'];
		if (json['sites'] != null) {
			sites = new List<WebInfoSite>();(json['sites'] as List).forEach((v) { sites.add(new WebInfoSite.fromJson(v)); });
		}
	}

	Map<String, dynamic> toJson() {
		final Map<String, dynamic> data = new Map<String, dynamic>();
		data['num'] = this.num;
		data['name'] = this.name;
		if (this.sites != null) {
      data['sites'] =  this.sites.map((v) => v.toJson()).toList();
    }
		return data;
	}
}

class WebInfoSite {
	String name;
	List<String> info;

	WebInfoSite({this.name, this.info});

	WebInfoSite.fromJson(Map<String, dynamic> json) {
		name = json['name'];
		info = json['info']?.cast<String>();
	}

	Map<String, dynamic> toJson() {
		final Map<String, dynamic> data = new Map<String, dynamic>();
		data['name'] = this.name;
		data['info'] = this.info;
		return data;
	}
}

现在可以使用了：

// 把 json 数据 转换为 WebInfoEntity 类
var w = WebInfoEntity.fromJson(webInfo);
print(w.sites[0].info[2]);
w.sites[0].info[2] = "tianmao";
print(w.toJson()); //Map

结果：

第三种方式：实际从网络获取json数据，并对数据进行操作（集合类型数据）

使用 dio 获取 json 数据

准备数据：

// 返回 json 字符串的网址
final String apiUrl1 = "http://a.itying.com/api/productlist";

使用：

  Dio dio = Dio();
  //  通过 dio get 数据
  Future _getDio() async {
    Response response = await dio.get(apiUrl1);
    print('get --- '+response.data.toString());
    print(response.data.runtimeType);
    print(response.data["result"][0]['title']);
 }

结果：

这个 dio 返回后的数据直接就是 集合类型了，可以直接操作（就不需要使用json.decode()了）

具体返回什么类型的集合，是 dio 根据 json 格式自动判定的，

使用的时候可以先通过 print(response.data.runtimeType); 查看类型，

再决定是直接操作，还是转换为 Model 类

 实际应用场景：可以配合 ListView来展示数据等