Flutter 常用Widget-图片Image

Flutter中，加载并显示图片使用的是Image组件。我们先来看下这个构造函数：

Image的构造参数有一下几种分别是：

• Image:从Provider获取图像
• Image.asset:加载资源图片
• Image.file:加载本地图片文件
• Image.network:记载网络图片
• Image.memory:加载Uint8List资源图片

我们接下来看一下如何使用

class ImagePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image.network('https://flutter.cn/assets/flutter-lockup-1caf6476beed76adec3c477586da54de6b552b2f42108ec5bc68dc63bae2df75.png'),
      ),
    );
  }
}

我们加载了一张网络图片。其他的使用也比较类似，这里不在赘述。我们看看provider如何使用。

class ImagePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image(
          image: NetworkImage('https://flutter.cn/assets/flutter-lockup-1caf6476beed76adec3c477586da54de6b552b2f42108ec5bc68dc63bae2df75.png'),
        ),
      ),
    );
  }
}

可以看到效果是一样的。ImageProvider是一个抽象类，Flutter为我们提供了一套实现，当然我们也可以自己去实现provider。

这一部分就是Flutter为我们提供的ImageProvider。实际上，开篇介绍的Image的不同构造函数中，就是使用了不同的Provider来实现的。我们在来看看其他的参数。

属性	类型	说明
image	ImageProvider	ImageProvider是一个抽象类，Flutter为我们提供了一套实现，当然我们也可以自己去实现provider。
width/height	double	显示区域的宽高设置，值得注意的是，不要和Image本身的大小混淆，Image Widget只是个容器，容器就有自己的大小，而显示的效果经常要和填充模式配合使用。
fit	BoxFit	填充模式（下面有详细介绍）。
color	Color	容器颜色
colorBlendMode	BlendMode	图片混合模式，注意这个参数要混合Color使用才有作用。https://api.flutter.dev/flutter/dart-ui/BlendMode-class.html
alignment	Alignment	控制图片的在容器中的位置。
repeat	ImageRepeat	设置容器比图片大时，图片的重复模式。
centerSlice	Rect	如果图片被拉伸，那么是重哪个点开始拉伸。
gaplessPlayback	bool	当provider改变的时候，重新加载的过程中，原图片是否保留。

fit:填充模式

BoxFit.fill 不按比例拉伸显示到全部容器。

BoxFit.contain 在保证原图像比例的情况下，尽可能的拉伸充满容器。

BoxFit.cover 保证原图像的比例缩放并充满容器，超出部分剪裁。

我们使用一个200x200的图像，Image容器的大小我们也设置200x200，我们可以看到显示是正常的。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image(
          image: NetworkImage(_path),
          width: 200,
          height: 200,
          fit: BoxFit.cover,
        ),
      ),
    );
  }

我们现在改变宽度，为400.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image(
          image: NetworkImage(_path),
          width: 400,
          height: 200,
          fit: BoxFit.cover,
        ),
      ),
    );
  }

可以看到图片被放大了，超出的部分被剪切掉。

BoxFit.fitWidth 同比缩放，缩放宽度直到宽度充满容器。

我们把这几个参数改一下

width: 200, height: 500, fit: BoxFit.fitWidth,	width: 300, height: 500, fit: BoxFit.fitWidth,	width: 300, height: 200, fit: BoxFit.fitWidth,
应该显示原比例200x200大小	应该显示300x300大小	图片缩放300x300，但是会剪切掉一部分

BoxFit.fitHeight 同比缩放，缩放宽度直到高度充满容器（效果类似fitWidth）。

BoxFit.none 不进行任何缩放，显示原比例，容器容纳不下则剪切。

BoxFit.scaleDown 如果容器显示不下，则采用contain模式；如果容器可以容纳下则采用none。

=========================================================================

color/colorBlendMode 使用红色和图片进行混合

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image(
          color: Colors.red,
          colorBlendMode: BlendMode.difference,
          image: NetworkImage(_path),
          width: 400,
          height: 200,
          fit: BoxFit.contain,
        ),
      ),
    );
  }

===============================================================

repeat 设置x重复

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Image(
          colorBlendMode: BlendMode.difference,
          image: NetworkImage(_path),
          width: 400,
          height: 200,
          fit: BoxFit.contain,
          repeat: ImageRepeat.repeatX,
        ),
      ),
    );
  }

总结：Flutter中可以使用Image Widget来显示图片，有多种图片的获取方式，也可以自己实现Provider来实现。接下来的文章会继续将常用Widget逐一介绍，在最后的系列中，会公开一个商业级的项目，感兴趣的小伙伴关注。如果您在阅读过程中发现错误，请及时留言给我，我会第一时间改正。也欢迎大家一切交流，共同进步，感谢支持！