使用佔位符淡入圖片
如何實現圖片淡入顯示效果。
當使用預設的 Image 元件顯示圖片時，你可能會注意到圖片在載入完成後會直接突兀地顯示在螢幕上。這對使用者來說可能視覺體驗不夠平滑。
相比之下，如果能先顯示一個佔位符，等圖片載入完成後再以淡入效果顯示出來，體驗會更好，對吧？使用 FadeInImage 元件即可實現此目的。
FadeInImage 適用於任何型別的圖片：記憶體中的圖片、本地資源圖片或網路圖片。
記憶體中
#在本示例中，請使用 transparent_image 包來實現一個簡單的透明佔位符。
dart
FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://picsum.photos/250?image=9',
),
完整示例
#
dart
import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const title = 'Fade in images';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(title: const Text(title)),
body: Stack(
children: <Widget>[
const Center(child: CircularProgressIndicator()),
Center(
child: FadeInImage.memoryNetwork(
placeholder: kTransparentImage,
image: 'https://picsum.photos/250?image=9',
),
),
],
),
),
);
}
}
來自資源包
#你也可以考慮使用本地資源作為佔位符。首先，將資源新增到專案的 pubspec.yaml 檔案中（有關更多詳細資訊，請參閱 新增資源和圖片）。
yaml
flutter:
assets:
- assets/loading.gif
然後，使用 FadeInImage.assetNetwork() 建構函式。
dart
FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',
image: 'https://picsum.photos/250?image=9',
),
完整示例
#
dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const title = 'Fade in images';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(title: const Text(title)),
body: Center(
child: FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',
image: 'https://picsum.photos/250?image=9',
),
),
),
);
}
}
