Flutter中Riverpod点击调用API后UI不刷新问题求助

你当前的问题核心是build函数里固定监听了某个特定参数的Provider实例，点击切换分类时，只是读取了另一个参数的Provider，但UI绑定的还是原来固定参数的那个Provider，所以数据更新后UI不会同步刷新。

具体修改步骤 #

1. 让监听的Provider参数随选中分类动态变化

在build函数里，把固定的分类索引改成用selectedCategory状态动态获取，这样选中分类变化时，Riverpod会自动监听新的Provider实例：

@override
Widget build(BuildContext context) {
  // 用selectedCategory动态获取当前选中的分类名，替换固定索引
  var selectedCategoryName = Utils.categoriesNames[selectedCategory].toLowerCase();
  var data = ref.watch(getAllProductsProvider(selectedCategoryName));
  // ... 其余代码保持不变
}

2. 简化点击事件的逻辑

点击分类卡片时，只需要更新selectedCategory的状态即可，不需要额外调用ref.read——build里的ref.watch会自动感知selectedCategory的变化，切换到对应的Provider实例并重新发起请求：

onTap: (){
  Fluttertoast.showToast(msg: Utils.categoriesNames[index].toLowerCase());
  setState(() {
    selectedCategory = index;
  });
  // 删除这行无用的ref.read代码
  // ref.read(getAllProductsProvider(Utils.categoriesNames[index].toLowerCase()));
},

为什么之前的方法无效？ #

• ref.read仅获取Provider的当前值，不会建立监听关系，无法触发UI刷新；
• ref.invalidate如果针对的是原来固定参数的Provider，和要切换的新参数Provider无关，自然无法更新UI；
• 只有让ref.watch的Provider参数随状态动态变化，才能让Riverpod在状态改变时，自动订阅新的Provider实例并更新UI。

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