【备战春招】第9天 Flutter 中的图片控件Image

课程名称：Flutter从入门到进阶 实战携程网App 一网打尽核心技术
课程章节：Flutter入门：Flutter必备基础【修炼基本功】
课程讲师：CrazyCodeBoy

课程内容

Image 是Flutter中一个用来展示图片的widget，相当于 Android 中的 ImageView。Image 组件支持JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, 和 WBMP格式的文件类型。Image 根据图片来源不同，提供了不同的构造函数：

• Image，从ImageProvider获取图像；
• Image.asset，使用key从AssetBundle获得的图像；
• Image.network，从网络URL中获取图片；
• Image.file，从本地文件中获取图片；
• Image.memory，用于从Uint8List获取图像；

在加载项目中的图片资源时，为了让Image能够根据像素密度自动适配不同分辨率的图片，请使用AssetImage指定图像，并确保在widget树中的“Image” widget上方存在MaterialApp，WidgetsApp或MediaQuery窗口widget。

1.如何加载网络图片？

要加载网络图片，需要使用Image.network构造方法：

Image.network(
             'https://img1.sycdn.imooc.com/5ddb4d8b0001f7c803000300-140-140.jpg',
              width: 100,
             height: 100,)

2.如何加载静态图片，以及处理不同分辨率的图片？

要加载项目中的静态图片，需要完成以下两个步骤：

• 在 pubspec.yaml 文件中声明图片资源的路径；
• 使用AssetImage访问图片；

pubspec.yaml声明图片路径：

assets:
 - images/my_icon.png

使用AssetImage访问图片：

Image(
  height: 26,
  width: 26,
  image: AssetImage(my_icon.png),
),

除了使用Image的构造方法手动指定AssetImage之外，还可通过Image.asset来加载静态图片，两者是等效的：

Image.asset(my_icon.png,
	width: 26,
	height: 26,
)

3.如何加载本地图片？

加载完整路径的本地图片

Image.file(File('/sdcard/Download/Stack.png'))

加载相对路径的本地图片，需要用到path_provider插件。

//Image.file(File('/sdcard/Download/Stack.png')),
FutureBuilder(future: _getLocalFile("Download/Stack.png"),
  builder:  (BuildContext context, AsyncSnapshot<File> snapshot) {
    return snapshot.data != null ? Image.file(snapshot.data) : Container();
  })
)
//获取SDCard的路径：
 Future<File> _getLocalFile(String filename) async {
    String dir = (await getExternalStorageDirectory()).path;
    File f = new File('$dir/$filename');
    return f;
  }

4.如何设置placeholder?

为了设置Placeholder，需要借助FadeInImage，它能够从内存，本地资源中加载placeholder。
从内存中加载placeholder，需要用到transparent_image插件。

FadeInImage.memoryNetwork(
        placeholder: kTransparentImage,
        image: 'https://img1.sycdn.imooc.com/5ddb4d8b0001f7c803000300-140-140.jpg',
)

从本地资源中加载placeholder，需要先在 pubspec.yaml 中配置本地资源图片，

 flutter:
   assets:
    - assets/loading.gif

然后加载本地资源图片作为placeholder，

FadeInImage.assetNetwork(
  placeholder: 'assets/loading.gif',
  image: 'https://img1.sycdn.imooc.com/5ddb4d8b0001f7c803000300-140-140.jpg',
);

5.如何配置图片缓存？

在Flutter中可以借助cached_network_image插件，来从网络上加载图片，并且将其缓存到本地，以供下次使用。

CachedNetworkImage(
            placeholder: (context, url) => new CircularProgressIndicator(),
            imageUrl:
                'https://picsum.photos/250?image=9',
          )

6.如何加载Icon？

在Flutter中可以借助Icon组件来加载icon：

const Icon(this.icon//IconDate, {
   Key key,
   this.size,//大小
   this.color,//颜色
   this.semanticLabel,//标志位
   this.textDirection,//绘制方向，一般使用不到
 })

Icon构造方法需要一个默认的类型为IconData类型的参数，可以构造一个自己的IconData，也可以使用Flutter提供的material_fonts。

使用自定义的Icon，首先需要再 pubspec.yaml中进行配置:

fonts:
	- family: devio
	  fonts:
	    - asset: fonts/devio.ttf

需要构造一个IconData：

const IconData(
  this.codePoint,//必填参数，fonticon对应的16进制Unicode {
  this.fontFamily,//字体库系列
  this.fontPackage,//字体在那个包中，不填仅在自己程序包中查找
  this.matchTextDirection: false,图标是否按照图标绘制方向显示
});

接下来就可以实用：

new Icon(new IconData(0xf5566,fontFamily: "devio"),size: 100.0,color: Colors.blueAccent,)

使用Flutter内置的material_fonts：

new Center(
        child: new Icon(Icons.android,size: 100.0),
      )

课程总结

Flutter提供了丰富的控件库，但所有的widget是不能直接绘制图片的，而是作为控制的图片的主要属性的容器，负责绘制的是RenderObject，他们中间通过ElementTree来联系起来。

有了这个基础后，所有的widget都不会提供画布(canvas)来直接绘制image，所以在任何一个Widget源码中都不会提供绘制的代码。