如何在 Flutter 中修复像素化图像
How to fix pixelated image in Flutter
我想创建一个圆形的图像小部件,但它最终像素化了。
使用 Image.network(url)
,我得到以下信息:
而原来的样子是这样的:
相关代码如下:
class RoundedImage extends StatelessWidget {
final String URL;
final double size;
final bool dynamicallySized;
final double borderRadius;
final bool onlyTopBorderRadius;
const RoundedImage({
@required this.size,
@required this.url,
this.dynamicallySized = false,
this.borderRadius = 8.0,
this.onlyTopBorderRadius = false,
});
@override
Widget build(BuildContext context) {
final newSize = dynamicallySized ? PaddingUtils.getPadding(context, padding: size) : size;
return ClipRRect(
borderRadius:
onlyTopBorderRadius ? BorderRadius.vertical(top: Radius.circular(borderRadius)) : BorderRadius.circular(borderRadius),
child: CachedNetworkImage(
imageUrl: url,
height: newSize,
width: newSize,
fit: BoxFit.cover,
),
);
}
}
尝试将此 属性 添加到 CachedNetworkImage
filterQuality: FilterQuality.high
我想创建一个圆形的图像小部件,但它最终像素化了。
使用 Image.network(url)
,我得到以下信息:
而原来的样子是这样的:
相关代码如下:
class RoundedImage extends StatelessWidget {
final String URL;
final double size;
final bool dynamicallySized;
final double borderRadius;
final bool onlyTopBorderRadius;
const RoundedImage({
@required this.size,
@required this.url,
this.dynamicallySized = false,
this.borderRadius = 8.0,
this.onlyTopBorderRadius = false,
});
@override
Widget build(BuildContext context) {
final newSize = dynamicallySized ? PaddingUtils.getPadding(context, padding: size) : size;
return ClipRRect(
borderRadius:
onlyTopBorderRadius ? BorderRadius.vertical(top: Radius.circular(borderRadius)) : BorderRadius.circular(borderRadius),
child: CachedNetworkImage(
imageUrl: url,
height: newSize,
width: newSize,
fit: BoxFit.cover,
),
);
}
}
尝试将此 属性 添加到 CachedNetworkImage
filterQuality: FilterQuality.high