如何在颤动中更改点击它的图标

Question

我试图在点击它时更改图标，但它不起作用。 我正在尝试在其上实施愿望清单方案。

我的代码首先是显示favorite_outline ，当我点击它时productsList[index].isFav的值变为true但不显示favorite图标。

这是我的代码。

Widget build(BuildContext context) {
    List<ProductsList> productsList = ProductsList.getProducts();
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(),
            body: Container(
              child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemCount: productsList.length,
                  itemBuilder: (BuildContext context, int index) =>
                  Container(child: 
                      productsList[index].isFav
                          ? IconButton(
                              onPressed: () {
                                setState(() {
                                  productsList[index].isFav = false;
                                });
                              },
                              icon: Icon(Icons.favorite))
                          : IconButton(
                              onPressed: () {
                                setState(() {
                                  productsList[index].isFav = true;
                                });
                                print(productsList[index].isFav);
                              },
                              icon: Icon(Icons.favorite_outline))),
            ))));
  }

这是 ProductList 类

class ProductsList {
  int id;
  String productName;
  bool isFav;

  ProductsList(
      {required this.id,
      required this.productName,
    ,required this.isFav});

  static List<ProductsList> getProducts() {
    return <ProductsList>[
      ProductsList(
        id: 1,
        productName: "Samsung Microwave",
        isFav: false
      ),
      ProductsList(
        id: 2,
        productName: "Dji Drones",
        isFav: false
      ),
    ];
  }
}

请帮助如何解决这个问题。

Answer 1

当您调用setState时，您的build小部件会重建并

List<ProductsList> productsList = ProductsList.getProducts();

再次调用您的product列表，再次设置为默认值：

ProductsList(id: 1, productName: "Samsung Microwave", isFav: false),
ProductsList(id: 2, productName: "Dji Drones", isFav: false),

您应该使用ChangeNotifier和notifyListeners()

Answer 2

尝试这个：-

Widget build(BuildContext context) {
    List<ProductsList> productsList = ProductsList.getProducts();
    return SafeArea(
        child: Scaffold(
            appBar: AppBar(),
            body: Container(
              child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemCount: productsList.length,
                  itemBuilder: (BuildContext context, int index) =>
                  Container(child: 
                      productsList[index].isFav
                          ? IconButton(
                              onPressed: () {
                            if(productsList[index].isFav){
                               setState(() {
                                  productsList[index].isFav = false;
                                });
                                }else{
                                setState(() {
                                  productsList[index].isFav = true;
                                });
                              }},
                              icon:productsList[index].isFav? Icon(Icons.favorite):Icon(Icons.favorite_outline))
                          ),
            ))));
  }