在带有列表的购物车中创建项目列表 (Flutter Web)

Question

我试图在订单车中创建项目列表。但它只显示列表中的第一项....

这是我的代码：

.......

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 NEEDS-COMPOSITING-BITS-UPDATE: 创建者： IntrinsicWidth ← 语义 ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#eb4f8 墨水渲染器] ← 通知监听器 ← CustomPaint ← _ShapeBorderPaint ← PhysicalShape ← _MaterialInterior ← Material ← 约束框 ← ⋯ parentData：（可以使用大小）约束：BoxConstraints(280.0<=w<=711.0, 0.0<=h<=343.0) 尺码：缺失步宽：空步长：空这个 RenderObject 有以下后代（显示到深度 5）： child：RenderFlex#22eec NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE child 1: RenderPadding#42cc4 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE child：RenderFlex#09e2b NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE child 1: 渲染段落#afac8 NEEDS-LAYOUT NEEDS-PAINT 文本：TextSpan child2：RenderRepaintBoundary#14459NEEDS-LAYOUTNEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE child：RenderCustomPaint#ddfde NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE

还有这个：

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

Answer 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(),
      ),
    ],
  ),
);

在带有列表的购物车中创建项目列表 (Flutter Web)

create a item list in a cart with a list (Flutter Web)

listview

list

dart

flutter

flutter-web