如何用单个Widget适配多个Provider？电商场景实现问询

首先咱们梳理下你的场景：你有多个同类型但逻辑不同的商品Provider，想复用一个Widget展示不同的商品列表，但现在出现了重复数据的问题。我来帮你一步步解决这个问题。

第一步：统一Provider接口，摆脱dynamic类型 #

你当前用dynamic接收Provider，不仅类型不安全，还容易导致逻辑混乱。首先定义一个抽象类，让所有商品Provider都实现这个接口：

// 定义抽象的商品Provider接口
abstract class ProductProvider extends ChangeNotifier {
  List<Product> get products;
  Future<void> fetchProducts(); // 统一的加载数据方法
}

// 让各个Provider实现这个接口
class LatestProductProvider implements ProductProvider {
  List<Product> _products = [];
  
  @override
  List<Product> get products => _products;

  @override
  Future<void> fetchProducts() async {
    // 这里写获取最新商品的逻辑，确保和其他Provider的请求不同
    _products = await YourApiService.getLatestProducts();
    notifyListeners();
  }
}

class DiscountProductProvider implements ProductProvider {
  List<Product> _products = [];
  
  @override
  List<Product> get products => _products;

  @override
  Future<void> fetchProducts() async {
    // 获取折扣商品的逻辑
    _products = await YourApiService.getDiscountProducts();
    notifyListeners();
  }
}

class MostViewedProductProvider implements ProductProvider {
  List<Product> _products = [];
  
  @override
  List<Product> get products => _products;

  @override
  Future<void> fetchProducts() async {
    // 获取最多浏览商品的逻辑
    _products = await YourApiService.getMostViewedProducts();
    notifyListeners();
  }
}

第二步：优化Widget的Provider获取逻辑 #

把之前的多个if改成更清晰的switch，同时用抽象类替代dynamic，提升代码可读性和安全性：

class _ProductsWidget extends StatelessWidget {
  const _ProductsWidget({
    Key? key,
    required this.filter,
  }) : super(key: key);

  final String filter;

  // 根据filter获取对应的Provider
  ProductProvider _getProvider(BuildContext context) {
    switch (filter) {
      case '0':
        return Provider.of<LatestProductProvider>(context);
      case '1':
        return Provider.of<DiscountProductProvider>(context);
      case '2':
        return Provider.of<MostViewedProductProvider>(context);
      default:
        throw ArgumentError('无效的filter值: $filter');
    }
  }

  @override
  Widget build(BuildContext context) {
    final productProvider = _getProvider(context);

    return SliverToBoxAdapter(
      child: productProvider.products.isEmpty
          ? const Center(child: CircularProgressIndicator())
          : GridView.builder(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 0.7,
              ),
              itemCount: productProvider.products.length,
              itemBuilder: (context, index) {
                final product = productProvider.products[index];
                // 这里替换成你的商品Item Widget
                return ProductItem(product: product);
              },
            ),
    );
  }
}

第三步：解决重复数据的核心问题 #

出现重复数据大概率是以下几个原因，逐一排查：

• Provider数据源未隔离：确保每个Provider都有自己独立的_products列表，不要共享同一个List实例。比如每个Provider内部都重新初始化_products = []，而不是引用外部的List。
• API请求逻辑重复：检查三个Provider的fetchProducts方法，确保调用的是不同的API接口，或者传递了不同的筛选/排序参数。比如Latest请求/products/latest，Discount请求/products/discount，不要都调用同一个接口。
• Provider初始化错误：在父Widget中初始化Provider时，要确保每个Provider都是新实例，不要复用同一个：

  MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (ctx) => LatestProductProvider()..fetchProducts()),
      ChangeNotifierProvider(create: (ctx) => DiscountProductProvider()..fetchProducts()),
      ChangeNotifierProvider(create: (ctx) => MostViewedProductProvider()..fetchProducts()),
    ],
    child: YourApp(),
  )
  

  这里用create每次创建新实例，而不是用value传递同一个对象。

（可选）更优雅的方案：摆脱filter字符串 #

如果想彻底避免硬编码的filter字符串，可以直接传递获取Provider的函数，这样类型更安全：

class _ProductsWidget extends StatelessWidget {
  const _ProductsWidget({
    Key? key,
    required this.getProvider,
  }) : super(key: key);

  final ProductProvider Function(BuildContext) getProvider;

  @override
  Widget build(BuildContext context) {
    final productProvider = getProvider(context);
    // 后续逻辑和上面一致
  }
}

// 使用时直接传递对应的Provider获取方法
_ProductsWidget(
  getProvider: (ctx) => Provider.of<LatestProductProvider>(ctx),
),
_ProductsWidget(
  getProvider: (ctx) => Provider.of<DiscountProductProvider>(ctx),
),

这样就完全不用依赖filter字符串，减少出错概率。

内容的提问来源于stack exchange，提问作者yada