如何修复 Flutter 中的像素化图像

问题描述 投票:0回答:2

我想创建一个圆形图像小部件,但它最终会像素化。

使用

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,
      ),
    );
  }
}
image flutter dart networkimageview
2个回答
5
投票

尝试将此属性添加到 CachedNetworkImage

filterQuality: FilterQuality.high

0
投票

在尝试使用 Canvas Kit 的标准 Web 选项后,我发现图像已像素化,请从命令行键入以下内容以使用 html 渲染器:

flutter run -d chrome --web-renderer html
.

参见这里 Flutter Web 渲染器

© www.soinside.com 2019 - 2024. All rights reserved.