Flutter 图片组件（Image、Icon）

2019-06-17 本文已影响0人 wuchao226

图片（image）

Flutter中，我们可以通过Image来加载并显示图片，Image的数据源可以是asset、文件、内存以及网络。

图片组件( Image)是显示图像的组件， Image 组件有多种构造函数 :

new Image：从 ImageProvider 获取图像。
new Image.asset：加载资源图片。
new Image.file：加载本地图片文件。
new Image.network：加载网络图片。
new Image.memory：加载 Uint8List 资源图片。

Image组件常见属性见下表：

属性名	类型	说明
image	ImageProvider	抽象类，需要自己实现获取图片数据的操作
width/height	double	Image 显示区域的宽度和高度设置，这里需要把 Image 和图片两个东西区分开，图片本身有大小， Image Widget 是图片的容器，本身也有大小。宽度和高度的配置经常和 fit 属性配合使用
fit	BoxFit	图片填充模式，具体取值见下一个表
color	Color	图片颜色
colorBlendMode	BlendMode	在对图片进行手动处理的时候，可能用到图层混合，如改变图片的颜色。此属性可以对颜色进行混合处理。有多种模式
alignment	Alignment	控制图片的摆放位置，比如l图片放置在右下角则为 Alignment. bo忱。mRight
repeat	ImageRepeat	此属性可以设置图片重复模式。 noRepeat 为不重复， Repeat 为 x 和 y 方向重复， repeatX 为 x 方向重复， repeatY 为 y 方向重复
centerSlice	Rect	当图片需要被拉伸显示时， centerSIice 定义的矩形区域会被拉仰，可以理解成我们在图片内部定义一个点 9 个点文件用作拉伸， 9个点为“上” “下 ” “左”“右”“上中”“下中 ”“左中”“右中 ” “正中”
matchTextDirection	bool	matchTextDirection 与 Directionality 配合使用。 TextDirection 有两个值分别为: TextDirection.ltr 从左向右展示图片， TextDirection.rtl 从右向左展示图片
gaplessPlayback	bool	当 lmageProvider 发生变化后，重新加载图片的过程中，原图片的展示是否保留。值为 true 则保留;值为 false 则不保留，直接空白等待下一张图片加载

BoxFit取值及描述参见下表。

取值	描述
Boxfit.fill	会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。
Boxfit.contain	这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
Boxfit.cover	会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。
BoxFit.fitWidth	图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
BoxFit.fitHeight	图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
Boxf1t.none	图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。
BoxFit.scaleDown	效果和 Boxfit.contain差不多但是此属性不允许显示超过源图片大小，即可小不可大

如下图：

ImageProvider

ImageProvider 是一个抽象类，主要定义了图片数据获取的接口 load()，从不同的数据源获取图片需要实现不同的 ImageProvider ，如 AssetImage 是实现了从 Asset 中加载图片的 ImageProvider，而 NetworkImage 实现了从网络加载图片的 ImageProvider。

Image

Image widget 有一个必选的 image 参数，它对应一个 ImageProvider。下面我们分别演示一下如何从 asset 和网络加载图片。

从 asset 中加载图片

在工程根目录下创建一个 images 目录，并将图片 avatar.png 拷贝到该目录。
在 pubspec.yaml 中的 flutter 部分添加如下内容：

 
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.

  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
     - images/a_dot_burr.jpeg
     - images/a_dot_ham.jpeg

注意: 由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处 assets 前面应有两个空格。
这里的配置一定要和程序中指定的路径相对应，否则会报找不到资源的错误。应用里所有的静态资源都配置在这里，注意命名规范。

配置完后，需要点击 Packages.get 以更新资源

加载该图片

Image(
  image: AssetImage("images/avatar.png"),
  width: 100.0
);

Image 也提供了一个快捷的构造函数 Image.asset 用于从 asset 中加载、显示图片：

Image.asset("images/avatar.png",
  width: 100.0,
)

从网络加载图片

Image(
  image: NetworkImage(
      "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4"),
  width: 100.0,
)

Image 也提供了一个快捷的构造函数 Image.network 用于从网络加载、显示图片：

Image.network(
  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
  width: 100.0,
)

运行上面两个示例，图片加载成功后显示如下：

color 和 colorBlendMode：在图片绘制时可以对每一个像素进行颜色混合处理，color 指定混合色，而 colorBlendMode 指定混合模式，下面是一个简单的示例：

Image(
  image: AssetImage("images/avatar.png"),
  width: 100.0,
  color: Colors.blue,
  colorBlendMode: BlendMode.difference,
);

运行效果如下（彩色）:

repeat：当图片本身大小小于显示空间时，指定图片的重复规则。简单示例如下：

Image(
  image: AssetImage("images/avatar.png"),
  width: 100.0,
  height: 200.0,
  repeat: ImageRepeat.repeatY ,
)

运行后效果如下：

ICON

Flutter 中，可以像 web 开发一样使用 iconfont，iconfont 即“字体图标”，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。

在字体文件中，每一个字符都对应一个位码，而每一个位码对应一个显示字形，不同的字体就是指字形不同，即字符对应的字形是不同的。而在 iconfont 中，只是将位码对应的字形做成了图标，所以不同的字符最终就会渲染成不同的图标。

在Flutter开发中，iconfont和图片相比有如下优势：

体积小：可以减小安装包大小。
矢量的：iconfont 都是矢量图标，放大不会影响其清晰度。
可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。
可以通过 TextSpan 和文本混用。

使用Material Design字体图标
Flutter 默认包含了一套 Material Design 的字体图标，在 pubspec.yaml 文件中的配置如下

flutter:
  uses-material-design: true

Material Design 所有图标可以在其官网查看：https://material.io/tools/icons/

Flutter 封装了一个 IconData 和 Icon 来专门显示字体图标

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.accessible,color: Colors.green,),
    Icon(Icons.error,color: Colors.green,),
    Icon(Icons.fingerprint,color: Colors.green,),
  ],
)

运行效果如下：

Icons 类中包含了所有 Material Design 图标的 IconData 静态变量定义。