Flutter使用GetX Obx展示下载进度报visitChildElements错误如何解决

根因说明 #

该报错是因为你在Widget构建流程未完成时，同步修改了GetX响应式变量，触发Obx重建，此时Flutter还在遍历更新子组件树，导致调用visitChildElements出现冲突。

修复方法 #

方法1：使用addPostFrameCallback延迟状态更新（你提到的方案实现） #

将所有会触发UI重建的响应式变量修改操作，包裹在帧绘制完成回调中，修改你的下载函数代码即可：

import 'package:flutter/widgets.dart'; // 确保导入WidgetsBinding相关依赖

final ApiServiceController uController = Get.put(ApiServiceController());

downloading(String fileUrl, String fileName) async {
    Dio dio = Dio();
    fToast("Downloading... $fileName", pop);

    try {
      var dir = await downloadDirectory();
      // 启动下载的状态修改放到帧绘制完成后执行
      WidgetsBinding.instance.addPostFrameCallback((_) {
        uController.isDwd.value = true;
      });

      await dio.download(fileUrl, "${dir.path}/$fileName",
          onReceiveProgress: (rec, total) {
        print("Rec: $rec , Total: $total");
        // 进度更新也套一层回调，避免高频更新触发构建冲突
        WidgetsBinding.instance.addPostFrameCallback((_) {
          uController.dwdP.value = ((rec / total) * 100).toStringAsFixed(0) + "%";
        });
      });
      fToast("Downloaded", pop);
    } catch (e) {
      print(e);
    }
    // 下载完成的状态修改同样套回调
    WidgetsBinding.instance.addPostFrameCallback((_) {
      uController.isDwd.value = false;
    });

    print("Download completed");
}

方法2：优化Obx构建逻辑降低冲突概率 #

将Obx内部的空SizedBox替换为Offstage，避免状态切换时频繁插入/移除组件：

Stack(children: [
  ///.. 原有Container组件
  Obx(() {
    return Offstage(
      offstage: !uController.isDwd.value,
      child: loading(context, uController.dwdP.value),
    );
  })
])

Offstage仅控制组件是否显示，不会销毁重建组件，可大幅减少构建冲突的出现。

注意事项 #

• 如果你的下载逻辑是在initState中触发，必须包裹addPostFrameCallback，此时组件尚未完成挂载，直接修改响应式变量必然触发该报错
• 若修改后仍有报错，检查loading方法内部是否存在直接修改状态的逻辑，对应也包裹回调即可

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