如何在颤动的Listview.builder中设置列表内的json数据列表? [英] How to set the list of json data inside list in the Listview.builder in flutter?
本文介绍了如何在颤动的Listview.builder中设置列表内的json数据列表?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是新来的颤振.我已将我的 json 从
<代码> {状态":成功"，"message": "获取数据",数据": {列表": [{身份证":174，"order_code": "mkjrovcjjrvra6t3vtgo58",厨师ID":1，用户 ID":58，订单状态":2，状态":3，"order_datetime": "2020-02-27 10:25:28",用户位置 ID":1，指令":空，价格":2020，coupon_id":空，使用优惠券":0，折扣":0，最终价格":2020，增值税":262.6，delivery_charge_amt":0，付款ID":1，交付时间":空，delivery_user_id":空，付款状态":0，付款价格":空，付款时间":空，reject_message":空，"created_at": "2020-02-27 10:25:28","updated_at": "2020-02-27 10:25:48",订单数据":[{身份证":203，order_code_id":174，厨师ID":1，food_id":17，用户 ID":58，附加信息":空，食物数量":1，指令":空，价格":400，食物": {身份证":17，名称":虾辣椒"，"description": "<p>烤 大虾 用辛辣粘稠的亚洲酱汁熏制，这些亚洲 辣椒 大蒜 大虾 会让你咂嘴非常满意，感觉就像您刚刚在一家高档现代泰国餐厅用餐一样.<wbr/> </p>","ingredient_detail": "<p>2 汤匙低钠酱油，2 汤匙鲜榨酸橙汁，2 汤匙菜籽油，分开，3 瓣大蒜，切碎，2 茶匙辣椒粉，1 茶匙孜然粉，1 茶匙干牛至, 1 1/2 磅裙子牛排，切成 1/2 英寸的小块，12 个迷你面粉玉米饼，温热的，3/4 杯红洋葱丁，1/2 杯切碎的新鲜香菜叶，1 片酸橙，切成楔形</p>",价格":500，折扣价格":400，ribbon_text":空，"图片": "1581750558-1576657695-prawn-chilli3jpg.jpg",banner_image":空，"published_date": "2019-12-18",is_offer":1}},{身份证":204，order_code_id":174，厨师ID":1，food_id":17，用户 ID":58，附加信息":空，食物数量":3，指令":空，价格":400，食物": {身份证":17，名称":虾辣椒"，"description": "<p>烤 大虾 用辛辣粘稠的亚洲酱汁熏制，这些亚洲 辣椒 大蒜 大虾 会让你咂嘴非常满意，感觉就像您刚刚在一家高档现代泰国餐厅用餐一样.<wbr/> </p>","ingredient_detail": "<p>2 汤匙低钠酱油，2 汤匙鲜榨酸橙汁，2 汤匙菜籽油，分开，3 瓣大蒜，切碎，2 茶匙辣椒粉，1 茶匙孜然粉，1 茶匙干牛至, 1 1/2 磅裙子牛排，切成 1/2 英寸的小块，12 个迷你面粉玉米饼，温热的，3/4 杯红洋葱丁，1/2 杯切碎的新鲜香菜叶，1 片酸橙，切成楔形</p>",价格":500，折扣价格":400，ribbon_text":空，"图片": "1581750558-1576657695-prawn-chilli3jpg.jpg",banner_image":空，"published_date": "2019-12-18",is_offer":1}},{身份证":205，order_code_id":174，厨师ID":1，food_id":4，用户 ID":58，附加信息":空，食物数量":3，指令":空，价格":140，食物": {身份证":4，名称":辣椒沫沫"，"description": "<p>这种多汁的蒸馍馍是用地面水牛肉制成的，被称为"Buff momo".外皮卷得很薄，馅料香辣多汁，上桌再加上浓郁的黄色酸辣酱和经典的辣番茄酱，与蒸馍馍的 味道 相得益彰.</p>","ingredient_detail": "<p>番茄、碎肉、面粉、辣椒、大蒜、姜、葱、黑胡椒和酱油</p>",价格":150，折扣价格":140，ribbon_text":空，图像":1580971029-c-momojfif.jfif"，banner_image":空，"published_date": "2019-11-18",is_offer":1}}],用户数据": {身份证":58，名称":名称"，电子邮件":xyz@gmail.com"，手机号":98XXXXXXX"}}]}}我实现如下:
卡片的外部列表视图
小部件 _buildCardList(BuildContext context) {返回 foodData.length == 0?_isLoading?文本(""): 中心(孩子:文本(无请求")，): ListView.builder(itemCount: foodData == null ?0 : foodData.length,itemBuilder: (context, int index) {返回包装(孩子们:<小部件>[容器(边距:EdgeInsets.only(底部:10)，孩子:卡片(孩子:列(孩子们:<小部件>[_buildCardView(上下文，索引)，_cardBottomView(上下文，索引)],)))],);});}小部件 _buildCardView(BuildContext context, int index) {print("卡片" + index.toString());返回包装(孩子们:<小部件>[容器(孩子:容器(边距:EdgeInsets.all(10.0)，孩子:列(孩子们:<小部件>[_cardTopSection(上下文，索引)，大小盒(高度:5，),_cardFoodExplain(上下文)，_cardMiddleSection(上下文，索引)，_cardTotalPrice(上下文，索引)，容器(高度:1，颜色:Color.fromRGBO(232, 232, 232, 1),),],),),),],);}CardMiddleSection:
Widget _cardMiddleSection(BuildContext context, int i) {返回容器(边距:EdgeInsets.only(顶部:10.0)，孩子:ListView.builder(收缩包装:是的，物理:常量 NeverScrollableScrollPhysics()，项目计数:foodData[i].orderdata == null ?0 : foodData[i].orderdata.length,itemBuilder: (context, i) {for ( i =0; i < foodData[i].orderdata.length; i++) {print("卡片中间" + i.toString());返回 _cardMiddleItems(i);}}),);}CardMiddleItems:
_cardMiddleItems(int i) {print("卡片项目" + i.toString());总数 =foodData[i].orderdata[i].foodQty * foodData[i].orderdata[i].price;返回容器(边距:EdgeInsets.only(底部:5.0)，孩子:填充(填充:EdgeInsets.only(顶部:3，底部:3)，孩子:行(mainAxisAlignment: MainAxisAlignment.spaceBetween,孩子们:<小部件>[展开(孩子:文本(${foodData[i].orderdata[i].food.name}")，),展开(孩子:中心(孩子:文本(${foodData[i].orderdata[i].foodQty}"))，),展开(孩子:文本(${foodData[i].orderdata[i].price}")，),展开(孩子:文本(total.toString())，),],),),);} 解决方案
这是因为我必须处理两个任务.通过更改 _cardMiddleSection 解决了这个问题:
小部件 _cardMiddleSection(BuildContext context, int i) {返回容器(边距:EdgeInsets.only(顶部:10.0)，孩子:ListView.builder(收缩包装:是的，物理:常量 NeverScrollableScrollPhysics()，项目计数:foodData[i].orderdata == null ?0 : foodData[i].orderdata.length,itemBuilder: (context, int index) {return _cardMiddleItems(foodData[i].orderdata[index]);}),);}和 CardMiddleItems 到这个:
_cardMiddleItems(Orderdata orderdata) {总数 =orderdata.foodQty * orderdata.price;返回容器(边距:EdgeInsets.only(底部:5.0)，孩子:填充(填充:EdgeInsets.only(顶部:3，底部:3)，孩子:行(mainAxisAlignment: MainAxisAlignment.spaceBetween,孩子们:<小部件>[展开(孩子:文本(orderdata.food.name，textAlign:TextAlign.start，)，),展开(孩子:中心(孩子:文本(orderdata.foodQty.toString()))),展开(孩子:文本(orderdata.price.toString()，textAlign:TextAlign.end)，),展开(孩子:文本(total.toString()，textAlign:TextAlign.end)，),],),),);}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": "xyz@gmail.com",
"mobileno": "98XXXXXXX"
}
}
]
}
}
I have implemented as follows:
Outer listview of cards
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:
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(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()),
),
],
),
),
);
}
解决方案
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]);
}),
);
}
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),
),
],
),
),
);
}
这篇关于如何在颤动的Listview.builder中设置列表内的json数据列表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
