如何在Flutter中设置Listview.builder中列表内的json数据列表？
我是新手。我已经将我的json从here转换为pojo。我的api在下面。我可以从api中获取数据，但是 Orderdata 中有3个食品项，但是我只能获取只有索引0的值，如下图所示：我已实现如下：
{
"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"
}
}
]
}
}
我已实现如下：
卡片的外部列表视图
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()),
),
],
),
),
);
}
1 个答案:
答案 0 :(得分：0)
这是由于我必须处理两项任务。通过更改_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, int index) {
return _cardMiddleItems(foodData[i].orderdata[index]);
}),
);
}
和CardMiddleItems对此：
_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
- 如何将数据表转换为listview.builder？
- 在flutter中的行和列内设置数据
- 如何在Flutter中设置Listview.builder中列表内的json数据列表？
- Flutter：如何在ListView.builder中显示来自ListView.builder的数组数据？
- 如何重置ListView.Builder索引
- 如何在ListView.Builder Flutter中添加列
- 无法在flutter中过滤listview.builder的列表
- 如何在flutter中索引添加到listview.builder中的列表的JSON数据？
- 如何设置包装ListView.Builder的容器的特定高度
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？