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 | 占位圖繪制期間出錯(cuò)時(shí)回調(diào)器紧，返回一個(gè)Widget |
| image | 圖像 |
| imageErrorBuilder | 圖像繪制失敗時(shí)回調(diào) 返回一個(gè)Widget |
| excludeFromSemantics | 是否在語義標(biāo)簽中排除此圖像 調(diào)試時(shí)有用 |
| imageSemanticLabel | 圖像語義標(biāo)簽 |
| fadeOutCurve | [占位符] 的淡出動(dòng)畫曲線 |
| fadeOutDuration | [占位符] 的淡出動(dòng)畫時(shí)間 |
| fadeInCurve | [圖像] 的漸入動(dòng)畫曲線 |
| fadeInDuration | [圖像] 的漸入動(dòng)畫時(shí)間 |
| width | 圖像寬度 |
| height | 圖像高度 |
| fit | BoxFit 控制圖像的拉伸和擠壓 |
| placeholderFit | BoxFit 控制占位圖的拉伸和擠壓 |
| alignment | 對(duì)齊方式 |
| repeat | 圖片占不滿時(shí)竞帽，在某個(gè)方向重復(fù)红符，BoxFit.contain 有效 |
| matchTextDirection | TextDirection的方向是否影響圖像的布局起點(diǎn) |
2. 實(shí)例
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"), // 占位圖
// 占位圖繪制期間出錯(cuò)時(shí)回調(diào)，返回一個(gè)Widget
placeholderErrorBuilder:
(BuildContext context, Object error, StackTrace? stackTrace) {
return Image.asset("assets/images/10.jpeg");
},
// 圖像
image: NetworkImage(url),
// 圖像繪制失敗時(shí)回調(diào) 返回一個(gè)Widget
imageErrorBuilder:
(BuildContext context, Object error, StackTrace? stackTrace) {
return Image.asset("assets/images/10.jpeg");
},
// 是否在語義標(biāo)簽中排除此圖像 調(diào)試時(shí)有用
excludeFromSemantics: false,
// 圖像語義標(biāo)簽
imageSemanticLabel: "images4",
// [占位符] 的淡出動(dòng)畫曲線
fadeOutCurve: Curves.easeOut,
// [占位符] 的淡出動(dòng)畫時(shí)間
fadeOutDuration: Duration(milliseconds: 200),
// [圖像] 的漸入動(dòng)畫曲線
fadeInCurve: Curves.easeIn,
// [圖像] 的漸入動(dòng)畫時(shí)間
fadeInDuration: Duration(milliseconds: 200),
width: 150, // 寬度
height: 150, // 高度
fit: BoxFit.cover, // BoxFit 控制圖像的拉伸和擠壓
placeholderFit: BoxFit.contain, // BoxFit 控制占位圖的拉伸和擠壓
alignment: Alignment.center, // 對(duì)齊方式
repeat: ImageRepeat.noRepeat, // 圖片占不滿時(shí)摘昌，在某個(gè)方向重復(fù)，BoxFit.contain 有效
matchTextDirection: false, // TextDirection的方向是否影響圖像的布局起點(diǎn)
),
FadeInImage(
placeholder: AssetImage("assets/images/4.jpeg"), // 占位圖
// 占位圖繪制期間出錯(cuò)時(shí)回調(diào)试躏，返回一個(gè)Widget
placeholderErrorBuilder:
(BuildContext context, Object error, StackTrace? stackTrace) {
return Image.asset("assets/images/10.jpeg");
},
// 圖像
image: NetworkImage(""),
// 圖像繪制失敗時(shí)回調(diào) 返回一個(gè)Widget
imageErrorBuilder:
(BuildContext context, Object error, StackTrace? stackTrace) {
return Image.asset(
"assets/images/10.jpeg",
width: 200,
height: 200,
);
},
// 是否在語義標(biāo)簽中排除此圖像 調(diào)試時(shí)有用
excludeFromSemantics: false,
// 圖像語義標(biāo)簽
imageSemanticLabel: "images4",
// [占位符] 的淡出動(dòng)畫曲線
fadeOutCurve: Curves.easeOut,
// [占位符] 的淡出動(dòng)畫時(shí)間
fadeOutDuration: Duration(milliseconds: 200),
// [圖像] 的漸入動(dòng)畫曲線
fadeInCurve: Curves.easeIn,
// [圖像] 的漸入動(dòng)畫時(shí)間
fadeInDuration: Duration(milliseconds: 200),
width: 200, // 圖像寬度
height: 200, // 圖像高度
fit: BoxFit.cover, // BoxFit 控制圖像的拉伸和擠壓
placeholderFit: BoxFit.fill, // BoxFit 控制占位圖的拉伸和擠壓
alignment: Alignment.center, // 對(duì)齊方式
repeat: ImageRepeat.noRepeat, // 圖片占不滿時(shí)端姚，在某個(gè)方向重復(fù)溜族，BoxFit.contain 有效
matchTextDirection: false, // TextDirection的方向是否影響圖像的布局起點(diǎn)
),
],
),
),
);
}
}
image.png
