使用占位符淡入图片
如何实现图片淡入显示效果。
当使用默认的 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',
),
),
),
);
}
}
