Flutter Widget之图片（Image）和图标（Icon）

图片（Image）

在Flutter中，我们可以使用Image控件来显示图片，一般来讲我们的图片资源都来源于网络或者本地图片。
Flutter中的Image也是类似。

我们先来看看Image的构造方法

  const Image({
    Key key,
    @required this.image,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  })

下面我们来看看其常用的属性

属性	值类型	说明
image	ImageProvider	必填参数，接收一个ImageProvider 类型的值
semanticLabel	String	图片的描述
excludeFromSemantics	bool	是否从语义上排除该图片，默认值为false
width	double	图片的宽度
height	double	图片的高度
color	Color	图片的前景色，一般不设置或设置透明色，会覆盖掉图片，一般会和colorBlendMode结合使用
colorBlendMode	BlendMode	一般和color结合使用，设置color的混合模式
fit	BoxFit	设置图片的显示模式
alignment	AlignmentGeometry	用于设置图片的对齐方式，默认值：Alignment.center
repeat	ImageRepeat	图片的重复方式，当图片没有完全覆盖掉容器时使用。默认值：ImageRepeat.noRepeat

可以看到，其常用属性跟前端中的css很像。

下面我们来简单用一用Image控件

image
首先是必填参数image，它接收一个ImageProvider类型的值。ImageProvider是一个抽象类，他下面有下图这些实现类，由下面这些实现类可以看出，image是可以从资源，内存，网络，和文件中获取图片。

我们先来试试加载网络图片
首先看看NetworkImage构造方法，很简单，传个url就可以了

  const NetworkImage(this.url, { this.scale = 1.0 , this.headers })

如下：

Image(
      image: NetworkImage("https://img-blog.csdnimg.cn/20181210151747299.jpg"),
    );

嗯，就是这么简单。其他3种情况使用也是类似的，自行看源码即可。

实际上，Flutter给我们提供了扩展方法，使用起来更加简单，通常我们直接使用提供的扩展方法即可
如下
加载网络图片

 Image.network(String src, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
    Map<String, String> headers,
  })

加载本地文件

  Image.file(File file, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  })

从项目资源中加载

Image.asset(String name, {
    Key key,
    AssetBundle bundle,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    double scale,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    String package,
    this.filterQuality = FilterQuality.low,
  })

从内存中加载

  Image.memory(Uint8List bytes, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
  })

可以看到，他们的构造方法基本类似。

所以我们也可以这样写，跟上面的效果是一致的。

Image.network(
      "https://img-blog.csdnimg.cn/20181210151747299.jpg",
    );

从项目中加载资源图片

大致分为一下几步

1. 创建一个文件夹，用于存放图片，如图，我创建了一个imgs的文件夹，放了一张图片
   

2. 在pubspec.yaml中声明资源，注意声明的时候路径和前面的-是有间隔的，不然的话会报#/properties/flutter/properties/assets: type: wanted [array] got -imgs/code.png
   类似的错误，声明完成后点击右上方的packages get

3. 使用该资源图片，注意路径要填写正确

 return Image.asset("imgs/code.png");

或

return Image(image: AssetImage("imgs/code.png"));

效果如下

下面我们再来看看其他属性。
width，height
宽高没什么好说的，就是设置宽度和高度

Image.asset(
      "imgs/code.png",
      width: 100,
      height: 100,
    );

color

Image.asset(
      "imgs/code.png",
      width: 300,
      height: 300,
      color: Colors.red,
    );

BlendMode
配合color使用，用于设置颜色的混合模式。BlendMode是一个枚举，他有很多值
详细解析还是看官方文档吧，值太多了，我们随便用用

BlendMode

Image.asset(
      "imgs/code.png",
      width: 300,
      height: 300,
      color: Colors.red,
      colorBlendMode: BlendMode.colorDodge,
    );

**fit **
用于设置图片的填充方式，当图片本身小于设置的宽高或者比父控件的宽高小时，我们可以设置该属性控制图片的显示。
其值的类型是BoxFit。是个枚举

具体含义还是直接看文档即可
BoxFit

我们来简单用一用

Image.asset(
      "imgs/code.png",
      width: 400,
      height: 100,
      color: Colors.red,
      colorBlendMode: BlendMode.colorDodge,
      fit: BoxFit.cover,
    );

alignment
设置图片的对齐方式，接收一个Alignment类型的值，值如下，很好理解

Container(
      width: 300,
      height: 300,
      color: Colors.redAccent,
      child: Image.asset(
        "imgs/code.png",
        color: Colors.red,
        colorBlendMode: BlendMode.colorDodge,
        alignment: Alignment.bottomLeft,
      ),
    );

为了方便看效果我们在外边套了个Container,简单的把它理解为一个容器布局就可以了，类似于html中的div或android中的Layout，我们给Container设置了宽高和背景颜色。

bottomLeft效果如下，其他的自行尝试

repeat
图片的平铺方式，跟前端很像，很好理解。ImageRepeat 也是一个枚举，源码如下

/// How to paint any portions of a box not covered by an image.
enum ImageRepeat {
  /// Repeat the image in both the x and y directions until the box is filled.
  repeat,

  /// Repeat the image in the x direction until the box is filled horizontally.
  repeatX,

  /// Repeat the image in the y direction until the box is filled vertically.
  repeatY,

  /// Leave uncovered portions of the box transparent.
  noRepeat,
}

这里我们就直接用。

Container(
      width: 300,
      height: 300,
      color: Colors.redAccent,
      child: Image.asset(
        "imgs/code.png",
        color: Colors.red,
        colorBlendMode: BlendMode.colorDodge,
        alignment: Alignment.bottomLeft,
        repeat: ImageRepeat.repeatX,
      ),
    );

效果如下

---

ICON

相对于Image，ICON可以像web一样使用字体图标，并且可以使用矢量图，无需担心失真的问题，并且体积相对较小。

我们先来看看其构造方法

  const Icon(this.icon, {
    Key key,
    this.size,
    this.color,
    this.semanticLabel,
    this.textDirection,
  })

很简单，我们直接来用一用

Icon(
      Icons.camera,
      size: 50,
      color: Colors.cyan,
      textDirection: TextDirection.ltr,
    );

默认情况下，pubspec.yaml中uses-material-design的值为true.我们默认就可以使用Material Design字体图标

关于Material Design图标可以看官方文档
Material Design

---

如果你觉得本文对你有帮助，麻烦动动手指顶一下，算是对本文的一个认可。也可以关注我的 Flutter 博客专栏，我会不定期的更新，如果文中有什么错误的地方，还望指正，转载请注明转自喻志强的博客 ，谢谢！