使用列表在购物车中创建项目列表（Flutter Web）答案

【问题标题】：create a item list in a cart with a list (Flutter Web)使用列表在购物车中创建项目列表（Flutter Web）
【发布时间】：2020-11-05 06:55:40
【问题描述】：

我尝试在订单购物车中创建商品列表。但它只显示列表中的第一项....

这是我的代码：

.......

class CartItem {
  String name;
  String quantity;
  String price;

  CartItem({
    this.name,
    this.quantity,
    this.price,
  });
}

List<CartItem> cartItem = [];

var _quantity = TextEditingController();

........

Widget cartList() {
  if (cartItem.length != 0) {
    for (var item in cartItem) {
      return new Text('${item.name}');
    }
  }
  return Text('Nothing in Cart');
}

.......

RaisedButton(
                    elevation: 1,
                    color: Colors.blueGrey,
                    onPressed: () {
                      showDialog(
                        context: context,
                        builder: (BuildContext contex) {
                          return AlertDialog(
                            content: Column(
                              children: [
                                Text('Your Order List'),
                                Container(
                                  child: cartList(),
                                ),
                              ],
                            ),
                          );
                        },
                      );
                    },
                    child: Text(
                      'Conferm Order',
                      textAlign: TextAlign.end,
                    ),
                  ),

我也尝试过使用 listview.builder，但失败了。它给了我一些错误。类似于“断言失败”或“渲染”类型错误。

Widget cartList() {
  if (cartItem.length != 0) {
    return ListView.builder(
      itemCount: cartItem.length,
      itemBuilder: (context, index) {
        return Text(cartItem[index].name);
      },
    );
  }
  return Text('Nothing in Cart');
}

这是我尝试使用 Listiew.builder 时的错误：

触发异常时正在处理以下 RenderObject： RenderIntrinsicWidth#3fbd2 relayoutBoundary=up6 NEEDS-LAYOUT NEEDS-PAINT 需要合成位更新：创建者：IntrinsicWidth ← 语义 ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#eb4f8 墨水渲染器] ← 通知监听器← CustomPaint ← _ShapeBorderPaint ← PhysicalShape ← _MaterialInterior ← Material ← 约束框← ⋯ parentData：（可以使用大小）约束：BoxConstraints(280.0

还有这个：

另一个异常被抛出：断言失败：文件：~flutter/packages/flutter/lib/src/rendering/mouse_tra cking.dart:392:12

【问题讨论】：

ListView.builder 是要走的路。 return 语句退出函数，它们不会神奇地创建多个 returns 中的 Listour。请与您的ListView.builder 分享具体错误。
它显示了这个：Another exception was thrown: Assertion failed: file:/~flutter/packages/flutter/lib/src/rendering/mouse_tra cking.dart:392:12
这是一个单独的错误，因此它说“另一个异常”。请显示专门针对ListView.builder 的异常。
请删除这些 cmets 并将其发布为问题中的编辑。
使用ListView.builder 并关注@HosseinYousefi 的出色回答。

标签： list flutter listview dart flutter-web

【解决方案1】：

首先，当你在几乎任何编程语言中return 时，你就退出了函数。所以你不会得到一个列表，而只会得到一个 Text 小部件。

关于ListView.builder，你错过了.name（如果你想显示更多的东西，比如价格，你必须使用另一个小部件或将它们连接成一个字符串，因为文本只接受String）：

Widget cartList() {
  if (cartItem.length != 0) {
    return ListView.builder(
      itemCount: cartItem.length,
      itemBuilder: (context, index) {
        return Text(cartItem[index].name);
      },
    );
  }
  return Text('Nothing in Cart');
}

您可以使用 ListTile 代替 Text 小部件，它具有许多通常对列表有用的文本小部件的占位符。

现在对于布局错误，最简单的解决方法是为包含您的cartList 的Container 添加height 和width 属性：

return AlertDialog(
  content: Column(
    children: [
      Text('Your Order List'),
      Container(
        height: 300, // or any other number
        width: 300, // or any other number
        child: cartList(),
      ),
    ],
  ),
);

【讨论】：

你太棒了！有用。！非常感谢你，伙计。