一、Image Widget

1、使用网络图片 Image.network

Image.network 支持 Flutter 加载并渲染网络图片,构造函数如下:

其中 src 是 String 类型,并且是必填的第一个参数,其他的都是命名参数

20785-x5xf927hfbp.png

fit 属性用来指定 图片的适配方式,和 weex 的 image 标签的 resize 属性或者 rax 的 resizeMode 效果一致。

使用 Image.network 加载网络图片:

String IMAGE_SRC = 'https://picsum.photos/id/142/600/400';

Image.network(
        IMAGE_SRC,
        alignment: Alignment.bottomRight,
        color: Colors.blue,
        colorBlendMode: BlendMode.colorBurn,
        fit: BoxFit.cover, // 填充拉伸裁剪
        width: 100.0,
        height: 100.0
        // repeat: ImageRepeat.repeatX, // 重复
      )

上面使用 color: Colors.blue, colorBlendMode: BlendMode.colorBurn, 做了颜色覆盖,最终效果:

79853-owwvz1716dj.png

2、ClipOval 实现圆形图片

通过 ClipOval 可以剪切 Image.network 加载的图片

直接将 Image.network 放在 ClipOval 的 child 属性中即可,需要制定图片的宽度和高度

ClipOval(
      child: Image.network(
        IMAGE_SRC,
        fit: BoxFit.cover,
        width: 100,
        height: 100,
        // color: Colors.black
      ),
    );

效果:

47352-46eyz9pk61x.png

3、利用 Container 实现圆形图片

借助 Container 的 BorderRadius 也一样可以实现一个圆形图片

需要注意的是,使用 Container 实现的圆形图片,不能将 Image 直接放在 Container 的 child 中,而是应该放在 decoration 中

return Container(
      width: 100,
      height: 100,
      decoration: BoxDecoration(
        color: Colors.pink,
        borderRadius: BorderRadius.all(Radius.circular(50)),
        image: DecorationImage(
          image: NetworkImage(IMAGE_SRC),
          fit: BoxFit.cover,
        ),
      ), // 通过 container 实现圆角
    );

上面代码中,通过 borderRadius 指定了 Radius.circular(50) 实现一个圆形的 Container

然后在 image 属性中通过 DecorationImage 塞入了一个 image,不过此时不能使用 Image.network,而是应该直接使用 NetworkImage 将 IMAGE_SRC 传入即可。

效果:

68593-qob70sanzg.png

4、Image.asset 本地图片

Image.asset 可以用来加载本地的图片素材,加载本地图片素材是需要在依赖中声明的

pubspec.yaml 中指定 assets 字段,配置了 2.0x3.0x 的文件

08139-dqdlh2ouqwq.png

  # To add assets to your application, add an assets section, like this:
  assets: 
   - images/demo.png
   - images/2.0x/demo.png
   - images/3.0x/demo.png

声明之后,重新执行 flutter pub get

加载本地代码:

return Container(
      child: Image.asset('images/demo.png', fit: BoxFit.contain),
      width: 100,
      height: 100,
    );

效果:

77414-blq97mwdec.png

二、使用 cached_network_image 图片库

上面 Image.network 记载图片没有任何的缓存,每次都是重新加载时间比较慢,同时没有任何的动画效果

cached_network_image 这个库实现了图片缓存加载和载入效果。

库文档地址:https://pub.dev/packages/cached_network_image

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^0.8.0 

使用 CachedNetworkImage Widget:

    return Container(
      child: CachedNetworkImage(
        width: 100,
        height: 50,
        fit: BoxFit.cover,
        imageUrl: IMAGE_SRC,
        placeholder: (context, url) => CircularProgressIndicator(
            // backgroundColor: Colors.pink,
            ),
        errorWidget: (context, url, error) => Icon(Icons.error),
      ),
    );

CachedNetworkImage Widget 支持传入 imageUrl 图片的地址、placeholder 加载方式(或者家在动画),errorWidget 加载错误的图示

上面的加载动画中我使用了 CircularProgressIndicator Widget 可以看到明显的加载动画和过度效果

GIF.gif

三、使用 FadeInImage 记载图片过渡效果

除了使用上面 CachedNetworkImage 自带过度效果外,还可以使用 FadeInImage Widget 实现过度效果

FadeInImage 本身支持指定本地图片作为 loading 的图标

需要注意的是本地图片需要在 pubspec.yaml 中声明 assets:

  # To add assets to your application, add an assets section, like this:
  assets: 
   - images/demo.png
   - images/2.0x/demo.png
   - images/3.0x/demo.png
   - images/loading.gif

示例代码:

    return FadeInImage.assetNetwork(
      placeholder: 'images/loading.gif',
      image: IMAGE_SRC,
      width: 100,
      height: 50,
    );

结果:

2.gif

四、完整代码

github 代码示例: