Flutter 提供程序包中的消费者未更新答案

【问题标题】：Consumer from Flutter provider package not updatingFlutter 提供程序包中的消费者未更新
【发布时间】：2020-10-03 02:01:59
【问题描述】：

我有一个产品列表，其中他们是 heart icon button 以将其标记为收藏。使用提供者我可以更新数据，但对于以下情况，它不能直接工作。

Consumer<ProductProvider>(
              builder: (ctx, product, child) => IconButton(
                icon: Icon(
                  widget.product.isFavourite ? Icons.favorite : Icons.favorite_border,
                  color:
                      widget.product.isFavourite ? Colors.orange : iconColor,
                ),
                onPressed: () => setState((){
                  widget.product.isFavourite = !widget.product.isFavourite;
                }) ,
              ),
            ),

上面的代码在我的product card widget中，在Future Builder中使用> List View builder。

如果我单击该list view 中的heard Icon，然后导航到该产品详细信息页面。数据已更新或该产品显示为最喜欢，这是正确的。

现在的问题，来自我的Product Details Page，如果我单击Heart Icon 将该产品标记为收藏或不收藏（如果已经收藏），则该页面上的数据会更新，但不会在@987654330 中更新@来自使用产品卡的上一页的消费者，除非页面被重建或者我滚动加载更多或其他产品的列表视图，从而使数据更新，然后反映该更改。

我的产品型号如下，

class ProductModel with ChangeNotifier {

  ...

  // change product favorite status. 
  void toggleIsFavourite() {
    this.isFavourite = !this.isFavourite;
    notifyListeners();
  } 
}

//产品详情页心形按钮代码

actions: <Widget>[
          Padding(
            padding: const EdgeInsets.only(right: 10.0),
            child: IconButton(
              icon : Icon(
                product.isFavourite ? Icons.favorite : Icons.favorite_border,
                color:
                    product.isFavourite ? red : iconColor,
              ),
              onPressed: () => setState((){
                product.toggleIsFavourite();
              }),
            ),
          ),
        ],

测试用例

1) 我点击产品卡片中的heart icon，而不是产品详细信息页面上的heart icon。

结果：一切正常。

2) 我在产品详细信息页面中单击heart icon，而不是在主页上产品卡片小部件上的heart icon 内。

结果：除非刷新列表视图的数据或重建主页，否则主页上产品卡上的心脏不会更新，即使我使用 Consumer 只是更新产品中 heart icon 的值卡。

【问题讨论】：

您正在调用setState 并手动修改调用toggleIsFavourite 中的值。所以 notifyListeners 永远不会被调用
很抱歉让您感到困惑。上面给出的代码来自产品卡，而不是产品详细信息页面。上面添加的产品详细信息页面代码。 @RémiRousselet
@RémiRousselet 请检查更新

标签： flutter updates consumer flutter-provider

【解决方案1】：

如果您在这些屏幕上方设置了正确的通知程序，请尝试

Consumer<ProductProvider>(
          builder: (ctx, product, child) => IconButton(
            icon: Icon(
              product.isFavourite ? Icons.favorite : Icons.favorite_border,
              color:
                  product.isFavourite ? Colors.orange : iconColor,
            ),
            onPressed: () => 
              product.toggleIsFavourite(),
          ),
        ),

这样，您的图标会根据您的产品提供商通知进行更新。

确保您可以访问ProductModel 的isFavourite 属性。

与产品详细信息相同

actions: <Widget>[
      Consumer<ProductProvider>(
          builder: (ctx, product, child) => Padding(
            padding: const EdgeInsets.only(right: 10.0),
            child: IconButton(
              icon : Icon(
                product.isFavourite ? Icons.favorite : Icons.favorite_border,
                color: product.isFavourite ? red : iconColor,
              ),
            onPressed: () => product.toggleIsFavourite(),
          ),
        ),
      ),
    ],

并且您完全避免更改小部件的状态。

这可能不是 100% 正确，但它对我有用

【讨论】：