从 api 获取数据时出现空白屏幕
Posted
技术标签:
【中文标题】从 api 获取数据时出现空白屏幕【英文标题】：Blank Screen when fetching data from api 【发布时间】：2021-11-06 17:04:49 【问题描述】：我正在从api 获取数据并使用ListView builder 将其显示在列表中，它在模拟器上正常工作，但是当我在我的安卓手机上运行应用程序时，它显示为空白屏幕，如下所示。
在离开历史标签下，我正在显示来自 api 的数据，但现在看起来像这样。
在模拟器上是这样的
代码如下：
获取 api 数据并将其插入列表中
List<leaveHistory> historyList = [];
var loader = 0;
Future<List<leaveHistory>> _getRecord() async
Dio dio = new Dio();
var data =
'username': getname,
'token': getaccesstoken,
;
return dio
.post(localhostUrlLeaveHistoryON, data: json.encode(data))
.then((onResponse) async
Map<String, dynamic> map = onResponse.data;
List<dynamic> data = map["data"];
for (var historyData in data)
leaveHistory history = leaveHistory(
historyData["Date"],
historyData["description"],
historyData["type"],
historyData['fromdate'],
historyData["todate"],
historyData["noofleavedays"],
historyData["leave"]);
historyList.add(history);
loader = 0;
if (historyList.length == 0)
loader = 1;
return historyList;
).catchError((onerror)
loader = 1;
print(onerror.toString());
);
使用 ListView.builder 显示数据
Widget build(BuildContext context)
return Scaffold(
appBar: new MyAppBar(
title: Text("Leaves Tracker"),
onpressed: ()
Navigator.push(
context, MaterialPageRoute(builder: (context) => Profile()));
),
drawer: NavigationDrawerWidget(),
body: Stack(overflow: Overflow.visible, children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(20, 10, 0, 0),
child: Text(
"Leave History",
style: TextStyle(fontSize: 30, fontFamily: 'RaleWay'),
),
),
Container(
padding: EdgeInsets.fromLTRB(10, 30, 0, 0),
child: FutureBuilder(
future: _getRecord(),
builder: (BuildContext context,
AsyncSnapshot<List<leaveHistory>> snapshot)
if (snapshot.hasData)
if (historyList.length != 0)
return Container(
padding: EdgeInsets.fromLTRB(0, 30, 0, 0),
child: Expanded(
child: ListView.builder(
itemCount: snapshot.data.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index)
Color c = Colors.red;
//changing the avatar color
if (i == 0)
i++;
else if (i == 1)
c = Colors.blue;
i++;
else if (i == 2)
c = Color(int.parse(annualboxcolor));
i = 0;
Color c1 = Colors.green;
if (snapshot.data[index].Status == "Approved")
c1 = Colors.green;
else if (snapshot.data[index].Status ==
"Not Approved")
c1 = Colors.red;
else if (snapshot.data[index].Status ==
"Pending")
c1 = Color(int.parse(pendingrequestcolor));
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
children: [
ListTile(
leading: CircleAvatar(
radius: 25,
backgroundColor: c,
child: Container(
padding: EdgeInsets.fromLTRB(
0, 10, 0, 0),
child:
Column(children: <Widget>[
Text(
snapshot
.data[index].noofdays
.toString(),
style: TextStyle(
fontSize: 15.0,
fontWeight:
FontWeight.bold,
color: Colors.white),
),
Text(
int.parse(snapshot
.data[index]
.noofdays) >
1
? "Days"
: "Day",
style: TextStyle(
fontSize: 10.0,
color: Colors.white),
)
]),
)),
title:
Text(snapshot.data[index].type),
isThreeLine: true,
subtitle: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
snapshot.data[index].fromdate +
" To " +
snapshot.data[index].todate,
),
Text(snapshot.data[index].Status,
style: TextStyle(
color: c1,
fontWeight:
FontWeight.bold)),
Text(
snapshot
.data[index].description,
)
],
)),
Divider(
color: Colors.grey,
height: 10,
),
],
));
,
)));
if (loader == 1)
print("run");
return Nodatafound();
else
return Center(
child: CircularProgressIndicator(
color: Colors.blue[500],
));
),
),
]));
历史类
class leaveHistory
final String date;
final String fromdate;
final String todate;
final String description;
final String type;
final String Status;
final String noofdays;
leaveHistory(this.date, this.description, this.type, this.fromdate,
this.todate, this.noofdays, this.Status);
当我从抽屉重定向到这个屏幕时，它首先显示这个错误
DioError [DioErrorType.response]: Http status error [300]
在这catchError这行print(onerror.toString());
更新：
当我用数据线将手机与笔记本电脑连接时，它工作正常，但是当我安装apk 时出现问题。
请帮助我在哪里做错了。
【问题讨论】：
你在android文件中设置了Internet权限吗？ @RavindraS.Patil 是的 【参考方案1】：如果@Huthaifa 不是您正在寻找的答案，您是否尝试过更新：localhostUrlLeaveHistoryON 的值？
如果您使用类似：http://localhost
请尝试将其更改为您计算机的 IP 地址。
【讨论】：
我怀疑这是互联网问题或 API 相关的问题。它也在发布版本中显示，因为这就是错误在发布中出现的方式，作为灰色区域而不是通常的红色屏幕。 是的，这就是我首先提出免责声明的原因。但这很可能是因为在 dio 中捕获了错误。 实际上两者都可以。 yepyep，等他宝贵的回复哈哈。 哈哈，这两个答案都没有帮助我！我在我的屏幕上收到 api 响应数据，我也收到 300 错误，我想起初当我重定向到屏幕时它会向我发送 300 错误并且也处理这个我显示一个循环加载程序，当我重定向这个时显示屏幕，然后几秒钟后它显示我的数据【参考方案2】：您的错误是由于不正确使用父数据小部件引起的。那是使用扩展的内部容器。从此处删除您的Expanded：
return Container(
padding: EdgeInsets.fromLTRB(0, 30, 0, 0),
child: Expanded(
child: ListView.builder(
您还会注意到控制台中的错误消失了。始终阅读错误并理解它们。错误将 100% 说，incorrect use of parent widget。只需删除展开的即可。
【讨论】：
我仍然在模拟器上遇到incorrect use of parent widget 错误和 dio 300 错误，
请查看我的帖子更新部分以上是关于从 api 获取数据时出现空白屏幕的主要内容，如果未能解决你的问题，请参考以下文章
React：使用 API 从 Prisma 获取数据时出现未处理的错误 500
从 API 获取数据后立即将数据从父组件传递到子组件时出现问题。 （仅限功能组件）
为啥在尝试从 api 获取数据时出现此错误“TypeError：字符串索引必须是整数”？