我使用的是我的版本中的NetworkImageWidget,但是当我在loadingBuilder中使用Shimmer而不是圆形进度指示器时,它不起作用!!
有谁能帮我用同样的附加代码纠正这个错误吗?我想找到这个问题的解决方案。
Package https://pub.dev/packages/shimmer
守则:
import 'package:flutter/material.dart';
import 'package:shimmer/shimmer.dart';
class NetworkImageWidget extends StatelessWidget {
final double? width;
final double? height;
final String path;
final BoxFit? fit;
final BlendMode? colorBlendMode;
final Color? imageColor;
final double radius;
final Color? backgroundColor;
final List<BoxShadow>? boxShadow;
final BoxBorder? border;
final EdgeInsetsGeometry? padding;
const NetworkImageWidget({
Key? key,
required this.path,
this.width,
this.height,
this.fit,
this.imageColor,
this.colorBlendMode,
this.radius = 0.0,
this.backgroundColor,
this.boxShadow,
this.border,
this.padding,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
boxShadow: boxShadow,
color: Colors.transparent,
borderRadius: BorderRadius.circular(radius),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(radius),
child: Container(
height: height,
width: width,
padding: padding,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(radius),
color: backgroundColor,
boxShadow: boxShadow,
border: border,
),
child: Image.network(
path,
fit: fit ?? BoxFit.cover,
height: height,
width: width,
colorBlendMode: colorBlendMode ?? BlendMode.darken,
color: imageColor ?? Colors.black26,
loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
if (loadingProgress == null) return child;
return Shimmer.fromColors(
baseColor: Colors.grey[500]!,
highlightColor: Colors.grey[100]!,
child: SizedBox(width: width, height: height),
);
},
errorBuilder: (context, error, stackTrace) {
return const Center(child: Icon(Icons.error_outline));
},
),
),
),
);
}
}
1条答案
按热度按时间wtzytmuj1#
此示例将Shimmer.fromColors构件 Package 在Container中,其宽度和高度与图像的尺寸匹配,以确保在加载过程中微光效果覆盖整个图像。此外,它还将Shimmer.fromColors中的SizedBox Package 到Container中,以确保在加载过程中微光效果覆盖整个图像。
请确保传递给Image.network()小部件的路径变量是指向要显示的图像的有效URL,并且传递的宽度和高度