第三节 Flutter Image图片组件的使用

Image组件的构造方法
在 Android 中，我们都知道，图片的显示方式有很多，资源图片、网络图片、文件图片等等，在 Flutter 中也有多种方式，用来加载不同形式的图片：

Image：通过ImageProvider来加载图片

Image.asset：用来加载本地资源图片

Image.file：用来加载本地（File文件）图片

Image.network：用来加载网络图片

Image.memory：用来加载Uint8List资源（byte数组）图片

1、Image

Image 的一个参数是 ImageProvider，基本上所有形式的图片加载都是依赖它，这个类里面就是实现图片加载的原理。用法如下：

new Image(image: new AssetImage('images/bg.png'));

new Image(image: new NetworkImage('http://pic25.nipic.com/20121205/10197997_003647426000_2.jpg'))

2、Image.asset

加载一个本地资源图片，和 Android 一样，有多种分辨率的图片可供选择，但是沿袭的是 iOS 的图片风格，分为 1x，2x，3x，具体做法是在项目的根目录下创建两个文件夹，如下图所示：

image.png

还要配置如下
在pubspec.yaml文件

image.png image.png

 new Container(
                  width: 100,
                  color: Colors.blue,
                  padding: const EdgeInsets.fromLTRB(20.0, 0.0, 0, 0),
                  child: Image.asset(
                  'image/bg.png',
                  width: 50,
                  height: 50,
                  
                ),

image.png

3、Image.file

加载一个本地 File 图片，比如相册中的图片，用法如下

new Image.file(new File('/storage/xxx/xxx/test.jpg'))

4、Image.network

加载一个网络图片，用法如下：

 new Image.network(
                  'http://pic25.nipic.com/20121205/10197997_003647426000_2.jpg',
                  width:50.0,
                  height: 50.0,
                ),

有的时候我们需要像Android那样使用一个占位图或者图片加载出错时显示某张特定的图片，这时候需要用到 FadeInImage 这个组件：

new FadeInImage.assetNetwork(
  placeholder: 'images/bg.png',
  image: imageUrl,//这里是网络图片
  width: 120,
  fit: BoxFit.fitWidth,
)

new FadeInImage.memoryNetwork(
  placeholder: kTransparentImage,
  image: imageUrl,
  width: 120,
  fit: BoxFit.fitWidth,
)

5、Image.memory

用来将一个 byte 数组加载成图片，用法如下：

new Image.memory(bytes)

image.png
image.png