arrays - 将 JSON 数据显示到 DataTable Flutter
问题描述
我正在尝试将 JSON 数据显示到 Flutter 中的 DataTable。数据来自 API,获取数据没有问题。但是我在显示 DataTable 中的一些数据列表时遇到了问题,我认为是因为 JSON 结构。
这是 JSON 示例
"response": [
{
"league": {
"id": 1,
"name": "World Cup",
"country": "World",
"logo": "https://media.api-sports.io/football/leagues/1.png",
"flag": null,
"season": 2018,
"standings": [
[
{
"rank": 1,
"team": {
"id": 7,
"name": "Uruguay",
"logo": "https://media.api-sports.io/football/teams/7.png"
},
"points": 9,
"goalsDiff": 5,
"group": "FIFA World Cup: Group A",
"form": "WWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 3,
"draw": 0,
"lose": 0,
"goals": {
"for": 5,
"against": 0
}
},
"home": {
"played": 2,
"win": 2,
"draw": 0,
"lose": 0,
"goals": {
"for": 4,
"against": 0
}
},
"away": {
"played": 1,
"win": 1,
"draw": 0,
"lose": 0,
"goals": {
"for": 1,
"against": 0
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 2,
"team": {
"id": 4,
"name": "Russia",
"logo": "https://media.api-sports.io/football/teams/4.png"
},
"points": 6,
"goalsDiff": 4,
"group": "FIFA World Cup: Group A",
"form": "LWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 2,
"draw": 0,
"lose": 1,
"goals": {
"for": 8,
"against": 4
}
},
"home": {
"played": 2,
"win": 2,
"draw": 0,
"lose": 0,
"goals": {
"for": 8,
"against": 1
}
},
"away": {
"played": 1,
"win": 0,
"draw": 0,
"lose": 1,
"goals": {
"for": 0,
"against": 3
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 3,
"team": {
"id": 23,
"name": "Saudi Arabia",
"logo": "https://media.api-sports.io/football/teams/23.png"
},
"points": 3,
"goalsDiff": -5,
"group": "FIFA World Cup: Group A",
"form": "WLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 1,
"draw": 0,
"lose": 2,
"goals": {
"for": 2,
"against": 7
}
},
"home": {
"played": 1,
"win": 1,
"draw": 0,
"lose": 0,
"goals": {
"for": 2,
"against": 1
}
},
"away": {
"played": 2,
"win": 0,
"draw": 0,
"lose": 2,
"goals": {
"for": 0,
"against": 6
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 4,
"team": {
"id": 32,
"name": "Egypt",
"logo": "https://media.api-sports.io/football/teams/32.png"
},
"points": 0,
"goalsDiff": -4,
"group": "FIFA World Cup: Group A",
"form": "LLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 0,
"draw": 0,
"lose": 3,
"goals": {
"for": 2,
"against": 6
}
},
"home": {
"played": 1,
"win": 0,
"draw": 0,
"lose": 1,
"goals": {
"for": 0,
"against": 1
}
},
"away": {
"played": 2,
"win": 0,
"draw": 0,
"lose": 2,
"goals": {
"for": 2,
"against": 5
}
},
"update": "2020-06-18T00:00:00+00:00"
}
],
[
{
"rank": 1,
"team": {
"id": 9,
"name": "Spain",
"logo": "https://media.api-sports.io/football/teams/9.png"
},
"points": 5,
"goalsDiff": 1,
"group": "FIFA World Cup: Group B",
"form": "WWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 1,
"draw": 2,
"lose": 0,
"goals": {
"for": 6,
"against": 5
}
},
"home": {
"played": 1,
"win": 0,
"draw": 1,
"lose": 0,
"goals": {
"for": 2,
"against": 2
}
},
"away": {
"played": 2,
"win": 1,
"draw": 1,
"lose": 0,
"goals": {
"for": 4,
"against": 3
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 2,
"team": {
"id": 27,
"name": "Portugal",
"logo": "https://media.api-sports.io/football/teams/27.png"
},
"points": 5,
"goalsDiff": 1,
"group": "FIFA World Cup: Group B",
"form": "LWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 1,
"draw": 2,
"lose": 0,
"goals": {
"for": 5,
"against": 4
}
},
"home": {
"played": 2,
"win": 1,
"draw": 1,
"lose": 0,
"goals": {
"for": 4,
"against": 3
}
},
"away": {
"played": 1,
"win": 0,
"draw": 1,
"lose": 0,
"goals": {
"for": 1,
"against": 1
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 3,
"team": {
"id": 22,
"name": "Iran",
"logo": "https://media.api-sports.io/football/teams/22.png"
},
"points": 4,
"goalsDiff": 0,
"group": "FIFA World Cup: Group B",
"form": "WLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 1,
"draw": 1,
"lose": 1,
"goals": {
"for": 2,
"against": 2
}
},
"home": {
"played": 2,
"win": 0,
"draw": 1,
"lose": 1,
"goals": {
"for": 1,
"against": 2
}
},
"away": {
"played": 1,
"win": 1,
"draw": 0,
"lose": 0,
"goals": {
"for": 1,
"against": 0
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 4,
"team": {
"id": 31,
"name": "Morocco",
"logo": "https://media.api-sports.io/football/teams/31.png"
},
"points": 1,
"goalsDiff": -2,
"group": "FIFA World Cup: Group B",
"form": "LLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 0,
"draw": 1,
"lose": 2,
"goals": {
"for": 2,
"against": 4
}
},
"home": {
"played": 1,
"win": 0,
"draw": 0,
"lose": 1,
"goals": {
"for": 0,
"against": 1
}
},
"away": {
"played": 2,
"win": 0,
"draw": 1,
"lose": 1,
"goals": {
"for": 2,
"against": 3
}
},
"update": "2020-06-18T00:00:00+00:00"
}
],
[
{
"rank": 1,
"team": {
"id": 2,
"name": "France",
"logo": "https://media.api-sports.io/football/teams/2.png"
},
"points": 7,
"goalsDiff": 2,
"group": "FIFA World Cup: Group C",
"form": "WWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 2,
"draw": 1,
"lose": 0,
"goals": {
"for": 3,
"against": 1
}
},
"home": {
"played": 2,
"win": 2,
"draw": 0,
"lose": 0,
"goals": {
"for": 3,
"against": 1
}
},
"away": {
"played": 1,
"win": 0,
"draw": 1,
"lose": 0,
"goals": {
"for": 0,
"against": 0
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 2,
"team": {
"id": 21,
"name": "Denmark",
"logo": "https://media.api-sports.io/football/teams/21.png"
},
"points": 5,
"goalsDiff": 1,
"group": "FIFA World Cup: Group C",
"form": "LWW",
"status": "same",
"description": "8th Finals",
"all": {
"played": 3,
"win": 1,
"draw": 2,
"lose": 0,
"goals": {
"for": 2,
"against": 1
}
},
"home": {
"played": 2,
"win": 0,
"draw": 2,
"lose": 0,
"goals": {
"for": 1,
"against": 1
}
},
"away": {
"played": 1,
"win": 1,
"draw": 0,
"lose": 0,
"goals": {
"for": 1,
"against": 0
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 3,
"team": {
"id": 30,
"name": "Peru",
"logo": "https://media.api-sports.io/football/teams/30.png"
},
"points": 3,
"goalsDiff": 0,
"group": "FIFA World Cup: Group C",
"form": "WLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 1,
"draw": 0,
"lose": 2,
"goals": {
"for": 2,
"against": 2
}
},
"home": {
"played": 1,
"win": 0,
"draw": 0,
"lose": 1,
"goals": {
"for": 0,
"against": 1
}
},
"away": {
"played": 2,
"win": 1,
"draw": 0,
"lose": 1,
"goals": {
"for": 2,
"against": 1
}
},
"update": "2020-06-18T00:00:00+00:00"
},
{
"rank": 4,
"team": {
"id": 20,
"name": "Australia",
"logo": "https://media.api-sports.io/football/teams/20.png"
},
"points": 1,
"goalsDiff": -3,
"group": "FIFA World Cup: Group C",
"form": "LLL",
"status": "same",
"description": null,
"all": {
"played": 3,
"win": 0,
"draw": 1,
"lose": 2,
"goals": {
"for": 2,
"against": 5
}
},
"home": {
"played": 1,
"win": 0,
"draw": 0,
"lose": 1,
"goals": {
"for": 0,
"against": 2
}
},
"away": {
"played": 2,
"win": 0,
"draw": 1,
"lose": 1,
"goals": {
"for": 2,
"against": 3
}
},
"update": "2020-06-18T00:00:00+00:00"
}
],
代码显示数据表中的数据
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FutureBuilder<Standings>(
future: _apiService.getStandings(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
Standings datas = snapshot.data;
return ListView.builder(
itemCount: datas.response[0].league.standings.length,
itemBuilder: (BuildContext ctx, int i) {
return Card(
child: DataTable(
// ignore: prefer_const_constructors
// ignore: prefer_const_literals_to_create_immutables
// ignore: prefer_const_constructors
columns: <DataColumn>[
DataColumn(
label: Text('Team'),
),
],
rows: <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(
Text(datas.response[0].league.standings[0][0]
.team.name),
),
],
),
],
),
);
});
}
return Center(
child: CircularProgressIndicator(),
);
}),
));
运行代码时的结果
我知道一个团队展示的原因是因为这段代码
<DataCell>[
DataCell(
Text(datas.response[0].league.standings[i][0]
.team.name),
),
但是我怎样才能自动显示其余的团队呢?提前致谢。
解决方案
对于面临同样问题的任何人,根据已回答的这个问题(链接),这有助于我修改代码。
return ListView.builder(
itemCount: datas.response[0].league.standings.length,
itemBuilder: (BuildContext ctx, int i) {
return Column(
children: <Widget>[
ListTile(
title: Text(
datas.response[0].league.standings[i][0].group),
),
Row(
children: [
Text('Position'),
Text(''),
Text('Team'),
],
),
Card(
child: Row(
children: <Widget>[
Column(
children: <Widget>[
Text(datas
.response[0].league.standings[i][0].rank
.toString()),
Text(datas
.response[0].league.standings[i][1].rank
.toString()),
Text(datas
.response[0].league.standings[i][2].rank
.toString()),
Text(datas
.response[0].league.standings[i][3].rank
.toString()),
],
),
Column(children: <Widget>[
Image(
image: NetworkImage(datas.response[0].league
.standings[i][0].team.logo),
height: 30,
width: 20,
),
Image(
image: NetworkImage(datas.response[0].league
.standings[i][1].team.logo),
height: 30,
width: 20,
),
Image(
image: NetworkImage(datas.response[0].league
.standings[i][2].team.logo),
height: 30,
width: 20,
),
Image(
image: NetworkImage(datas.response[0].league
.standings[i][3].team.logo),
height: 30,
width: 20,
),
]),
Column(
children: [
Text(datas.response[0].league.standings[i][0]
.team.name),
Text(datas.response[0].league.standings[i][1]
.team.name),
Text(datas.response[0].league.standings[i][2]
.team.name),
Text(datas.response[0].league.standings[i][3]
.team.name)
],
)
],
),
)
],
);
});
推荐阅读
- api - System.CalloutException:Web 服务调用失败:WebService 返回 SOAP 错误:内部错误(来自客户端) faultcode=env:Client faultactor=
- java - 如何从受人尊敬的线程之外取消改造调用?
- java - 如何为简单的 ListView 设置我的 listview.setOnItemClickListener()(仅使用一个类)
- javascript - 找不到使用 XMLHttpRequest() 的文件时如何停止 while 循环?
- vue.js - Vue - 观察 vuex getter 属性的单元测试
- excel - 使用 excel VBA 验证 Oracle 凭据
- android - 当使用 math_parent 和 0dp 作为宽度时,具有 0dp 高度的 ConstraintLayout 视图具有不同的实际高度
- python - 使用 Django 创建层次关系,如 REST Api
- asynchronous - future.then 块在返回类型整数的函数内跳过导致返回 null
- c# - 在 WPF 中使用 ResourceDictionary 仅输出“(集合)”而不是 xaml 内容