在Flutter中将多个列表图块项添加到列表 [英] Adding Multiple List Tile Items in Flutter to List

查看:53
本文介绍了在Flutter中将多个列表图块项添加到列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有无法正常工作的这段代码.我有一个Food类,并且已经初始化了名称,价格和唯一的ID字符串.我将唯一ID设置为Uuid().v4(),它将为每个食品分配一个随机字符串.

食品分类

 类Food {字符串名称;弦线价格;字符串uniqueID = Uuid().v4();食物({this.name,这个价格,this.uniqueID})} 

在另一页上,我有一个提供程序功能,可以在购物车中添加项目,它是字符串项目的列表(这可能不是最好的选择).这是它的代码:

  class CartItemsModel扩展ChangeNotifier {List< String>_cartItems = [];List< String>得到cartItems =>_cartItems;addCartItem(字符串项目){_cartItems.add(item);notifyListeners();} 

现在,在另一页上,我正在调用要添加到购物车中的食物,它是带有onPressed上面功能的图标:

 返回ListTile(尾随:集装箱(填充:EdgeInsets.only(top:15.0),子代:IconButton(图标:Icon(Icons.add),onPressed:()=>model.addCartItem(" $ {food.name},卡路里:$ {food.calories} $ {food.price} din \ nVegan:$ {food.isVegan},$ {Uuid().v4()}")), 

现在,您看到那里有Uuid(没有Food类的uniqueID,因为某种原因它不起作用).我有Uuid,因此如果将按钮单击两次,就不会出现多个重复项的错误,这是没有它的错误:

问题是这可以工作并且可以正常工作,但是我在最终的购物车"窗口中显示了来自Uuid的这个丑陋的ID.基本上,我希望此ID不可见.这是它的外观:

这是购物车"屏幕的代码:

 类_CartState扩展了State< Cart>{@override窗口小部件build(BuildContext context){返回Consumer< CartItemsModel>(生成器:(c,model,_)=>脚手架(正文:SingleChildScrollView(子:列(//在结尾处,我应该具有带有清除功能的图标,该图标将从列表中删除该项目儿童:模特.cartItems//也许下面可以返回ListView.separated,就像在食物列表用户上一样,我们将看到.map((e)=> 

为了简短起见,这里不使用我的uniqueID,因为由于某种原因,它不会使每个列表图块项都具有其键唯一,因此单击两次时它不会显示并给我错误,这就是为什么我临时使用Uuid技巧的原因.

我想要的是使其完全像这样工作,但是没有难看的Uuid字符串可见.我可以使用它简单吗,也许在CartItemsModel代码中添加一些内容,一个条件代码或其他内容?

如果我将onPressed中的代码更改为此:

  onPressed:(){如果(!model.cartItems.contains(food)){model.addCartItem(Food);}} 

我遇到错误:

 不能将参数类型"Type"分配给参数类型"String" 

是否有一种简单的解决方案可以轻松地将商品添加到购物车"屏幕中,无论我单击同一项目有多少次,只需在购物车屏幕中将每个商品作为单独的列表图块即可?

更新错误

即使我将所有内容的值都更改为文本",更改这些文件时我都会在其他文件中得到这些错误.

据我所知,

解决方案

字符串没有键属性.尝试这样的操作(您也可以使用UniqueKey())以获取CardItems的密钥:

 返回ListTile(尾随:集装箱(内边距:EdgeInsets.only(top:15.0),子代:IconButton(图标:Icon(Icons.add),onPressed:()=>model.addCartItem(文本("$ {food.name},卡路里:$ {food.calories} $ {food.price} din \ n素食主义者:$ {food.isVegan}",键:ValueKey(Food.uniqueID.toString()),),),),),), 

然后,您需要将CartItems模型调整为 List< Text>_cartItems = []; List< Text>得到cartItems =>_cartItems;

这样,列表中的每个元素都有您的唯一键.另外,您还需要在 _CartState 构建器中调整地图功能,因为现在您不再拥有字符串,而是拥有文本小部件.

I have this code that I can't get to work properly. I have a Food class and I have initialized the name, price, and unique ID strings on it. I made the unique ID to be Uuid().v4(), which would give each food item a random string.

FOOD CLASS

  class Food {
  String name;
  String price;
  String uniqueID = Uuid().v4();
  
  
  Food({this.name,
  this.price,
  this.uniqueID})}

On another page I have a Provider function that would add items in the cart, it is a list of string items (this may not be the best option). Here is the code for it:

class CartItemsModel extends ChangeNotifier {
  List<String> _cartItems = [];

  List<String> get cartItems => _cartItems;

  addCartItem(String item) {
    _cartItems.add(item);
    notifyListeners();
  }

Now, on another page, I am calling that food to be added to the cart, it is an icon with onPressed above function:

return ListTile(
      trailing: Container(
               padding:
                EdgeInsets.only(top: 15.0),
                 child: IconButton(
                   icon: Icon(Icons.add),
                                                
                     onPressed: () =>
                                                   
                        model.addCartItem(
                        "${food.name}, Calories: ${food.calories}        ${food.price} din\nVegan: ${food.isVegan},  ${Uuid().v4()}")),

Now, you see that I have Uuid on there (without my uniqueID from Food class, because for some reason it doesn't work). I have the Uuid, so that there isn't an error with multiple duplicate items if the button would be clicked twice, here's the error without it:

The issue is that this works and is functional, but I have this ugly ID from the Uuid displayed on the final 'cart' window. Basically I want this ID to be invisible. Here is how it looks:

And here is the code for the 'cart' screen:

  class _CartState extends State<Cart> {
  @override
  Widget build(BuildContext context) {
    return Consumer<CartItemsModel>(
      builder: (c, model, _) => Scaffold(
      body: SingleChildScrollView(
            child: Column(
              //on trailing i should have icon with clear function that will delete that item from the list
              children: model
                  .cartItems //maybe below can return ListView.separated like on the food list user, we'll see
                  
                  .map((e) =>   

So to keep long story short, my uniqueID isn't used on here because for some reason it doesn't make each list tile item unique with its key, so it doesn't display and give me error when clicked twice, that's why temporatily I am using the Uuid trick.

What I want is for this to work exactly like this, but without the ugly Uuid string to be seen. Is there simple I can do with it, maybe add something to the CartItemsModel code, a conditional, or something else?

If I change the code in onPressed to this:

onPressed: () {
     if (!model.cartItems
              .contains(food)) {
                model.addCartItem(Food);
                                    }
                                   }

I am getting error:

The argument type 'Type' can't be assigned to the parameter type 'String

Is there a simple solution to have items added to the 'cart' screen easily, no matter how many times I click on the same item, just have each as a separate list tile in the cart screen?

UPDATE ERRORS

I am getting these errors in different files when I change these, even if I change the value of everything to Text.

解决方案

Strings do not have a key property as far as I know. Try something like this (you could also use UniqueKey()) in order to get a key for your CardItems:

return ListTile(
  trailing: Container(
    padding: EdgeInsets.only(top: 15.0),
    child: IconButton(
      icon: Icon(Icons.add),         
      onPressed: () => model.addCartItem(
        Text("${food.name}, Calories: ${food.calories} ${food.price} din\n
          Vegan: ${food.isVegan}", 
          key:ValueKey(Food.uniqueID.toString()),
         ),
       ),
     ),
   ),
 ),

Then you need to adjust your CartItems model to List<Text> _cartItems = []; and List<Text> get cartItems => _cartItems;

This way each element of the list has your unique key. Also you need to adjust the map function in your _CartState builder because now you don't have Strings anymore but Text widgets.

这篇关于在Flutter中将多个列表图块项添加到列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆