简介
placeHodler image到目标图片的一种过渡widget
- 使用FadeInImage可以类似网络加载的图片以一个更加优雅的形式出现在屏幕上
- 如果这个图片已经被加载了,或者已经存在内存中,那么placeholder图片将不会显示
基本用法
FadeInImage的写法跟Image类似,有很多别的命名构造函数。
- fadeOutDuration和fadeOutCurve控制placeholder的淡出动画
- fadeInDuration和fadeInCurve控制目标图像的淡入动画
- 对于placeholder,更倾向于使用已经缓存的,以防止他也会突然的出现在屏幕上
实例演示
import 'package:flutter/material.dart';
class FadeInImageDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
ClipOval(
child: FadeInImage.assetNetwork(
placeholder: "assets/images/normal_user_icon.png", //预览图
fit: BoxFit.fitWidth,
image:
"https://img.alicdn.com/tfs/TB148sWfMHqK1RjSZFgXXa7JXXa-536-482.png",
width: 160.0,
height: 160.0,
),
),
SizedBox(
height: 20.0,
),
CircleAvatar(
backgroundImage: NetworkImage(
"https://img.alicdn.com/tfs/TB148sWfMHqK1RjSZFgXXa7JXXa-536-482.png"),
child: Text("一凨"), //可以在图片上添加文字等等
),
],
);
}
}