无法使用地图呈现 OrderItems 列表

Question

我尝试使用 Listtile 呈现列表中的每个项目，该列表是订单模型 class 中的属性并且 OrderItem 是另一个模型 class，但是发生的事情是所有项目都在每个索引中被撕裂，就像在屏幕截图中一样

每个元素中的所有项目都呈现为此快照 我用来呈现 listView 中所有项目的小部件中的代码，但所有这些项目都呈现在每个元素中

 final orderItem = Provider.of<OrderProvider>(context).findOrderById(orderId);
.
.
. 
),
        ),
        Container(
          decoration: BoxDecoration(
            color: Colors.white,
            border: Border.all(color: Colors.grey),
            borderRadius: BorderRadius.circular(10),
          ),
          padding: EdgeInsets.all(10),
          margin: EdgeInsets.only(bottom: 20),
          height: (mediaQuery
                  - appBar.preferredSize.height
                  - MediaQuery.of(context).padding.top)*0.30,
          width: MediaQuery.of(context).size.width*.8,
          child: ListView.builder(
            itemCount: orderItem.orderItems.length,
            itemBuilder: (ctx, index)=>
            ListTile(
              leading: CircleAvatar(
                child: Image.network(orderItem.orderItems.map((item)=>item.image).toString()),
              ),
              title: Text(orderItem.orderItems.map((item)=>item.itemName).toString()),
              subtitle: Text(orderItem.orderItems.map((item)=>item.count).toString()),
              trailing: Text(orderItem.orderItems.map((item)=>item.userComments).toString()),
            ),
          ),

下面是 Order 模型 class，它包含另一个称为 OrderItem 的模型 class 作为 List

class Order {
  int id;
  String userName;
  String userMobile;
  int numberOfItems;
  String orderSummary;
  double price;
  String currentStatus;
  String address;
  double vatAmount;
  double serviceTax;
  double delivery;
  double discountValue;
  String restaurantName;
  int restaurantId;
  String branchName;
  List<OrderItem> orderItems;
  String orderComment;
  bool inBranch;
.
.
.
}

这是 OrderItem 模型 class

class OrderItem {  
  int count;
  String categoryName;
  String itemName;
  String description;
  double price;
  String userComments;
  int orderItemId;
  int menuItemId;
  String image;
.
.
.
}

Answer 1

我认为您不需要使用地图，因为您已经在使用 ListView 生成器。你是不是想做这样的事情：

ListView.builder(
  itemCount: orderItem.orderItems.length,
  itemBuilder: (_, index) {
    final item = orderItem.orderItems[index];
    return  ListTile(
      leading: CircleAvatar(child: Image.network(item.image)),
      title: Text(item.itemName),
      subtitle: Text("${item.count}"),
      trailing: Text(item.userComments),
    );
  }
),

或者，如果您更喜欢使用地图，这样的方法可能会起作用：

ListView(
  children: [
    ...orderItem.orderItems.map((item) =>
      ListTile(
        leading: CircleAvatar(child: Image.network(item.image)),
        title: Text(item.itemName),
        subtitle: Text("${item.count}"),
        trailing: Text(item.userComments),
      ),
    ),
  ],
);

无法使用地图呈现 OrderItems 列表

failed to use map to render a list of OrderItems

provider

listview

dictionary

dart

flutter