Flutter 如何在Flatter中激活和停用收藏夹图标

我想激活和停用每个项目的收藏夹图标 因为我现在得到的是填补这个图标，但同时，它没有得到 停用

bool isPressed=false;
new GestureDetector(
                            onTap: () {
                              setState(() => isPressed = true);
                            },
                            child: Icon(Icons.favorite_sharp,
                                // color: Colors.redAccent,
                                color: (isPressed)
                                    ? Colors.red
                                    : Colors.black12)),

现在激活和停用正在工作，但在选择单个收藏夹图标时，它会显示所有选定的收藏夹图标

ListView.builder(
  itemCount: infoList.length,
  itemBuilder: (BuildContext context, int index) {
    Info info = new Info(
      "${infoList[index].id}",
      "${infoList[index].name}",
      "${infoList[index].image}",
      "${infoList[index].thumb}",
      "${infoList[index].catagory}",
      "${infoList[index].price}",
      "${infoList[index].qty}",
    );
    return new Card(
        margin: EdgeInsets.fromLTRB(5, 0, 5, 5),
        elevation: 5,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0)),
        child: ClipRRect(
            child: ListTile(
                leading: Container(
                    child: Image.network("${infoList[index].image}")),
                title: Text(
                  "${infoList[index].name}",
                  style: TextStyle(
                      fontStyle: FontStyle.normal,
                      fontSize: 14,
                      color: Colors.black),
                ),
                subtitle: Text(
                  "\$ ${infoList[index].price}",
                  style: TextStyle(
                      fontStyle: FontStyle.normal,
                      fontSize: 14,
                      color: Colors.black),
                ),
                trailing: Wrap(
                  spacing: 12,
                  children: [
                    GestureDetector(
                        onTap: () {
                          setState(() => isPressed = !isPressed);
                        },
                        child: Icon(Icons.favorite_sharp,
                            // color: Colors.redAccent,
                            color: (isPressed)
                                ? Colors.red
                                : Colors.black12)),

                    // Icon(
                    //   Icons.add_shopping_cart,
                    //   color: Colors.white,
                    // ),
                  ],
                ),

---

您需要将onTap更改为实际切换：

onTap: () {
  setState(() => isPressed = !isPressed);
},

---

我刚刚在isPressed变量中添加了一个“\u1”，因为将这类变量保持为私有是一种很好的做法

i、 e

isPressed->Public

_isPressed->Private

bool _isPressed = false;
GestureDetector(
    onTap: () {
           setState(() => _isPressed = !_isPressed);
    },
    child: Icon(Icons.favorite_sharp,
                color: _isPressed ? Colors.red : Colors.black12)),

对于每个

小部件

要使其处于选中状态，您必须将其放入一个单独的

有状态小部件

，然后将其传递到

列表视图

完成后，现在每个

小部件

都有自己的

状态

，可以单独选择/取消选择它们

ListView.builder(
  itemCount: infoList.length,
  itemBuilder: (BuildContext context, int index) {
    Info info = new Info(
      "${infoList[index].id}",
      "${infoList[index].name}",
      "${infoList[index].image}",
      "${infoList[index].thumb}",
      "${infoList[index].catagory}",
      "${infoList[index].price}",
      "${infoList[index].qty}",
    );
    return new Card(
        margin: EdgeInsets.fromLTRB(5, 0, 5, 5),
        elevation: 5,
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0)),
        child: ClipRRect(
            child: ListTile(
                leading: Container(
                    child: Image.network("${infoList[index].image}")),
                title: Text(
                  "${infoList[index].name}",
                  style: TextStyle(
                      fontStyle: FontStyle.normal,
                      fontSize: 14,
                      color: Colors.black),
                ),
                subtitle: Text(
                  "\$ ${infoList[index].price}",
                  style: TextStyle(
                      fontStyle: FontStyle.normal,
                      fontSize: 14,
                      color: Colors.black),
                ),
                trailing: Wrap(
                  spacing: 12,
                  children: [
                    GestureDetector(
                        onTap: () {
                          setState(() => isPressed = !isPressed);
                        },
                        child: Icon(Icons.favorite_sharp,
                            // color: Colors.redAccent,
                            color: (isPressed)
                                ? Colors.red
                                : Colors.black12)),

                    // Icon(
                    //   Icons.add_shopping_cart,
                    //   color: Colors.white,
                    // ),
                  ],
                ),

编辑

将

Card小部件

放入另一个

StateFull小部件

例如

class CardWidget extends StatefulWidget {

  final Info info;
  CardWidget(this.info);
  @override
  _CardWidgetState createState() => _CardWidgetState();
}

class _CardWidgetState extends State<CardWidget> {
  
bool _isPressed = false;

  @override
  Widget build(BuildContext context) {
    return Card(
            margin: EdgeInsets.fromLTRB(5, 0, 5, 5),
            elevation: 5,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0)),
            child: ClipRRect(
                child: ListTile(
                    leading: Container(
                        child: Image.network("${widget.info.image}")),
                    title: Text(
                      "${widget.info.name}",
                      style: TextStyle(
                          fontStyle: FontStyle.normal,
                          fontSize: 14,
                          color: Colors.black),
                    ),
                    subtitle: Text(
                      "\$ ${widget.info.price}",
                      style: TextStyle(
                          fontStyle: FontStyle.normal,
                          fontSize: 14,
                          color: Colors.black),
                    ),
                    trailing: Wrap(
                      spacing: 12,
                      children: [
                        GestureDetector(
                            onTap: () {
                              setState(() => _isPressed = !_isPressed);
                            },
                            child: Icon(Icons.favorite_sharp,
                                // color: Colors.redAccent,
                                color: (isPressed)
                                    ? Colors.red
                                    : Colors.black12)),
    
                        // Icon(
                        //   Icons.add_shopping_cart,
                        //   color: Colors.white,
                        // ),
                      ],
                    ),

---

选中此示例：非常感谢，但如果我想在选择单个收藏夹图标时只选择一个收藏夹，它已将所有图标显示为列表视图中选定的收藏夹项目。非常感谢，但在这里我只能选择一个项目，但无法停用它。我编辑了答案，因此现在它支持选择/取消选择，还为每个小部件添加了逻辑，使其具有自己的状态。如果这回答了您的问题，请选择这作为接受的答案。非常感谢，但是我应该把有状态的小部件放在哪里，因为类已经在有状态的小部件下。请查看我编辑的问题