Flutter Image 和 Icon 图片加载浅析

1、图片

flutter 中，我们可以通过Image 组件来加载并显示图片，Image 的数据源可以是asste、文件、内存以及网络。
下面我们来分别演示一下，如何从asset 和网络加载图片

1、在工程根目录创建一个asset 目录，将图片拷贝进去。
2、在pubspec.yml 中的flutter 部分，添加如下内容

  assets:
    - asset/

3、加载图片

            Image(
              image: AssetImage("asset/starry_sky.png"),
            ),

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

            Image.asset("asset/starry_sky.png")

下面我们来展示，从网络加载图片


            Image(
              image: NetworkImage(
                  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201408%2F31%2F20140831025000_Fa3fs.png&refer=http%3A%2F%2Fimg3.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650526033&t=f6c0151b9c32e3f414bf1ecab9aa80be"),
            ),

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

            Image.network(
                "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201408%2F31%2F20140831025000_Fa3fs.png&refer=http%3A%2F%2Fimg3.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650526033&t=f6c0151b9c32e3f414bf1ecab9aa80be")

运行上面的四个示例，图片加载成功后，如下图
在这里插入图片描述

参数

Image还提供了一系列的参数，通过这些参数，我们可以将图片修改成我们想要的样式

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

width、height 用来设置图片的宽高
fit：用来处理图片在容器中的适应模式，适应模式在BoxFit中定义，它是一个枚举类型，有如下值：

fill：会拉伸填满空间，图片本身的长宽会发生变化，图片会变形。
cover：会按图片的长宽比放大后居中填满整个空间，图片不会变形，超出显示部分会被裁切。
contain：这个是图片的默认适配规则，图片会在在保证图片自身长宽比不变的情况下缩放，以适应当前容器的前提下显示，图片不会变形
fitWidth：图片会缩放到当前容器的宽度居中显示，图片不会变成，超出的高度会被裁切。
fitHeught：图片会缩放到当前的容器高度居中显示，图片不会变形，超出的高度会被裁切。
none：图片没有适应策略，会显示在容器，如果图片比显示空间大，则显示空间只会显示部分图片的内容

            Image(
              image: NetworkImage(
                  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201408%2F31%2F20140831025000_Fa3fs.png&refer=http%3A%2F%2Fimg3.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650526033&t=f6c0151b9c32e3f414bf1ecab9aa80be"),
            ),
            Image.network(
              "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201408%2F31%2F20140831025000_Fa3fs.png&refer=http%3A%2F%2Fimg3.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650526033&t=f6c0151b9c32e3f414bf1ecab9aa80be",
              width: 200,
              height: 150,
              fit: BoxFit.fitWidth,
            )

代码运行效果如下图
在这里插入图片描述

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

            Image.asset(
              "asset/starry_sky.png",
              width: 200,
              height: 200,
              fit: BoxFit.fitHeight,
            ),

            Image.asset(
              "asset/starry_sky.png",
              width: 200,
              height: 200,
              fit: BoxFit.fitHeight,
              color: Colors.blue,
              colorBlendMode: BlendMode.difference,
            ),

代码运行如下图

在这里插入图片描述
repeat：当图片本身大小小于当前显示空间的适合，指定图片的重复规则

关于image 图片加载的部分，我们就先讲到这里，有兴趣的朋友可以尝试一下。
其实Flutter 框架对加载过的图片的是有缓存的，关于image 更详细的内容及原理，我们在后面的进阶部分再分享

2. Icon

在flutter 中，我们也可以像在web开发中一样使用 iconfont，iconfont 即“字体图标”，然后通过指定不同的字符，显示不同的图片

其实在我们创建项目的时候，Flutter默认包含了一套Material Design的字体图标，在pubspec.yaml文件中的配置如下

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

下面我写一个简单的例子

            Text(
              icons1,
              style: TextStyle(fontSize: 28),
            ),
            Text(
              icons2,
              style: TextStyle(fontSize: 28),
            ),
            Text(
              icons3,
              style: TextStyle(fontSize: 28),
            ),

代码运行如下
在这里插入图片描述

我们不光可以使用Material 给我们提供的图标库，我们还能使用自定义图标，有兴趣的同学可以去了解一下。

下一节我们将讲单选开关和复选框

Flutter Image 和 Icon 图片加载浅析

悦读