Flutter学习日记之Image组件详解

Posted 2021-06-06 Android_小黑

本文地址：https://blog.csdn.net/qq_40785165/article/details/117164586,转载需附上此地址

大家好，我是小黑，一个还没秃头的程序员~~~

请你相信，你的坚持，终将美好。

今天分享的内容是Flutter的Image组件，用来加载本地或者网络图片，源码地址：https://gitee.com/fjjxxy/flutter-study.git，效果如下：

（一）加载网络图片

Image.network(
                    "https://profile.csdnimg.cn/D/6/7/0_qq_40785165",
                    width: 100,
                    height: 100,
                  )

（二）加载图片并进行颜色混合

  Container buildContainer(BlendMode blendMode) {
    return Container(
        width: 100,
        height: 100,
        decoration: BoxDecoration(color: Colors.grey),
        //图片如果要设置大小，不能直接放在container里面，要再用一个组件包裹，不然没办法设置大小
        child: Image.network(
          "https://avatar.csdnimg.cn/D/6/7/3_qq_40785165_1608817824.jpg",
          alignment: Alignment.center,
          color: Colors.red,
          colorBlendMode: blendMode,
        ));
  }

参数	说明
color	混合的颜色
colorBlendMode	混合的模式，值比较多，这里就不介绍了，效果如下

有二十几种效果，这里就不介绍了，项目源码中都有，大家可以自己下载项目源码查看

（三）对齐方式

alignment参数对应一个Alignment组件，可以设置Image组件在容器中的对齐方式，代码如下：

Image.network(
          "https://avatar.csdnimg.cn/D/6/7/3_qq_40785165_1608817824.jpg",
          alignment: Alignment.center,
          width: 80,
          height: 80,
        )

值	说明	截图
Alignment.topLeft	图片处于左上方
Alignment.topCenter	图片处于中上方
Alignment.topRight	图片处于右上方
Alignment.centerLeft	图片处于中左方
Alignment.center	图片处于中间
Alignment.centerRight	图片处于中右方
Alignment.bottomLeft	图片处于左下方
Alignment.bottomCenter	图片处于中下方
Alignment.bottomRight	图片处于右下方

（四）图片显示效果

fit参数对应的是BoxFit组件，可是设置图片的拉伸显示效果，类似于android原生中的scaleType属性，代码如下：

Image.network(
          "https://img-blog.csdnimg.cn/img_convert/7c3b79791b1dd90edfa5a79cf12cae6a.png",
          fit: BoxFit.cover,
        )

值	说明	截图
BoxFit.contain	显示原比例，全图显示，图片被容器完全包含
BoxFit.cover	充满容器，拉伸但是不变形
BoxFit.fill	拉伸，充满容器，会变形
BoxFit.fitHeight	高度充满为准
BoxFit.fitWidth	宽度充满为准
BoxFit.none	保持原图，显示中心位置，多出来的丢弃
BoxFit.scaleDown	居中显示，如果需要，缩小图片以确保图片被容器包含。如果会缩小图像，那么它与“contain”相同，否则它与“none”相同

（五）平铺效果

repeat参数对应的是ImageRepeat组件，可以在图片比容器小的情况下设置图片在容器中的平铺效果，代码如下：

Image.network(
          "https://avatar.csdnimg.cn/D/6/7/3_qq_40785165_1608817824.jpg",
          repeat: ImageRepeat.repeat,
        )

值	说明	截图
ImageRepeat.noRepeat	不进行平铺
ImageRepeat.repeat	水平和垂直方向都进行平铺
ImageRepeat.repeatX	水平方向进行平铺
ImageRepeat.repeatY	垂直方向进行平铺

（六）圆角图片

圆角图片有两种实现方案：

1.对Container组件的边框参数进行设置，利用BorderRadius组件进行设置圆角，效果以及代码如下：

 Container(
      width: 100,
      height: 100,
      margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
      decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage(
                "https://avatar.csdnimg.cn/D/6/7/3_qq_40785165_1608817824.jpg"),
            fit: BoxFit.cover,
          ),
          border: Border.all(color: Colors.black),
          borderRadius: BorderRadius.circular(10)),
    )

2.可以在Container组件中放置ClipOval组件，在ClipOval组件中进行图片加载，通过设置fit参数为BoxFit.cover即可实现圆形图片，效果以及代码如下：

Container(
      width: 100,
        height: 100,
        color: Colors.red,
        margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
        child: ClipOval(
          child: Image.network(
            "https://avatar.csdnimg.cn/D/6/7/3_qq_40785165_1608817824.jpg",
            fit: BoxFit.cover,
          ),
        ))

（七）加载本地图片

加载本地图片有以下几个步骤

1. 创建不同分辨率的文件夹存放图片
2. 在代码中修改配置
3. 加载本地图片

1.在项目的根目录下创建assets文件夹，在assets文件夹内新建images文件夹，随后可以在images文件夹底下创建2.0x，3.0x的文件夹，1.0x的图片可以直接放在images的文件夹底下，已适配各种分辨率的屏幕，也可以不用创建这些文件夹，直接将图片放在images底下，根据不同情况而定。效果如下：

2.修改pubspec.yaml文件配置，配置图片的文件夹，如下所示：

flutter:
	...
  	assets:
    	- assets/images/

注意：这里配置的是包含所有图片包括子文件夹的文件夹路径，这样就可以不用配置所有的图片路径了

3.加载本地图片，效果以及代码如下：

Image.asset("assets/images/2.0x/icon_xiaohei.jpg",width: 100,height: 100,)

Image.asset("assets/images/image_default.jpg",width: 100,height: 100,)

注意：前者代码中需要写明图片地址是因为这张图片不在1.0x即images目录下，所以需要写明图片地址，否则会报错，后者图片存在于images目录下，并且其他分辨率的文件夹下也存在相同文件名的图片，到时候会自动选择相应分辨率文件夹的图片进行加载

到此为止，Flutter中网络图片加载以及本地图片加载的内容就介绍完毕了，真的是写的很认真了，多写才能熟能生巧，感兴趣的小伙伴可以下载源码看一下，希望大家可以点个star，支持一下小白的flutter学习经历，最后，希望喜欢我文章的朋友们可以帮忙点赞、收藏、评论，也可以关注一下，如果有问题可以在评论区提出，后面我会持续更新Flutter的学习记录，与大家分享，谢谢大家的支持与阅读!