监听嵌套提供者的变化

Question

我有 2 个类带有更改通知程序，声明每个产品的 Product 和包含产品列表和一些方法的 ProductProvider。我使用此代码创建了产品的 GridView。

class GridList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final productsData = Provider.of<ProductsProvider>(context);
    final products = productsData.items;
    return GridView.builder(
        padding: const EdgeInsets.all(10.0),
        itemCount: products.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 1,
            crossAxisSpacing: 10.0,
            mainAxisSpacing: 10.0),
        itemBuilder: (ctx, i) {
          return ChangeNotifierProvider(
            create: (c) => products[i],
            child: ProductItem(),
          );
        });
  }
}

在 ProductItem() 中，我有一些小部件，但最重要的是，我有一个将产品添加到收藏夹的图标按钮和一个推送到产品详细信息屏幕的按钮。


  void toggleFavoriteStatus() {
    isFavorite = !isFavorite;
    notifyListeners();
}

IconButton(
            icon: Icon(
                product.isFavorite ? Icons.favorite : Icons.favorite_border),
            color: Theme.of(context).accentColor,
            onPressed: () {
              product.toggleFavoriteStatus();
            },
          ), 

 onTap: () {
            Navigator.pushNamed(context, ProductDetailsScreen.routeName, arguments: product.id);
          },

图标在 productItem() 上变化得很好，我想在 ProductDetailsScreen 中有相同的行为，我该怎么做？

Answer 1

我想 ProductDetailsScreen 是一个显示所点击产品的全部信息的页面，在这种情况下，我建议将 Product Provided 作为参数传递，然后在 [=] 中使用 ChangeNotifierProvider.value() 12=]

Navigator.pushNamed(
  context, 
  ProductDetailsScreen.routeName,
  arguments: Provider.of<Products>(context, listen: false) //I used Products but I don't know the name of your class you used to create the ChangeNotifierProvider
);

然后在 ProductDetailsScreen 中将值传递给开始时的 ChangeNotifierProvider.value() 并开始与消费者一起使用它

ProductDetailsScreen extends StatelessWidget{
  final myChangeNotifier;

  ProductDetailsScreen(this.myChangeNotifier);

  @override
  Widget build(BuildContext context){
    return ChangeNotifierProvider<Product>.value(
      value: myChangeNotifier,
      child: Consumer<Product>(
        build: (context, product, _) => ... //paste the code you uses in ProductDetailsScreen here
      )
    );
  }
}

现在，当您更新产品的价值时，它会在两个页面中更新，所以当您 return 时，您也会看到变化

监听嵌套提供者的变化

listening to changes in nested providers

provider

mobile-development

flutter