flutter:从接口获取json数据后并解析
一,代码:
dart代码:model
class GoodsListItem {
String name;
String desc;
int id;
GoodsListItem(this.name,this.desc, this.id) {}
GoodsListItem.fromJson(Map<String, dynamic>json)
:name=json["name"],
desc = json["desc"],
id = json["id"];
Map<String, dynamic> toJson() {
return {
"name": name,
"desc": desc,
"id": id
};
}
//供打印对象使用
@override
String toString() {
return 'GoodsListItem{id: $id, name: $name, desc: $desc}';
}
}
dart代码:页面
import 'package:demo3/model/GoodsListItem.dart';
import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'dart:convert';
class ApijsonPage extends StatefulWidget {
final Map arguments;
// 为title设置一个默认参数,这样的跳转该界面时可以不传值。
ApijsonPage({super.key, required this.arguments});
@override
State<ApijsonPage> createState() => _ApijsonPageState();
}
class _ApijsonPageState extends State<ApijsonPage> {
//存放数据
List<GoodsListItem> _listData=[];
//从接口得到数据
Future<Null> apiGoodsList(String url) async{
print(url);
try {
var response = await Dio().get(url);
print(response);
//处理json到类中
var resoMap=json.decode(response.toString());
print(resoMap);
//如果有报错,弹出报错信息,并返回
String status = resoMap['status'];
if (status != "success") {
print("出错");
return null;
} else {
print("正确");
}
for (int i = 0; i < (resoMap['data']['list'].length); i++) {
print("i:"+i.toString());
var itemOne = resoMap['data']['list'][i];
print(itemOne);
GoodsListItem goodsOne = new GoodsListItem(itemOne['name'],itemOne['desc'], itemOne['id']);
_listData.add(goodsOne);
}
print("从接口获取到的数据:");
print(_listData);
setState(() {
});
} catch (e) {
print(e);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.primaryContainer,
title: Text(widget.arguments["title"]),
),
body: Center(
child: ElevatedButton(
onPressed: () async {
print("点击了");
String apiUrl = "http://www.testsite.net/list.php";
apiGoodsList(apiUrl);
},
child: Row(
mainAxisSize: MainAxisSize.min, // 根据内容调整大小
children: <Widget>[
Icon(Icons.add), // 图标在左侧
SizedBox(width: 10), // 可选:添加一些间隔
Text("解析json"), // 文本在右侧
],
),
),
),
);
}
}
2,接口输出json:

二,测试效果

打印输出:
I/flutter ( 8612): 从接口获取到的数据:
I/flutter ( 8612): [GoodsListItem{id: 1, name: name1, desc: desc1},
GoodsListItem{id: 2, name: name2, desc: desc2},
GoodsListItem{id: 3, name: name3, desc: desc3}]
浙公网安备 33010602011771号