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

Question

我想为每个单独的项目激活和停用最喜欢的图标因为我现在得到的是填充那个图标，但同时，它没有得到已停用。

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,
                    // ),
                  ],
                ),

Answer 1

您需要更改您的 onTap 以实际切换：

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

Answer 2

我刚刚向 isPressed 变量添加了一个“_”，因为最好将此类变量保持为私有。

即

isPressed -> Public

_isPressed -> 私人

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

要使每个 widget 处于选中状态，您必须将其放入单独的 Stateful Widget 中，然后将其传递到 ListView.

完成后，现在每个 widget 都会有自己的 state，并且可以单独选择/取消选择它们。

编辑

将Card Widget变成另一个StateFull widget

例如

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,
                        // ),
                      ],
                    ),

现在使用 CardWidget 填充 ListView。请记住将所有值传递给小部件，如下所示。

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 CardWidget(info);

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

how to activate and deactivate favorite icon in flutter

favorites

flutter