Flutter系列之图片的声明和使用

图片或图标的展示和应用在app开发中是最基本的场景之一，今天讲一下Flutter图片的使用和加载方式。

Flutter提供两个加载图片的组件，分别是AssetImage和NetworkImage，分别用于加载本地图片和网络图片。

如果是加载本地资源图片，需要将图片的的名称加在pubspec.yaml文件中

图片的声明：

首先，在工程的根目录下面，创建一个images的目录，用于存放图片，图片的格式可以是png、jpg和webp，如图所示

如果想不同屏幕分辨率使用不同的图，可以创建2x和3x的目录，flutter会根据屏幕分辨率取对应的图：

然后在pubspec.yaml文件中对图片进行声明，如果没有声明，运行时就会报错：Unable to load asset: xxx.png 

声明如下：注意assets前面两个空格，- 前面四个空格，- 后面一个空格，必须按照这个格式，

否则会报找不到图片的错误：Unable to load asset: xxx.png

如果应用只有一套图（推荐只使用3x图，可以节约包的大小），有更方便的方式，不用一张一张图地去写路径。直接声明图片目录，则目录中的图片会被自动添加到工程中。

可以这样声明：

声明之后使用（图片名称要完整）

  Scaffold(
      appBar: AppBar(
        title: Text('图片展示'),
      ),
      body: Container(
        child: Center(
          child: Image(
            width: 250.0,
            height: 167.0,
            fit: BoxFit.cover,
            image: AssetImage('images/test_lands.jpg'),
          ),
        ),
      ),
    )

也可以直接使用Image.asset()这个命名函数，它直接返回一个Image组件，代码会更简洁

   Scaffold(
      appBar: AppBar(
        title: Text('图片展示'),
      ),
      body: Container(
        child: Center(
          child: Image.asset('images/test_lands.jpg', width: 250, height: 167, fit: BoxFit.cover),
        ),
      ),
    )

如果想让图片宽度填满，高度等比适应，把 fit 属性改成 BoxFix.fitWidth 即可

更多图片的填充策略，请参考这张图：