调用FutureBuilder后页面未更新问题求助

我用ListView.builder结合FutureBuilder加载购物车商品页面，核心代码结构如下：

Expanded(
  child: RefreshIndicator(
    onRefresh: refresh,
    child: Container(
      child: FutureBuilder(
        future: loadData(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            List<dynamic>? filteredList = snapshot.data as List;
            // ... ListView.builder 渲染逻辑
          }
          // ... 其他状态（加载/错误）处理
        },
      ),
    ),
  ),
)

数据加载依赖loadData()函数：

Future<List<LineaCesta>> loadData() async {
  await fetchLineasCesta(idCesta);
  return fetchLineasCesta(idCesta);
}

商品卡片内的添加商品按钮逻辑：

onPressed: () async {
  // 添加一件商品
  final prefs = await SharedPreferences.getInstance(); 
  idCesta = prefs.getString("cesta_id")!;
  checkExistenciaCestaPoner(idCesta!, lineaCesta.producto, lineaCesta.precio, context); 
  print("添加后刷新"); 
},

后续流程会最终调用loadData()，但页面不会同步更新修改后的内容，必须离开页面重新进入才能看到最新数据。补充fetchLineasCesta接口代码：

Future<List<LineaCesta>> fetchLineasCesta(String cesta) async {
  String url = Constantes().URLProyecto+Constantes().APICarpeta+"get_lineas_cesta.php?cesta="+cesta;
  final response = await http.get(Uri.parse(url));
  return lineaCestaFromJson(response.body);
}

问题根源 #

FutureBuilder的future参数直接传入loadData()时，只会在组件初始化时执行一次该future实例。后续手动调用loadData()不会改变FutureBuilder绑定的future对象，因此无法触发组件重建刷新界面。

解决方案 #

通过StatefulWidget的状态变量管理future实例，需要刷新时重新赋值并调用setState触发界面重建：

1. 在State类中定义状态变量 #

late Future<List<LineaCesta>> _cartFuture;

2. 初始化future实例 #

在initState中完成初始化：

@override
void initState() {
  super.initState();
  _cartFuture = loadData();
}

3. 修改FutureBuilder的绑定参数 #

FutureBuilder(
  future: _cartFuture, // 绑定状态变量而非直接调用loadData()
  builder: (context, snapshot) {
    // ... 原有的builder渲染逻辑
  },
)

4. 增减商品后触发刷新 #

在按钮点击逻辑中，完成商品数量修改后更新future并调用setState：

onPressed: () async {
  final prefs = await SharedPreferences.getInstance(); 
  idCesta = prefs.getString("cesta_id")!;
  // 等待商品添加逻辑执行完成
  await checkExistenciaCestaPoner(idCesta!, lineaCesta.producto, lineaCesta.precio, context); 
  // 重新赋值future并触发界面重建
  setState(() {
    _cartFuture = loadData();
  });
},

5. 优化loadData函数（可选） #

原loadData重复调用了两次fetchLineasCesta，可简化为单次调用：

Future<List<LineaCesta>> loadData() async {
  return fetchLineasCesta(idCesta);
}

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