CircularProgressIndicator在加载Image.network时不显示

Question

目前我成功加载并显示了我在firebase存储中存储的图像列表，如

getimage()async{

_imageProviders_pro = [
Image.network(
'${ await FirebaseStorage.instance.refFromURL('gs://XXXX-XXXXX.XXX.com/XXX.jpg').getDownloadURL()}',
loadingBuilder: (BuildContext context, Widget child,
ImageChunkEvent? loadingProgress) {
if (loadingProgress == null) {
return child;
}
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded /
loadingProgress.expectedTotalBytes!
: null,
),
);
},
).image,
...
]

问题，当图像加载时，我搜索显示一个CircularProgressIndicator，但它不起作用，我有一个空白页面，没有CircularProgressIndicator。

这里是我的imageprovider_pro发送的地方

PageView(
children: <Widget>[

PageView.builder(
physics: _pagingEnabled ? const PageScrollPhysics() : const NeverScrollableScrollPhysics(),
itemCount: widget.imageProviders.length,
controller: _pageController,
itemBuilder: (context, index) {
final image = widget.imageProviders[index];
return EasyImageView(
imageProvider: image,
onScaleChanged: (scale) {
setState(() {
_pagingEnabled = scale <= 1.0;
});
},
);
},

)

---

/// A full-sized view that displays the given image, supporting pinch & zoom
class EasyImageView extends StatefulWidget {
/// The image to display
final ImageProvider imageProvider;
/// Minimum scale factor
final double minScale;
/// Maximum scale factor
final double maxScale;
/// Callback for when the scale has changed, only invoked at the end of
/// an interaction.
final void Function(double)? onScaleChanged;
/// Create a new instance
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),
onInteractionEnd: (scaleEndDetails) {
double scale = _transformationController.value.getMaxScaleOnAxis();
if (widget.onScaleChanged != null) {
widget.onScaleChanged!(scale);
}
},
)
);
}
}

Answer 1

这对我来说是可行的。你的bug是你如何调用你的图像来显示

Image.network(
"https://www.sncf-connect.com/assets/styles/ratio_2_1_max_width_961/public/media/2020-11/seinedanslesyvelines-istock-marcelloland.jpg?h=8d8fd87c&itok=Ew0qF8_i",
loadingBuilder: ((context, child, loadingProgress) {
if (loadingProgress == null) {
return Center(child: child);
}
return Center(
child: CupertinoActivityIndicator(
animating: true,
radius: 20,
));
}),
),