Flutter中MySQL数据首次加载无法在界面显示问题求助

你的问题核心是异步查询完成后没有触发UI重建，导致首次加载时UI无法获取最新的correctCountStats值，切换页面后页面重建才会读取到更新后的变量。下面是具体的修复方案：

方案一：正确使用setState()触发UI更新 #

你当前的代码只是给correctCountStats赋值，但没有通知Flutter框架状态已变化，所以UI不会自动刷新。需要在赋值后调用setState()，同时注意异步操作的异常处理和资源释放：

// 在State类中执行查询逻辑
void fetchCorrectCount() async {
  Mysql db = Mysql();
  try {
    var conn = await db.getConnection();
    String sql = 'select correctCount from users where uid = "$uid"';
    var results = await conn.query(sql);
    
    for (var row in results) {
      // 赋值后调用setState通知UI更新
      setState(() {
        correctCountStats = row[0].toString(); // 确保是字符串，避免Text组件报错
      });
      debugPrint(correctCountStats);
    }
    await conn.close(); // 必须关闭连接，避免资源泄漏
  } catch (e) {
    debugPrint('查询失败: $e');
    // 异常时设置默认值并更新UI
    setState(() {
      correctCountStats = '0';
    });
  }
}

// 在页面初始化时触发查询
@override
void initState() {
  super.initState();
  fetchCorrectCount();
}

方案二：正确使用FutureBuilder（推荐） #

如果之前用FutureBuilder没效果，大概率是每次build都重新创建了Future实例，或者没有正确处理Future的状态。正确的做法是把Future存为State的成员变量，避免重复执行：

// 在State类中定义Future成员变量
late Future<String> _correctCountFuture;

// 封装查询逻辑为Future
Future<String> fetchCorrectCount() async {
  Mysql db = Mysql();
  try {
    var conn = await db.getConnection();
    String sql = 'select correctCount from users where uid = "$uid"';
    var results = await conn.query(sql);
    await conn.close();
    
    return results.isNotEmpty ? results.first[0].toString() : '0';
  } catch (e) {
    debugPrint('查询失败: $e');
    return '0';
  }
}

// 在初始化时创建Future（只执行一次）
@override
void initState() {
  super.initState();
  _correctCountFuture = fetchCorrectCount();
}

// UI部分用FutureBuilder包裹
Container(
  decoration: BoxDecoration(
    color: primaryColor, borderRadius: BorderRadius.circular(10)
  ),
  width: context.dynamicWidth(6),
  height: context.dynamicHeight(30),
  child: Center(
    child: FutureBuilder<String>(
      future: _correctCountFuture,
      builder: (context, snapshot) {
        // 处理不同状态
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Text('加载中...', style: Theme.of(context).textTheme.headline6?.copyWith(color: whiteColor, fontWeight: FontWeight.w900));
        } else if (snapshot.hasError) {
          return Text('0', style: Theme.of(context).textTheme.headline6?.copyWith(color: whiteColor, fontWeight: FontWeight.w900));
        } else {
          return Text(
            snapshot.data ?? '0',
            style: Theme.of(context).textTheme.headline6?.copyWith(color: whiteColor, fontWeight: FontWeight.w900),
          );
        }
      },
    ),
  ),
)

关键注意事项 #

• 确保correctCountStats（或Future返回值）是字符串类型，Text组件仅支持字符串输入。
• 数据库连接使用后必须关闭，避免长期占用资源导致异常。
• 使用FutureBuilder时，不要在builder方法内直接创建Future（比如future: fetchCorrectCount()），否则每次UI重建都会重复执行查询，引发不必要的请求或无限刷新。

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