1. 文章目录

• 图片(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,
  })

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

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

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

image

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

image.png

我们先来试试加载网络图片
首先看看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的文件夹，放了一张图片

image.png

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

image.png

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是一个枚举，他有很多值
详细解析还是看官方文档吧，值太多了，我们随便用用

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

image.png

fit

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

image.png

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

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

image.png

alignment

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

image.png

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效果如下，其他的自行尝试

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字体图标

image.png