Flutter：被FadeInImage完全覆盖的CircularProgressIndicator是否需停止？

1. 如何让CircularProgressIndicator在图片加载完成后隐藏 #

你不需要用Stack硬堆加载提示——FadeInImage本身就支持自动管理加载状态的占位组件。如果要沿用你当前的写法，也可以通过监听图片加载状态来控制进度条的显示：

方法一：用FadeInImage自带的占位能力（推荐） #

直接把CircularProgressIndicator传入placeholderWidget参数，它会自动在图片加载完成后消失：

return MaterialApp(
  title: title,
  home: Scaffold(
    appBar: AppBar(
      title: const Text(title),
    ),
    body: Center(
      child: FadeInImage.memoryNetwork(
        placeholder: kTransparentImage,
        placeholderWidget: const CircularProgressIndicator(),
        image: 'https://picsum.photos/250?image=9',
      ),
    ),
  ),
);

方法二：手动监听图片加载状态 #

如果必须用Stack结构，可以通过ImageProvider的加载回调，结合StatefulWidget控制进度条的显示：

class _ImageWithLoaderState extends State<ImageWithLoader> {
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    // 监听图片加载完成事件
    NetworkImage(widget.imageUrl).resolve(const ImageConfiguration()).addListener(
      ImageStreamListener((info, syncCall) {
        if (mounted) {
          setState(() => _isLoading = false);
        }
      }),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        if (_isLoading) const Center(child: CircularProgressIndicator()),
        Center(
          child: FadeInImage.memoryNetwork(
            placeholder: kTransparentImage,
            image: widget.imageUrl,
          ),
        ),
      ],
    );
  }
}

2. 被覆盖却不隐藏的CircularProgressIndicator是否有性能影响 #

答案是会有明显性能损耗，尤其是大量图片场景：

• CircularProgressIndicator是带持续动画的组件，即使被完全覆盖，它的动画逻辑依然会每秒触发数十次帧刷新，消耗CPU资源。
• 如果屏幕上同时加载几十张图片，每个都绑定一个未隐藏的进度条，会导致大量不必要的动画计算，引发UI卡顿、帧率下降，甚至增加内存占用。

所以无论从性能还是代码规范角度，都应该在图片加载完成后及时隐藏或销毁这类带动画的加载组件。

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