使用佔位符淡入圖片
如何使影像淡入檢視。
在使用預設的 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',
),
),
),
);
}
}
