Image.network加载时CircularProgressIndicator不显示问题求助

你遇到的加载指示器不生效问题，核心原因有两个：

1. loadingBuilder被丢弃：你在Image.network中定义的loadingBuilder是Widget层级的配置，但最终只把Image.network(...).image（即NetworkImage这个ImageProvider对象）传给了EasyImageView，原Image widget的所有配置（包括loadingBuilder）完全没被用到，自然不会显示进度指示器。
2. 异步阻塞导致页面空白：getimage()方法中直接在列表里await获取下载URL，会阻塞整个列表初始化流程，页面会先空白直到所有URL都获取完成，进一步放大了加载无反馈的问题。

步骤1：修复URL获取的异步逻辑 #

先批量获取所有Firebase Storage图片的下载URL，避免在UI初始化时阻塞：

// 批量获取图片下载URL
Future<List<String>> _getImageUrls() async {
  // 替换为你的图片存储路径列表
  final storageRefs = [
    FirebaseStorage.instance.refFromURL('gs://XXXX-XXXXX.XXX.com/XXX.jpg'),
    FirebaseStorage.instance.refFromURL('gs://XXXX-XXXXX.XXX.com/XXX2.jpg'),
    // 更多图片...
  ];
  // 并行获取所有URL
  return Future.wait(storageRefs.map((ref) => ref.getDownloadURL()));
}

在页面初始化时加载URL，并用状态管理异步过程：

List<String> _imageUrls = [];
bool _isLoadingUrls = true;

@override
void initState() {
  super.initState();
  _loadImageUrls();
}

Future<void> _loadImageUrls() async {
  _imageUrls = await _getImageUrls();
  setState(() => _isLoadingUrls = false);
}

步骤2：添加加载状态指示器（二选一） #

方案A：修改EasyImageView内置加载逻辑

直接在EasyImageView内部的Image组件上配置loadingBuilder，让所有使用该组件的地方都自带加载反馈：

class EasyImageView extends StatefulWidget {
  final ImageProvider imageProvider;
  final double minScale;
  final double maxScale;
  final void Function(double)? onScaleChanged;

  const EasyImageView({
    Key? key,
    required this.imageProvider,
    this.minScale = 1.0,
    this.maxScale = 5.0,
    this.onScaleChanged,
  }) : super(key: key);

  @override
  _EasyImageViewState createState() => _EasyImageViewState();
}

class _EasyImageViewState extends State<EasyImageView> {
  final TransformationController _transformationController = TransformationController();

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: InteractiveViewer(
        transformationController: _transformationController,
        minScale: widget.minScale,
        maxScale: widget.maxScale,
        child: Image(
          image: widget.imageProvider,
          // 加载中显示进度指示器
          loadingBuilder: (context, child, loadingProgress) {
            if (loadingProgress == null) return child;
            return Center(
              child: CircularProgressIndicator(
                value: loadingProgress.expectedTotalBytes != null
                    ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
                    : null,
              ),
            );
          },
          // 可选：添加加载失败提示
          errorBuilder: (context, error, stackTrace) => const Center(child: Text('图片加载失败')),
          fit: BoxFit.contain,
        ),
        onInteractionEnd: (scaleEndDetails) {
          double scale = _transformationController.value.getMaxScaleOnAxis();
          widget.onScaleChanged?.call(scale);
        },
      ),
    );
  }
}

方案B：在PageView构建时处理加载状态

如果不想修改EasyImageView，可以直接在itemBuilder中使用带loadingBuilder的Image.network：

@override
Widget build(BuildContext context) {
  if (_isLoadingUrls) {
    return const Center(child: CircularProgressIndicator());
  }
  return PageView(
    children: [
      PageView.builder(
        physics: _pagingEnabled ? const PageScrollPhysics() : const NeverScrollableScrollPhysics(),
        itemCount: _imageUrls.length,
        controller: _pageController,
        itemBuilder: (context, index) {
          return SizedBox(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: InteractiveViewer(
              transformationController: TransformationController(),
              minScale: 1.0,
              maxScale: 5.0,
              child: Image.network(
                _imageUrls[index],
                loadingBuilder: (context, child, loadingProgress) {
                  if (loadingProgress == null) return child;
                  return Center(
                    child: CircularProgressIndicator(
                      value: loadingProgress.expectedTotalBytes != null
                          ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
                          : null,
                    ),
                  );
                },
                fit: BoxFit.contain,
              ),
              onInteractionEnd: (scaleEndDetails) {
                double scale = _transformationController.value.getMaxScaleOnAxis();
                setState(() => _pagingEnabled = scale <= 1.0);
              },
            ),
          );
        },
      )
    ],
  );
}

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