Future Method无数据：使用FutureBuilder仅显示加载圈问题求助

开发者阿泽

2026-8-11

问题：FutureBuilder持续显示圆形进度指示器，无法渲染数据UI

我编写了一个从MySQL数据库获取数据的Future方法，搭配FutureBuilder组件使用，逻辑为当snapshot无数据时显示圆形进度指示器，否则渲染UI，但目前仅能看到圆形进度条。以下是我的Future方法代码：

Future _getData() async {
  Mysql db = Mysql();
  db.getConnection().then((conn) async {
    debugPrint('User ID: $uid');
    var correctStats =
        await conn.query('select correctCount from users where uid = "$uid"');
    for (var row in correctStats) {
      correctCountStats = row[0];
    }
    var wrongStats =
        await conn.query('select wrongCount from users where uid = "$uid"');
    for (var row in wrongStats) {
      wrongCountStats = row[0];
    }
  });
}

解决方案

问题核心

你的_getData方法存在两个关键问题：

方法没有返回有效Future，导致FutureBuilder无法感知异步操作的完成状态
使用then链式调用而非await，内部异步流程未被正确等待，方法提前结束，FutureBuilder始终认为任务未完成

修复后的代码

Future<void> _getData() async {
  try {
    Mysql db = Mysql();
    // 用await替代then，确保等待连接建立完成
    var conn = await db.getConnection();
    debugPrint('User ID: $uid');
    
    // 合并两次查询为一次，减少数据库交互开销
    var stats = await conn.query('select correctCount, wrongCount from users where uid = "$uid"');
    for (var row in stats) {
      correctCountStats = row[0];
      wrongCountStats = row[1];
    }
    
    // 关闭数据库连接，避免资源泄漏
    await conn.close();
  } catch (e) {
    debugPrint('数据库查询异常: $e');
    // 可在此添加错误处理逻辑，比如设置默认值或提示用户
  }
}