使用占位符淡入图片
如何使图像淡入视图。
在使用默认的 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',
),
),
),
);
}
}
