flutter - 在flutter中调用api后小部件没有重建
问题描述
当我构建项目时,小部件没有显示,但是当我重新保存项目时,小部件正在显示。我在下面给出我的代码。
- main.dart :-
(这是保存到每个页面的路由的主文件)
import 'package:flutter/material.dart';
import 'package:player_profile/first.dart';
import 'package:player_profile/second.dart';
import 'package:player_profile/third.dart';
void main() {
runApp(MaterialApp(
initialRoute: '/first',
routes: {
'/first': (context) => First(),
'/second': (context) => Second(),
'/third': (context) => Third()
},
));
}
- first.dart :-
(这是应用程序的第一页,其中包含所有团队数据的小部件列表。单击团队的小部件后,它将转到第二页)
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:player_profile/teamData.dart';
import 'dart:convert' as convert;
class First extends StatefulWidget {
@override
_FirstState createState() => _FirstState();
}
class _FirstState extends State<First> {
List<Widget> teamList = [];
void getTeamList() async {
var url = Uri.parse('https://www.balldontlie.io/api/v1/teams');
http.Response response = await http.get(url);
if (response.statusCode == 200) {
var jsonData = convert.jsonDecode(response.body) as Map<String, dynamic>;
if (jsonData['data'] != null) {
jsonData['data'].forEach((v) {
// teamData.add(new TeamData.fromJson(v));
teamList.add(Padding(
padding: const EdgeInsets.all(8.0),
// ignore: deprecated_member_use
child: RaisedButton(
onPressed: () {
Navigator.pushNamed(context, '/second');
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Name : ${TeamData.fromJson(v).name}',
style: TextStyle(
color: Colors.red,
fontSize: 15.0,
),
),
Text(
'Abbreviation : ${TeamData.fromJson(v).abbreviation}',
style: TextStyle(
color: Colors.blue,
fontSize: 15.0,
),
),
Text(
'City : ${TeamData.fromJson(v).city}',
style: TextStyle(
color: Colors.blue,
fontSize: 15.0,
),
),
Text(
'Conference : ${TeamData.fromJson(v).conference}',
style: TextStyle(
color: Colors.blue,
fontSize: 15.0,
),
),
Text(
'Division : ${TeamData.fromJson(v).division}',
style: TextStyle(
color: Colors.blue,
fontSize: 15.0,
),
)
],
)),
));
});
}
}
}
@override
void initState() {
super.initState();
getTeamList();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text('Team'),
),
body: GridView.count(
crossAxisCount: 2,
children: teamList,
));
}
}
- second.dart :-
(这是应用程序的第二页,其中包含从 http 调用接收到的所有播放器详细信息小部件。它从 http 接收数据但小部件未显示。小部件仅在重新保存项目后显示。在 setState() 之后它不会重新构建这页纸。)
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert' as convert;
import 'package:player_profile/singlePlayer.dart';
class Second extends StatefulWidget {
@override
_SecondState createState() => _SecondState();
}
class _SecondState extends State<Second> {
List<SinglePlayerData> playersList = [];
List<Widget> showPlayers = [];
getAllPlayers() async {
var url = Uri.parse('https://www.balldontlie.io/api/v1/players');
http.Response response = await http.get(url);
if (response.statusCode == 200) {
var jsonData = convert.jsonDecode(response.body) as Map<String, dynamic>;
jsonData['data'].forEach((v) {
SinglePlayerData playerData = SinglePlayerData(
v['id'],
v['first_name'],
v['height_feet'],
v['height_inches'],
v['last_name'],
v['position'],
v['weight_pounds'],
v['team']['id'],
v['team']['abbreviation'],
v['team']['city'],
v['team']['conference'],
v['team']['division'],
v['team']['full_name'],
v['team']['name']);
playersList.add(playerData);
setState(() {
print('setState');
showPlayers.add(Padding(
padding: const EdgeInsets.all(8.0),
// ignore: deprecated_member_use
child: RaisedButton(
onPressed: () {
Navigator.pushNamed(context, '/third',
arguments: {'data': playerData});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: 75.0,
width: 75.0,
child: Image(image: AssetImage('images/player2.png'))),
Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
'Name : ${playerData.firstName} ${playerData.lastName}',
style: TextStyle(fontSize: 15.0, color: Colors.red),
),
),
Text(
'Team : ${playerData.name}',
style: TextStyle(fontSize: 15.0, color: Colors.blue),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
'Position : ${playerData.position}',
style: TextStyle(fontSize: 15.0, color: Colors.purple),
),
)
],
)),
));
});
});
print(playersList[1].firstName);
}
}
@override
void initState() {
print('initState');
super.initState();
}
@override
Widget build(BuildContext context) {
print('build');
getAllPlayers();
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text('Players'),
),
body: GridView.count(
crossAxisCount: 2,
children: showPlayers,
));
}
}
teamData.dart(模型类):-
(这是团队数据的模型类)
class TeamData { int? id; String? abbreviation; String? city; String? conference; String? division; String? fullName; String? name; TeamData(this.id, this.abbreviation, this.city, this.conference, this.division, this.fullName, this.name); TeamData.fromJson(Map<String, dynamic> json) : id = json['id'], abbreviation = json['abbreviation'], city = json['city'], conference = json['conference'], division = json['division'], fullName = json['full_name'], name = json['name']; Map<String, dynamic> toJson() { final Map<String, dynamic> data = new Map<String, dynamic>(); data['id'] = this.id; data['abbreviation'] = this.abbreviation; data['city'] = this.city; data['conference'] = this.conference; data['division'] = this.division; data['full_name'] = this.fullName; data['name'] = this.name; return data; } }
singlePlayer.dart(模型类):-
(这是玩家详细数据的模型类)
class TeamData {
int? id;
String? abbreviation;
String? city;
String? conference;
String? division;
String? fullName;
String? name;
TeamData(this.id, this.abbreviation, this.city, this.conference,
this.division, this.fullName, this.name);
TeamData.fromJson(Map<String, dynamic> json)
: id = json['id'],
abbreviation = json['abbreviation'],
city = json['city'],
conference = json['conference'],
division = json['division'],
fullName = json['full_name'],
name = json['name'];
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['id'] = this.id;
data['abbreviation'] = this.abbreviation;
data['city'] = this.city;
data['conference'] = this.conference;
data['division'] = this.division;
data['full_name'] = this.fullName;
data['name'] = this.name;
return data;
}
}
解决方案
我想你只需要setState((){});
在结束时打电话getTeamList()
推荐阅读
- c# - Net Core 调试错误:评估函数超时
- c++ - 尽管有reuse_address选项,Boost ASIO Linux的地址已经在使用中,为什么?
- c++ - 我可以有一个每行有不同列数的数组吗?
- xamarin - 如何使用接口
- shell - 在 Shell 中运行 100 组不同的命令
- r - R中的3D矩阵乘法
- spacy - 鉴于我有原始文本和“单词”但没有“空格”数据,如何创建 spaCy 文档
- docker - 无法在 kubernetes 上运行 docker-compose.yaml?
- swift - Google Cast 标签未本地化为设备语言
- ionic-framework - 离子 4 角度路由器导航故障排除