顫振新手在這里！我正在嘗試從 api 回應構建串列視圖。
我收到一個 JSON 回應：
{
"data": [
{
"id": "102",
"operator_id": "Airtel",
"circle_id": "Andhra Pradesh",
"recharge_amount": "10",
"recharge_talktime": "7.47",
"recharge_validity": "N.A.",
"recharge_short_desc": "Recharge of Rs. 10 by Airtel",
"recharge_long_desc": "Talktime: Rs.7.47",
"recharge_type": "Top up",
"updated_at": "02-06-2022 11:27:02"
},
{
"id": "103",
"operator_id": "Airtel",
"circle_id": "Andhra Pradesh",
"recharge_amount": "20",
"recharge_talktime": "14.95",
"recharge_validity": "N.A.",
"recharge_short_desc": "Recharge of Rs. 20 by Airtel",
"recharge_long_desc": "Talktime: Rs.14.95",
"recharge_type": "Top up",
"updated_at": "02-06-2022 11:27:02"
},
{
"id": "105",
"operator_id": "Airtel",
"circle_id": "Andhra Pradesh",
"recharge_amount": "100",
"recharge_talktime": "81.75",
"recharge_validity": "N.A.",
"recharge_short_desc": "Recharge of Rs. 100 by Airtel",
"recharge_long_desc": "Talktime: Rs.81.75",
"recharge_type": "Top up",
"updated_at": "02-06-2022 11:27:02"
},
{
"id": "106",
"operator_id": "Airtel",
"circle_id": "Andhra Pradesh",
"recharge_amount": "500",
"recharge_talktime": "423.73",
"recharge_validity": "N.A.",
"recharge_short_desc": "Recharge of Rs. 500 by Airtel",
"recharge_long_desc": "Talktime: Rs.423.73",
"recharge_type": "Top up",
"updated_at": "02-06-2022 11:27:02"
}
]
}
我使用這個模型類將 JSON 轉換為 Dart 物件：
Plans plansFromJson(String str) => Plans.fromJson(json.decode(str));
String plansToJson(Plans data) => json.encode(data.toJson());
class Plans {
Plans({
required this.data,
});
List<Datum> data;
factory Plans.fromJson(Map<String, dynamic> json) => Plans(
data: List<Datum>.from(json["data"].map((x) => Datum.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"data": List<dynamic>.from(data.map((x) => x.toJson())),
};
}
class Datum {
Datum({
required this.id,
required this.operatorid,
required this.circleid,
required this.rechargeAmount,
required this.rechargeTalktime,
required this.rechargeValidity,
required this.rechargeShortdesc,
required this.rechargeLongdesc,
required this.rechargeType,
required this.updatedAt,
});
String id;
String operatorid;
String circleid;
String rechargeAmount;
String rechargeTalktime;
String rechargeValidity;
String rechargeShortdesc;
String rechargeLongdesc;
String rechargeType;
String updatedAt;
factory Datum.fromJson(Map<String, dynamic> json) => Datum(
id: json["id"],
operatorid: json["operatorid"],
circleid: json["circleid"],
rechargeAmount: json["recharge_amount"],
rechargeTalktime: json["recharge_talktime"],
rechargeValidity: json["recharge_validity"],
rechargeShortdesc: json["recharge_shortdesc"],
rechargeLongdesc: json["recharge_longdesc"],
rechargeType: json["recharge_type"],
updatedAt: json["updated_at"],
);
Map<String, dynamic> toJson() => {
"id": id,
"operatorid": operatorid,
"circleid": circleid,
"recharge_amount": rechargeAmount,
"recharge_talktime": rechargeTalktime,
"recharge_validity": rechargeValidity,
"recharge_shortdesc": rechargeShortdesc,
"recharge_longdesc": rechargeLongdesc,
"recharge_type": rechargeType,
"updated_at": updatedAt,
};
}
API請求方法：
Future<Plans> getPlanDetails(
String operator, String circle, String rechargeType) async {
var planUrl = Uri.parse(
'https://api.datayuge.com/v6/rechargeplans/?apikey=$datayugeApiKey&operator_id=$operator&circle_id=$circle&recharge_type=$rechargeType&limit=50&order_by=recharge_amount');
debugPrint(planUrl.toString());
final response = await http.get(planUrl);
debugPrint(response.body);
String jsonString = response.body;
final plans = plansFromJson(jsonString);
return plans;
}
當我嘗試從這些資料構建串列視圖時，我得到了 LateInitializationError。當我將本地字串加載為 JSON 時，一切正常。僅當我從 API 獲取資料時才會收到此錯誤。
有狀態的小部件：
class RechargePlansView extends StatefulWidget {
RechargePlansView({Key? key}) : super(key: key);
@override
State<RechargePlansView> createState() => _RechargePlansViewState();
}
class _RechargePlansViewState extends State<RechargePlansView> {
List<Datum> data = [];
late Plans plans;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Recharge Plans')),
body: Text('Recharge Plans view'),
ListView.builder(
itemCount: widget.plans.data.length,
itemBuilder: (context, index) {
return ListTile(
leading: CircleAvatar(
radius: 28,
child: Center(
child: Text(
'\u{20B9}${plans.data[index].rechargeAmount.toString()}'),
),
),
title: Text(
'Talktime: ${plans.data[index].rechargeAmount} Validity: ${plans.data[index].rechargeValidity}'),
subtitle: Text(plans.data[index].rechargeShortDesc),
);
}),
);
}
}
uj5u.com熱心網友回復：
您定義：后期計劃計劃；
但是你在哪一行初始化這個屬性？
你在哪一行呼叫了 api 方法？
實際上你的計劃 attr 是空的！
uj5u.com熱心網友回復：
我通過在 setState() 中初始化計劃解決了這個問題。
class _RechargePlansViewState extends State<RechargePlansView> {
@override
void initState() {
super.initState();
widget.getPlanDetails().then((value) {
setState(() {
plans = value;
});
});
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/488425.html