未能使用地图呈现 OrderItems 列表答案

【问题标题】：failed to use map to render a list of OrderItems未能使用地图呈现 OrderItems 列表
【发布时间】：2020-04-30 21:49:02
【问题描述】：

我尝试使用 Listtile 渲染 List 中的每个项目，这是 Order Model 类中的一个属性，而 OrderItem 是另一个 Model 类，但是发生的情况是所有项目都在每个索引中渲染，就像在屏幕截图中一样

每个元素中的所有项目都作为此快照呈现 小部件中的代码用于呈现 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 模型类，其中包含另一个名为 OrderItem 的模型类作为列表

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 OrderItem {  
  int count;
  String categoryName;
  String itemName;
  String description;
  double price;
  String userComments;
  int orderItemId;
  int menuItemId;
  String image;
.
.
.
}

【问题讨论】：

标签： dictionary listview flutter dart provider

【解决方案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),
      ),
    ),
  ],
);

【讨论】：