Question

我有一个产品列表，其中它们是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中使用。

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

现在是问题，如果我单击Product Details Page，从我的Heart Icon将该产品标记为收藏或不收藏（如果已经收藏），则该页面上的数据会更新，但不会更新在上一页使用了产品卡的“ List View Builder”中，除非重新构建该页面，或者我滚动了列表视图，其中加载了更多或其他产品，这些产品会更新数据，然后反映该更改。

我的产品型号如下，

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来更新{{1 }}。

Answer 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(),
          ),
        ),

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

确保您可以访问isFavourite的{{1}}属性。

与产品详细信息相同

ProductModel

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

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

Flutter提供者程序包中的使用者未更新

测试用例

1 个答案: