【Flutter】图片及ICON（二）

一、图片

图片类似UIImageView，在Flutter中两种方式加载图片，本地与网络。

1. 从asset即本地加载图片

• 在工程根目录下创建一个images目录，并将所需要的图片xxx.png拷贝到该目录。

• 在pubspec.yaml中的flutter部分添加如下内容（默认此文件下面会有注释，只需要将图片相关的注释打开即可）如下：

  assets:
  - images/xxx.png
  - images/xxxx.png

注意这里有个坑: 由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处assets前面应有两个空格。否则图片不能正常的显示

2.从网络加载图片

• 使用构造函数 Image.network 从网络加载、显示图片

相关图片的类官方简介

Image

Image widget有一个必选的image参数，它对应一个ImageProvider。

ImageProvider

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

            Image(
             image: AssetImage('images/1.jpeg'),
              width: 300.0,
              height: 200.0,
            ),

            Image(
              image: NetworkImage(
                 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2153937626,1074119156&fm=27&gp=0.jpg'),
              width: 200.0,
              height: 200.0,
            ),

运行效果

参数

Image的主要常用参数如下，可自行尝试：

const Image({
  ...
  this.width, //图片的宽
  this.height, //图片高度
  this.color, //图片的混合色值
  this.colorBlendMode, //混合模式
  this.fit,//缩放模式
  this.alignment = Alignment.center, //对齐方式
  this.repeat = ImageRepeat.noRepeat, //重复方式
  ...
})

这里引用一张官方的关于fit的参数的图，比较直观

fit不同显示样式.png

二、ICON

Flutter中，icon是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。在字体文件中，每一个字符都对应一个位码，而每一个位码对应一个显示字形，不同的字体就是指字形不同，即字符对应的字形是不同的。

简单的说，将这些图标当做文字一样去使用。

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

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

使用Material Design字体图标

在pubspec.yaml文件中,Flutter默认包含了一套Material Design的字体图标，配置如下,Material Design所有图标可以在其官网查看：https://material.io/tools/icons/

flutter:
  uses-material-design: true

我们看一个简单的例子：

String icons = "";
icons += "\uE914";
icons += " \uE000";
icons += " \uE90D";

Text(icons,
  style: TextStyle(
      fontFamily: "MaterialIcons",
      fontSize: 24.0,
      color: Colors.green
  ),
);

运行效果，跟文字没啥两样

上面的如\uE000一样的不知符号并不友好，所以，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,),
  ],
)

使用自定义字体图标

如果默认的不能满足，我们也可以使用自定义字体图标。iconfont.cn上有很多字体图标素材，步骤也很简单，这里不再重复，可参考https://book.flutterchina.club/chapter3/img_and_icon.html