Flutter开源库图片相关

Image基础

图片也是一种二进制文件，图片的原始数据中每个像素在内存中一般占用2-4个字节

type bits memory
ARGB_8888 32 4wh
ARBG_4444 16 2wh
RGB_565 16 2wh
ALPHA_8 8 1wh

Flutter中常见的图片相关API

RawImage

属性

color、colorBlendMode

color指定混合色，colorBlendMode指定混合模式

fit

缩放方式，如果只设置width、height的其中一个，则另一个属性会按照fit的设置来缩放

  • fill：拉伸填充
  • contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形
  • cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁
  • fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁
  • fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁
  • none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分
  • scaleDown：

Image

封装了RawImage，方便使用

1
2
3
4
5
6
7
8
9

Widget image = Image.asset("images/yuan.png");

Widget image = Image.network("http://img.rangaofei.cn/01b18.jpg");

Widget image = Image.file(file);

Widget image = Image.memory(byteList);

属性

  • image：ImageProvider类型，定义了图片数据获取和加载的相关接口

CircleAvatar

圆形图片

1
2
3
4
5
6
7
8

CircleAvatar(
    child: Text("头像"),
    backgroundImage: AssetImage("images/yuan.png"),
    backgroundColor: Colors.red,
    radius: 50.0,
),

DecorationImage

1
2
3
4
Container(
    decoration: BoxDecoration(
        image: DecorationImage(image: AssetImage("images/yuan.png"))),
);

Ink.image

1
Ink.image(image: AssetImage("images/timg.jpeg"));

ImageIcon

1
ImageIcon(AssetImage("images/timg.jpeg"));

FadeInImage

注意

flutter默认提供图片内存的缓存，但没有磁盘缓存，可以使用flutter_cached_network_image来做磁盘缓存

源码分析

相关类：

  • Image：用来显示图片
  • _ImageState：状态类，处理生命周期、调用加载
  • ImageProvider：图片提供者，用于加载图片，例如NetworkImage、ResizeImage
  • ImageStreamCompleter：图片资源的管理类
  • ImageStream：图片资源的句柄，持有图片资源，加载完毕后的回调和图片资源的管理着，ImageStreamCompleter对象就是图片资源的管理类
  • MultiFrameImageStreamCompleter：多帧图片解析器
  • ImageStreamListener：监听图片的加载结果，加载完成后会进行回调，然后刷新页面显示

参考