如何在顫振中標記列表中的項目？

Question

我在我正在制作的應用程序中解決一些問題時遇到了一個小問題，你們中的任何一個可能能夠幫助您的人都將受到高度贊賞。 我嘗試了幾種解決方案，但仍然沒有運氣。

我的身體中有兩個 Item，它們都有一個 IconButton，問題是當我單擊 IconButton 時，它在兩個 Item 上都會發生變化。 我想讓它只在一個按鈕上改變，而不是全部。 這是代碼的一部分給你

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(s) 是 ['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)),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }