FadeInImage 占位图
1. FadeInImage
const FadeInImage({
Key? key,
required this.placeholder,
this.placeholderErrorBuilder,
required this.image,
this.imageErrorBuilder,
this.excludeFromSemantics = false,
this.imageSemanticLabel,
this.fadeOutDuration = const Duration(milliseconds: 300),
this.fadeOutCurve = Curves.easeOut,
this.fadeInDuration = const Duration(milliseconds: 700),
this.fadeInCurve = Curves.easeIn,
this.width,
this.height,
this.fit,
this.placeholderFit,
this.alignment = Alignment.center,
this.repeat = ImageRepeat.noRepeat,
this.matchTextDirection = false,
})
| FadeInImage属性 | 介绍 |
|---|---|
| placeholder | 占位图 |
| placeholderErrorBuilder | 占位图绘制期间出错时回调，返回一个Widget |
| image | 图像 |
| imageErrorBuilder | 图像绘制失败时回调 返回一个Widget |
| excludeFromSemantics | 是否在语义标签中排除此图像 调试时有用 |
| imageSemanticLabel | 图像语义标签 |
| fadeOutCurve | [占位符] 的淡出动画曲线 |
| fadeOutDuration | [占位符] 的淡出动画时间 |
| fadeInCurve | [图像] 的渐入动画曲线 |
| fadeInDuration | [图像] 的渐入动画时间 |
| width | 图像宽度 |
| height | 图像高度 |
| fit | BoxFit 控制图像的拉伸和挤压 |
| placeholderFit | BoxFit 控制占位图的拉伸和挤压 |
| alignment | 对齐方式 |
| repeat | 图片占不满时，在某个方向重复，BoxFit.contain 有效 |
| matchTextDirection | TextDirection的方向是否影响图像的布局起点 |
2. 实例
class MSFadeInImageRoute extends StatelessWidget {
const MSFadeInImageRoute({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final String url =
"https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg";
return Scaffold(
appBar: AppBar(title: Text("MSFadeInImageRoute")),
body: Center(
child: Column(
children: [
FadeInImage(
placeholder: AssetImage("assets/images/4.jpeg"), // 占位图
// 占位图绘制期间出错时回调，返回一个Widget
placeholderErrorBuilder:
(BuildContext context, Object error, StackTrace? stackTrace) {
return Image.asset("assets/images/10.jpeg");
},
// 图像
image: NetworkImage(url),
// 图像绘制失败时回调 返回一个Widget
imageErrorBuilder:
(BuildContext context, Object error, StackTrace? stackTrace) {
return Image.asset("assets/images/10.jpeg");
},
// 是否在语义标签中排除此图像 调试时有用
excludeFromSemantics: false,
// 图像语义标签
imageSemanticLabel: "images4",
// [占位符] 的淡出动画曲线
fadeOutCurve: Curves.easeOut,
// [占位符] 的淡出动画时间
fadeOutDuration: Duration(milliseconds: 200),
// [图像] 的渐入动画曲线
fadeInCurve: Curves.easeIn,
// [图像] 的渐入动画时间
fadeInDuration: Duration(milliseconds: 200),
width: 150, // 宽度
height: 150, // 高度
fit: BoxFit.cover, // BoxFit 控制图像的拉伸和挤压
placeholderFit: BoxFit.contain, // BoxFit 控制占位图的拉伸和挤压
alignment: Alignment.center, // 对齐方式
repeat: ImageRepeat.noRepeat, // 图片占不满时，在某个方向重复，BoxFit.contain 有效
matchTextDirection: false, // TextDirection的方向是否影响图像的布局起点
),
FadeInImage(
placeholder: AssetImage("assets/images/4.jpeg"), // 占位图
// 占位图绘制期间出错时回调，返回一个Widget
placeholderErrorBuilder:
(BuildContext context, Object error, StackTrace? stackTrace) {
return Image.asset("assets/images/10.jpeg");
},
// 图像
image: NetworkImage(""),
// 图像绘制失败时回调 返回一个Widget
imageErrorBuilder:
(BuildContext context, Object error, StackTrace? stackTrace) {
return Image.asset(
"assets/images/10.jpeg",
width: 200,
height: 200,
);
},
// 是否在语义标签中排除此图像 调试时有用
excludeFromSemantics: false,
// 图像语义标签
imageSemanticLabel: "images4",
// [占位符] 的淡出动画曲线
fadeOutCurve: Curves.easeOut,
// [占位符] 的淡出动画时间
fadeOutDuration: Duration(milliseconds: 200),
// [图像] 的渐入动画曲线
fadeInCurve: Curves.easeIn,
// [图像] 的渐入动画时间
fadeInDuration: Duration(milliseconds: 200),
width: 200, // 图像宽度
height: 200, // 图像高度
fit: BoxFit.cover, // BoxFit 控制图像的拉伸和挤压
placeholderFit: BoxFit.fill, // BoxFit 控制占位图的拉伸和挤压
alignment: Alignment.center, // 对齐方式
repeat: ImageRepeat.noRepeat, // 图片占不满时，在某个方向重复，BoxFit.contain 有效
matchTextDirection: false, // TextDirection的方向是否影响图像的布局起点
),
],
),
),
);
}
}
image.png
