我正在使用FadeInImage
小部件在我的应用程序中显示网络图像。因为要使用FadeInImage的占位符属性,所以不能使用NetworkImage
或Image.Network
小部件。
现在我想使FadeInImage
呈圆形,所以我尝试使用以下选项。
FadeInImage
包裹在Container
内使其循环,但是DecorationImage
属性不允许FadeInImage
CircleAvatar
,但是CircleAvatar
的backgroundImage属性不允许FadeInImage
cached_network_image
的flutter库,但遇到了同样的问题ClipRRect
使它呈圆形,但仍然不起作用以下是我的代码
Container(
width: 50.0,
height: 50.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(25.0),
child: FadeInImage(
placeholder: AssetImage("images/alex.jpg"),
image: NetworkImage(
"https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/gettyimages-862145286_copy_-_h_2018.jpg")),
),
);
答案 0 :(得分:2)
设置FadeInImage的width和height属性,它应该可以工作。
ClipRRect(
borderRadius: BorderRadius.circular(25.0),
child: CachedNetworkImage(
fit: BoxFit.cover,
width: 50,
height: 50,
placeholder: AssetImage("images/alex.jpg"),
imageUrl:
"https://cdn1.thr.com/sites/default/files/imagecache/scale_crop_768_433/2018/02/gettyimages-862145286_copy_-_h_2018.jpg"),
)
答案 1 :(得分:1)
我为此创建了一个自定义小部件:
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
class CircleCachedNetworkAvatar extends StatelessWidget {
final String url;
final double size;
CircleCachedNetworkAvatar({@required this.url, this.size = 50.0});
@override
Widget build(BuildContext context) {
return Container(
height: size,
width: size,
child: url != null
? ClipOval(
child: CachedNetworkImage(
fadeInDuration: const Duration(seconds: 0),
fadeOutDuration: const Duration(seconds: 0),
imageUrl: url,
placeholder: Container(
color: Colors.greenAccent, child: Icon(Icons.person)),
fit: BoxFit.cover,
),
)
: CircleAvatar(
backgroundColor: Colors.greenAccent,
child: Icon(Icons.person)));
}
}
您如何看待这段代码?
答案 2 :(得分:1)
用椭圆形包裹FadeInImage小部件,然后用长宽比包裹clipoval小部件
AspectRatio( aspectRatio: 1/1, child: ClipOval( child: FadeInImage.assetNetwork( fit: BoxFit.cover, placeholder: "Your-placeholder-path", image: "Your-Image-Url"), ), );`
答案 3 :(得分:0)
ClipRRect(
borderRadius: BorderRadius.circular(25.0),
child: CachedNetworkImage(
fit: BoxFit.fill,
width: 50,
height: 50,
placeholder: AssetImage("images/alex.jpg"),
imageUrl: "<IMAGE URL>"),
);
这对我有用,看看。