如何在列表中标记项目？

Question

我在自己正在开发的应用程序中找出一些问题时遇到了一个小问题，非常感谢能够帮助您的任何人。我尝试了几种解决方案，但还是没有运气。

我的体内有两个项目，它们两个都有一个IconButton，问题是当我单击IconButton时，这两个项目都改变了。我只想更改一个按钮，而不是全部。这是为您提供的代码部分

Padding(
   padding: const EdgeInsets.all(8.0),
   child: MyItems("Cheese burger" , Colors.red, "50")
),
Padding(
  padding: const EdgeInsets.all(8.0),
  child: MyItems("Marshal Burger" ,Colors.grey, "23")
),

And this is how I created MyItems

  IconData icon = Icons.favorite_border;

  Material MyItems(String foodName, Color color, String price) {

    return Material(
      color: color, elevation: 0.0,
      shadowColor: Color(0x802196F3),
      borderRadius: BorderRadius.circular(15.0),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[

              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text("$foodName : R$price",

                  style: TextStyle(color: Colors.black, fontSize: 15.0,
                      fontWeight: FontWeight.bold),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text("",
                    style: TextStyle(color: Colors.black, fontSize: 12.0,
                        fontWeight: FontWeight.bold),
                  ),
                  new IconButton(
                      icon: Icon(icon, size: 35.0 ,
                      ),
                      onPressed: () => _onPressed(foodName,price)),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }

And this is the function called from the IconButton on pressed.

void _onPressed(String name, String price) async {

    SharedPreferences savedCart = await SharedPreferences.getInstance();
    String addedToCart = savedCart.getString('$name');

    if (addedToCart == null) {
      setState(() {
        icon = Icons.favorite;
      });
      savedCart.setString('$name', "$price");
    }
    else {
      setState(() {
        icon = Icons.favorite_border;
      });
      savedCart.remove('$name');
    }

  }

我希望能够在不更改其他图标的情况下标记图标，我有点知道为什么它不起作用，但我不知道如何解决它]

Answer 1

问题很简单，您将相同的小部件IconData icon传递给它们，因此当icon更改时，它们都将更改，为了解决该问题，您需要使用不同的IconData将它们分开，这是一个例子

IconData icon1 = Icons.favorite_border;
IconData icon2 = Icons.favorite_border;

然后，您需要做两个事情之一，分别使用函数_onPressed()对每个请求执行不同的操作，或者帮助它定义应更改哪个IconData。我会选择第二种选择，像这样：假设我们的foodName是['apple'，'banana'] ..

void _onPressed(String name, String price) async {

    SharedPreferences savedCart = await SharedPreferences.getInstance();
    String addedToCart = savedCart.getString('$name');
    var tempIcon;


    if (addedToCart == null) {
          if(name == 'apple'){
              icon1 = Icons.favorite;
          } else {
              icon2 = Icons.favorite;
          }
      savedCart.setString('$name', "$price");
    }
    else {
          if(name == 'apple'){
              icon1 = Icons.favorite_border;
          } else {
              icon2 = Icons.favorite_border;
          }
      savedCart.remove('$name');
    }
    setState(() {});

  }

并简单地将不同的IconData传递到代码中>

Material MyItems(String foodName, Color color, String price) {

    return Material(
      color: color, elevation: 0.0,
      shadowColor: Color(0x802196F3),
      borderRadius: BorderRadius.circular(15.0),
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[

              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text("apple : 50",

                  style: TextStyle(color: Colors.black, fontSize: 15.0,
                      fontWeight: FontWeight.bold),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text("",
                    style: TextStyle(color: Colors.black, fontSize: 12.0,
                        fontWeight: FontWeight.bold),
                  ),
                  new IconButton(
                      icon: Icon(icon1, size: 35.0 ,
                      ),
                      onPressed: () => _onPressed('apple',50)),
                ],
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text("banana : 25",

                  style: TextStyle(color: Colors.black, fontSize: 15.0,
                      fontWeight: FontWeight.bold),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text("",
                    style: TextStyle(color: Colors.black, fontSize: 12.0,
                        fontWeight: FontWeight.bold),
                  ),
                  new IconButton(
                      icon: Icon(icon2, size: 35.0 ,
                      ),
                      onPressed: () => _onPressed('banana',25)),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }