Flutter 网络图片加载

949 阅读1分钟

FLutter中网络图片加载主要是3种方法,Image,FadeImage,CachedNetworkImage。

Image

image.network(url);

Image(image: Image.network(url));

这两种方法是一样的,最普通的调用

FadeImage

需要用到占位符或者淡入淡出效果的就要用到fadeimage

new FadeInImage.memoryNetwork(
  placeholder: placeholder,
  image: url,
);

place可以是本地资源的图片

CacheNetworkImage

带有缓存功能的image,在pubspe.yaml需要导入第三包

cached_network_image: ^2.0.0

使用方法

CachedNetworkImage(
                    imageUrl: cover,
                    placeholder: (context, url) => CircularProgressIndicator(),
                  )

placeholder:需要传入一个方法参数。

图片剪裁压缩参数说明

使用fit参数。

  • BoxFit.cover相当于android的centerCorp
  • BoxFit.fill 相当于android 的fitXY

主要用到这两个,其他的用到的时候再查询