Flutter中文件加载完成后CircularProgressIndicator无法停止的问题

问题根源 #

你当前的写法完全错误——在onTap回调里直接创建CircularProgressIndicator组件，并不会把它添加到Widget树中，这段代码根本没起到显示指示器的作用。而且就算显示了，你也没有通过状态变量控制它的显示/隐藏逻辑，自然不会在加载完成后停止。

正确实现方式 #

你需要通过状态管理控制加载状态，比如使用StatefulWidget，用布尔变量标记加载状态，根据状态在UI中渲染指示器或正常按钮内容。

示例代码：

class PdfOpenButton extends StatefulWidget {
  final dynamic file; // 根据你的实际数据类型调整
  final dynamic player; // 根据你的播放器类型调整

  const PdfOpenButton({super.key, required this.file, required this.player});

  @override
  State<PdfOpenButton> createState() => _PdfOpenButtonState();
}

class _PdfOpenButtonState extends State<PdfOpenButton> {
  bool _isLoading = false;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () async {
        if (_isLoading) return; // 防止重复点击触发加载
        setState(() => _isLoading = true); // 标记加载中，显示指示器

        widget.player.stop();

        try {
          final files = await loadPdfFromNetwork(widget.file.url);
          openPdf(context, files, widget.file.url, widget.file.name.split('.').first);
        } catch (e) {
          // 可在此添加加载失败的提示逻辑，比如弹出错误Toast
        } finally {
          setState(() => _isLoading = false); // 加载完成，关闭指示器
        }
      },
      child: _isLoading 
          ? const Center(child: CircularProgressIndicator()) 
          : const Text('打开文件'), // 这里替换成你原本的按钮内容
    );
  }
}

核心要点 #

• 用_isLoading布尔变量跟踪加载状态，通过setState()触发UI更新
• 加载操作包裹在try/catch/finally中，确保无论成功或失败，都会关闭指示器
• 增加重复点击拦截，避免多次触发加载流程

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