Flutter随记五：Image、FadeImage、ResizeImage、FileImage、AssetImage组件使用及使用问题解决

鸡肋佐

已于 2023-07-11 18:47:04 修改

阅读量4.5k

点赞数

分类专栏： Flutter随记文章标签：大数据

于 2022-06-27 01:51:56 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_38201372/article/details/125441154

版权

Flutter随记专栏收录该内容

8 篇文章

订阅专栏

目录

前言

一、Image组件使用

创建image组件

二、FadeImage组件使用

三、ImageProvider 之FileImage、AssetImage、NetworkImage、ResizeImage（压缩图片）对象使用

四、问题与解决方案

问题描述：

解决方案：

前言

本篇详细介绍Image了组件的使用，另外加一个报错问题：用一个图片组件展示一网络图片，真机运行报错，iOS和Android模拟器运行正常。按照网上方法重启电脑\重启工程\clean工程等都不好使。不过问题已解决，现记录下我的解决办法。

════════ Exception caught by image resource service ═══════════

Failed host lookup: 'www.xxx.com.cn' (OS Error: nodename nor servname provided, or not known, errno = 8)

以下是本篇文章正文内容

一、Image组件使用

Image组件属性
image	设置图片颜色
width	设置图片宽度
height	设置图片高度
color	设置图片颜色
opacity	设置图片不透明度
fit	设置图片填充模式。 BoxFit.fill（拉伸充满父组件）/contain（按原宽高比充满父组件，会有留白）/cover（按原宽高比充满父组件，多余的切掉）/fitWidth（以宽为基数等比放大或缩小充满父组件）/fitHeight（以高为基数等比放大或缩小充满父组件）/scaleDown（以宽为基数等比放大或缩小充满父组件）
alignment	设置图片对齐方式，控制在父组件中位置: Alignment.topLeft/topCenter/topRight /centerLeft/center/centerRight /bottomLeft/bottomCenter/bottomRight
repeat	设置图片是否横向或纵向复制以填充满组件
centerSlice	不知
colorBlendMode	与图片的背景颜色color配合，使图片颜色和背景混合。 clear：颜色和图片都不要。 src：只有颜色，没有图片。 dst：只有图片，没有颜色。 srcOver：只有颜色，没有图片。 dstOver：颜色和图片同时显示。 srcIn：以图片轮廓切背景颜色，轮廓外颜色不显示，图片不显示。 dstIn：以背景颜色轮廓切图片，轮廓外图片不显示。颜色不显示，只有图片。 srcOut：以图片轮廓切背景颜色，轮廓内颜色不显示，图片不显示。 dstOut：以背景颜色轮廓切图片，轮廓内图片不显示。颜色不显示，只有图片。 xor：与srcOut模式效果类似。 plus：图片和背景颜色相加，图片显示模糊 screen：与plus模式效果类似。 overlay：图片颜色和背景颜色混合,图片颜色重点 darken：图片颜色和背景颜色混合，中和图片和背景的颜色 lighten：图片颜色和背景颜色混合，背景颜色变浅 colorDodge：没测试 colorBurn：没测试 hardLight：没测试 softLight：没测试 difference：没测试 exclusion：没测试 multiply：没测试 hue：没测试 saturation：没测试 color：没测试 luminosity：没测试
matchTextDirection	不知
gaplessPlayback	不知
isAntiAlias	不知
filterQuality	不知
excludeFromSemantics	不知
semanticLabel	不知
errorBuilder	不知
loadingBuilder	不知
frameBuilder	不知

创建image组件

Image() ：创建一个无图片的对象。

Image.network()：通过一个String类型加载网络地址图片创建。

Image.network('https://p0.ssl.qhimg.com/t0183421f63f84fccaf.gif'),

Image.asset() :通过一个String类型本地图片创建。

 Image.asset('images/mine/cf_mod1_customer.png',
            width: 320.0,
            height: 200.0,
            color: Colors.yellow,
            colorBlendMode: BlendMode.overlay,
            alignment: Alignment.centerLeft,
            fit: BoxFit.fitHeight),

在pubspec.yaml文件中，按下面格式，配置好图片，图片也按下面的路径存放，一般会创建2.0x 和3.0x两个文件来存放同一张图片的不同尺寸图。

assets:

- images/mine/xxxxx.png

Image.memory() ：通过一个Uint8List类型二进制数据创建。

     Image.memory(), //通过一个Uint8List类型二进制数据创建。

Image.file() ：通过一个File类型文件创建。

 Image.file(File('xxx/xxxx/xxx.jpg')),//通过一个File类型文件创建。

注意：以上5中创建方法中参数大多数是一样的，后4中方法中有两个参数这里重点提下。

int? cacheWidth,

int? cacheHeight,

是设置加载的图片在缓存中的大小。和width、Height很大不同，要区分开。

二、FadeImage组件使用

FadeInImage(
          // placeholder: AssetImage("images/default.png"),
          placeholder: AssetImage('images/mine/cf_mod1_customer.png'),
          image: NetworkImage(
              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0919%252F2bb40aecj00qzo05j000dd200jg00etg00jg00et.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658914240&t=18d836a6536cda1da43c823217e7af78'),
          // image: NetworkImage(
          // 'https://p0.ssl.qhimg.com/xxxx.gif'), //用错的图片地址，验证占位图效果
          fadeOutDuration: Duration(milliseconds: 5),
          fadeInDuration: Duration(milliseconds: 5),
          fadeInCurve: Curves.easeOutBack,
          fadeOutCurve: Curves.easeInCirc,
        )

三、ImageProvider 之FileImage、AssetImage、NetworkImage、ResizeImage（压缩图片）对象使用

与Image组件创建方式很相似，只不过前者创建的是ImageProvider对象，后者创建的是Image组件。Image组件可以使用ImageProvider对象创建，请参考（1、创建image组件）第一种创建方式。

FileImage(File('xxx/xxxx/xxx.jpg')),

AssetImage('images/mine/cf_mod1_customer.png'),

NetworkImage('https://aaaa/bbb/ccc/xxx.jpg'),

ResizeImage(FileImage(File("aaa/bbb.jpg")), width: 30),

ResizeImage 按给定的宽高压缩图片，同时设置压缩的宽高和Image组件的宽高，测验发现谁的尺寸小，就以谁为准。