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

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))
                          ),
            ))));
  }