本文介绍了如何在Flutter中设置Listview.builder中列表内的json数据列表?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新手.我已经从此处将json转换为pojo了.我的api在下面.我可以从api中获取数据，但是 Orderdata 中有3个食品项，但是我只能获取下图所示的索引0的值:我实现了以下内容:
I am new to flutter. I have converted my json to pojo from here . My api is below. I am able to get the data from api but there are 3 food items in the Orderdata but I am only able to get value of only index 0 which is shown in image below: I have implemented as follows:
{
"status": "success",
"message": "Data Fetched",
"data": {
"list": [
{
"id": 174,
"order_code": "mkjrovcjjrvra6t3vtgo58",
"chef_id": 1,
"user_id": 58,
"order_status": 2,
"status": 3,
"order_datetime": "2020-02-27 10:25:28",
"user_location_id": 1,
"instruction": null,
"price": 2020,
"coupon_id": null,
"use_coupon": 0,
"discount": 0,
"final_price": 2020,
"vat_amt": 262.6,
"delivery_charge_amt": 0,
"payment_id": 1,
"delivery_time": null,
"delivery_user_id": null,
"payment_status": 0,
"payment_price": null,
"payment_time": null,
"reject_message": null,
"created_at": "2020-02-27 10:25:28",
"updated_at": "2020-02-27 10:25:48",
"orderdata": [
{
"id": 203,
"order_code_id": 174,
"chef_id": 1,
"food_id": 17,
"user_id": 58,
"additional_info": null,
"food_qty": 1,
"instruction": null,
"price": 400,
"food": {
"id": 17,
"name": "Prawns Chilli",
"description": "<p>Seared prawns smothered in a spicy, sticky Asian sauce, these Asian Chilli Garlic Prawns will have you smacking your lips in utter satisfaction, feeling like you’ve just dined at a fancy modern Thai restaurant.<wbr /> </p>",
"ingredient_detail": "<p>2 tablespoons reduced sodium soy sauce, 2 tablespoons freshly squeezed lime juice, 2 tablespoons canola oil, divided, 3 cloves garlic, minced, 2 teaspoons chili powder, 1 teaspoon ground cumin, 1 teaspoon dried oregano, 1 1/2 pounds skirt steak, cut into 1/2-inch pieces, 12 mini flour tortillas, warmed, 3/4 cup diced red onion, 1/2 cup chopped fresh cilantro leaves, 1 lime, cut into wedges</p>",
"price": 500,
"discount_price": 400,
"ribbon_text": null,
"image": "1581750558-1576657695-prawn-chilli3jpg.jpg",
"banner_image": null,
"published_date": "2019-12-18",
"is_offer": 1
}
},
{
"id": 204,
"order_code_id": 174,
"chef_id": 1,
"food_id": 17,
"user_id": 58,
"additional_info": null,
"food_qty": 3,
"instruction": null,
"price": 400,
"food": {
"id": 17,
"name": "Prawns Chilli",
"description": "<p>Seared prawns smothered in a spicy, sticky Asian sauce, these Asian Chilli Garlic Prawns will have you smacking your lips in utter satisfaction, feeling like you’ve just dined at a fancy modern Thai restaurant.<wbr /> </p>",
"ingredient_detail": "<p>2 tablespoons reduced sodium soy sauce, 2 tablespoons freshly squeezed lime juice, 2 tablespoons canola oil, divided, 3 cloves garlic, minced, 2 teaspoons chili powder, 1 teaspoon ground cumin, 1 teaspoon dried oregano, 1 1/2 pounds skirt steak, cut into 1/2-inch pieces, 12 mini flour tortillas, warmed, 3/4 cup diced red onion, 1/2 cup chopped fresh cilantro leaves, 1 lime, cut into wedges</p>",
"price": 500,
"discount_price": 400,
"ribbon_text": null,
"image": "1581750558-1576657695-prawn-chilli3jpg.jpg",
"banner_image": null,
"published_date": "2019-12-18",
"is_offer": 1
}
},
{
"id": 205,
"order_code_id": 174,
"chef_id": 1,
"food_id": 4,
"user_id": 58,
"additional_info": null,
"food_qty": 3,
"instruction": null,
"price": 140,
"food": {
"id": 4,
"name": "Chili Momo",
"description": "<p>This juicy steamed momos are prepared from the ground water buffalo meat and are called \"Buff momo\". The wrappers are very thinly rolled and the filling is deliciously spicy and juicy, served along with tangy yellow chutney and classic spicy tomato sauce that compliments the taste of steamed momos.</p>",
"ingredient_detail": "<p>Tomato, Ground meat ,Flour, Chilli pepper, Garlic, Ginger, Scallion, Black pepper and Soy sauce</p>",
"price": 150,
"discount_price": 140,
"ribbon_text": null,
"image": "1580971029-c-momojfif.jfif",
"banner_image": null,
"published_date": "2019-11-18",
"is_offer": 1
}
}
],
"userdata": {
"id": 58,
"name": "Name",
"email": "[email protected]",
"mobileno": "98XXXXXXX"
}
}
]
}
}
我已实现如下:
卡片的外部列表视图
Widget _buildCardList(BuildContext context) {
return foodData.length == 0
? _isLoading
? Text("")
: Center(
child: Text("No Request"),
)
: ListView.builder(
itemCount: foodData == null ? 0 : foodData.length,
itemBuilder: (context, int index) {
return Wrap(
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 10),
child: Card(
child: Column(
children: <Widget>[
_buildCardView(context, index),
_cardBottomView(context, index)
],
)))
],
);
});
}
Widget _buildCardView(BuildContext context, int index) {
print("Card " + index.toString());
return Wrap(
children: <Widget>[
Container(
child: Container(
margin: EdgeInsets.all(10.0),
child: Column(
children: <Widget>[
_cardTopSection(context, index),
SizedBox(
height: 5,
),
_cardFoodExplain(context),
_cardMiddleSection(context,index),
_cardTotalPrice(context, index),
Container(
height: 1,
color: Color.fromRGBO(232, 232, 232, 1),
),
],
),
),
),
],
);
}
CardMiddleSection:
CardMiddleSection:
Widget _cardMiddleSection(BuildContext context, int i) {
return Container(
margin: EdgeInsets.only(top: 10.0),
child: ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount:
foodData[i].orderdata == null ? 0 : foodData[i].orderdata.length,
itemBuilder: (context, i) {
for ( i =0; i < foodData[i].orderdata.length; i++) {
print("Card Middle" + i.toString());
return _cardMiddleItems(i);
}
}),
);
}
CardMiddleItems:
CardMiddleItems:
_cardMiddleItems(int i) {
print("Card Items" + i.toString());
num total =
foodData[i].orderdata[i].foodQty * foodData[i].orderdata[i].price;
return Container(
margin: EdgeInsets.only(bottom: 5.0),
child: Padding(
padding: EdgeInsets.only(top: 3, bottom: 3),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Text("${foodData[i].orderdata[i].food.name}"),
),
Expanded(
child: Center(child: Text("${foodData[i].orderdata[i].foodQty}")),
),
Expanded(
child: Text("${foodData[i].orderdata[i].price}"),
),
Expanded(
child: Text(total.toString()),
),
],
),
),
);
}
推荐答案
这是由于我必须处理两个任务.通过更改_cardMiddleSection来解决此问题，如下所示:
It was due to the i has to handle two task. Solved this by changing _cardMiddleSection as follows:
Widget _cardMiddleSection(BuildContext context, int i) {
return Container(
margin: EdgeInsets.only(top: 10.0),
child: ListView.builder(
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemCount:
foodData[i].orderdata == null ? 0 : foodData[i].orderdata.length,
itemBuilder: (context, int index) {
return _cardMiddleItems(foodData[i].orderdata[index]);
}),
);
}
和CardMiddleItems对此:
and CardMiddleItems to this:
_cardMiddleItems(Orderdata orderdata) {
num total =
orderdata.foodQty * orderdata.price;
return Container(
margin: EdgeInsets.only(bottom: 5.0),
child: Padding(
padding: EdgeInsets.only(top: 3, bottom: 3),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Text(orderdata.food.name,textAlign: TextAlign.start,),
),
Expanded(
child: Center(child: Text(orderdata.foodQty.toString()))
),
Expanded(
child: Text(orderdata.price.toString(),textAlign: TextAlign.end),
),
Expanded(
child: Text(total.toString(),textAlign: TextAlign.end),
),
],
),
),
);
}
这篇关于如何在Flutter中设置Listview.builder中列表内的json数据列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！