一，概述
Image（图片组件）是显示图像的组件，一个显示图片的widget，支持图像格式：JPEG，PNG，GIF，动画GIF，WebP，动画WebP，BMP和WBMP。 Image组件有多种构造函数:
- new Image: 从ImageProvider获取图像。
- new Image.asset: 加载本地图片文件。
- new Image.file： 加载本地图片文件。
- new Image.network: 加载网络图片。
- new Image.memory: 加载Uint8List资源图片。
二，继承关系
- Object > Diagnosticablet > DiagnosticableTreet > Widgett > StatefulWidgett > Image
三，构造方法
- new Image: 从ImageProvider获取图像。
- 类名构造方法，它指定了图片是从哪里加载，是从项目中还是网络中等等。
const Image({ Key key, @required this.image, this.frameBuilder, this.loadingBuilder, this.semanticLabel, this.excludeFromSemantics = false, this.width, this.height, this.color, this.colorBlendMode, this.fit, this.alignment = Alignment.center, this.repeat = ImageRepeat.noRepeat, this.centerSlice, this.matchTextDirection = false, this.gaplessPlayback = false, this.filterQuality = FilterQuality.low, }) : assert(image != null), assert(alignment != null), assert(repeat != null), assert(filterQuality != null), assert(matchTextDirection != null), super(key: key);
- 类名构造方法，它指定了图片是从哪里加载，是从项目中还是网络中等等。
- new Image.asset: 加载资源图片文件。
- 命名构造方法，用于使用key从AssetBundle获取图像。就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
- 其实就相当于第一种构造方法指定 ImageProvider 为 AssetImage
- 沿袭的是 iOS 的图片风格，分为 1x，2x，3x，具体做法是在项目的根目录下创建两个文件夹，如下图所示：
-
然后需要在
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 assets: - images/logo.png - images/2.0x/logo.png - images/3.0x/logo.png -
用法如下：
new Image.asset('images/logo.png') - 构造方法
-
Image.asset( String name, { Key key, AssetBundle bundle, this.frameBuilder, this.semanticLabel, this.excludeFromSemantics = false, double scale, this.width, this.height, this.color, this.colorBlendMode, this.fit, this.alignment = Alignment.center, this.repeat = ImageRepeat.noRepeat, this.centerSlice, this.matchTextDirection = false, this.gaplessPlayback = false, String package, this.filterQuality = FilterQuality.low, }) : image = scale != null ? ExactAssetImage(name, bundle: bundle, scale: scale, package: package) : AssetImage(name, bundle: bundle, package: package), loadingBuilder = null, assert(alignment != null), assert(repeat != null), assert(matchTextDirection != null), super(key: key);
- new Image.file： 加载本地图片文件。
- 命名构造方法，加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。 用于从File获取图像
- 其实就相当于第一种构造方法指定 ImageProvider 为 FlieImage
- 加载一个本地
File图片，比如相册中的图片，用法如下
new Image.file(new File('/storage/xxx/xxx/test.jpg')) - 构造函数
Image.file( File file, { Key key, double scale = 1.0, this.frameBuilder, this.semanticLabel, this.excludeFromSemantics = false, this.width, this.height, this.color, this.colorBlendMode, this.fit, this.alignment = Alignment.center, this.repeat = ImageRepeat.noRepeat, this.centerSlice, this.matchTextDirection = false, this.gaplessPlayback = false, this.filterQuality = FilterQuality.low, }) : image = FileImage(file, scale: scale), loadingBuilder = null, assert(alignment != null), assert(repeat != null), assert(filterQuality != null), assert(matchTextDirection != null), super(key: key);
- new Image.network: 加载网络图片。
- 命名构造方法，用于从URL地址获取图像。意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
new Image.network('http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg') - 其实就相当于第一种构造方法指定 ImageProvider 为 NetworkImage。
-
有的时候我们需要像Android那样使用一个占位图或者图片加载出错时显示某张特定的图片，这时候需要用到 FadeInImage 这个组件：
//第一种方法是加载一个本地的占位图
new FadeInImage.assetNetwork( placeholder: 'images/logo.png', image: imageUrl, width: 120, fit: BoxFit.fitWidth, )
//第二种是加载一个透明的占位图，但是需要注意的是，这个组件是不可以设置加载出错显示的图片的
new FadeInImage.memoryNetwork( placeholder: kTransparentImage, image: imageUrl, width: 120, fit: BoxFit.fitWidth, )//另一种方法可以使用第三方 package 的 CachedNetworkImage 组件：CachedNetworkImage 组件中的占位图是一个 Widget，这样的话就可以自定义了，你想使用什么样的组件进行占位都行，同样加载出错的占位图也是一个组件，也可以自己定义；该组件也是通过缓存来加载图片的。
new CachedNetworkImage(
width: 120,
fit: BoxFit.fitWidth,
placeholder: new CircularProgressIndicator(),
imageUrl: imageUrl,
errorWidget: new Icon(Icons.error),
) - 构造函数
Image.network( String src, { Key key, double scale = 1.0, this.frameBuilder, this.loadingBuilder, this.semanticLabel, this.excludeFromSemantics = false, this.width, this.height, this.color, this.colorBlendMode, this.fit, this.alignment = Alignment.center, this.repeat = ImageRepeat.noRepeat, this.centerSlice, this.matchTextDirection = false, this.gaplessPlayback = false, this.filterQuality = FilterQuality.low, Map<String, String> headers, }) : image = NetworkImage(src, scale: scale, headers: headers), assert(alignment != null), assert(repeat != null), assert(matchTextDirection != null), super(key: key);
- 命名构造方法，用于从URL地址获取图像。意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
- new Image.memory: 加载Uint8List资源图片。
- 用来将一个
byte数组加载成图片
new Image.memory(bytes)
- 命名构造函数
Image.memory( Uint8List bytes, { Key key, double scale = 1.0, this.frameBuilder, this.semanticLabel, this.excludeFromSemantics = false, this.width, this.height, this.color, this.colorBlendMode, this.fit, this.alignment = Alignment.center, this.repeat = ImageRepeat.noRepeat, this.centerSlice, this.matchTextDirection = false, this.gaplessPlayback = false, this.filterQuality = FilterQuality.low, }) : image = MemoryImage(bytes, scale: scale), loadingBuilder = null, assert(alignment != null), assert(repeat != null), assert(matchTextDirection != null), super(key: key);
- 用来将一个
四，参数详解
- image：
从哪里加载图片，值为一个 ImageProvider 对象，ImageProvider 的实现类有 AssetBundleImageProvider（AssetImage 继承自它）、FileImage、MemoryImage、NetworkImage，需要注意的是，如果选择 AssetImage 从资源目录中加载图片，需在 pubspec.yaml 配置文件中配置 assets 目录：上面有介绍 - width 和 heigh: 宽和高
- alignment：
如果图片没有填充满容器的话，图片的对齐方式，值为一个 AlignmentGeometry 对象，Alignment 是它的一个实现类，可选值同 Container 的 Alignment 取值一样。
Alignment.topLeft：垂直靠顶部水平靠左对齐。 Alignment.topCenter：垂直靠顶部水平居中对齐。 Alignment.topRight：垂直靠顶部水平靠右对齐。 Alignment.centerLeft：垂直居中水平靠左对齐。 Alignment.center：垂直和水平居中都对齐。 Alignment.centerRight：垂直居中水平靠右对齐。 Alignment.bottomLeft：垂直靠底部水平靠左对齐。 Alignment.bottomCenter：垂直靠底部水平居中对齐。 Alignment.bottomRight：垂直靠底部水平靠右对齐。除了上面的常量之外，还可以创建 Alignment 对象指定 x、y 偏移量。
- color
在图片上设置颜色，值为一个 Color 对象，会覆盖 image 指定的图片，如果也设置了 colorBlendMode 属性，则会与 image 混合产生特殊效果。 - colorBlendMode
颜色混合模式，类似 BoxDecoration 的 backgroundBlendMode。 - excludeFromSemantics
是否启用图像的语义描述。 - filterQuality
图像过滤器的质量级别（使用该属性还没看到效果，后面用到了再研究）。 - fit：
图片的缩放方式，类似 Android 中 ImageView 的 scaleType，可选值有：
BoxFit.none：将图片的内容按原大小居中显示。 BoxFit.contain：将图片的内容完整居中显示，通过按比例缩小或原来的 size 使得图片宽/高等于或小于组件的宽/高，类似 Android 的 centerInside。 BoxFit.cover：按比例放大图片的 size 居中显示，类似 Android 的 centerCrop。 BoxFit.fill：把图片不按比例放大/缩小到组件的大小显示，类似 Android 的 fitXY。 BoxFit.fitHeight：把图片的高按照组件的高显示，宽等比例放大/缩小。 BoxFit.fitWidth：把图片的宽按照组件的宽显示，高等比例放大/缩小。 BoxFit.scaleDown：如果图片宽高大于组件宽高，则让图片内容完全居中显示，此时同 contain，如果图片宽高小于组件宽高，则按图片原大小居中显示，此时同 none。
- centerSlice
该属性用于的中心拉伸，值为一个 Rect 对象，应该就是拉伸区域，我在使用该属性的时候只有当 fit 设置为 contain 和 fill 时才看到了效果，该属性应该也是用于图形变换，不常用。- 使用方法
centerSlice = Rect.fromLTRB(l, t, r, b)
- 使用方法
- gaplessPlayback
当 ImageProvider 发生变化后，重新加载图片的过程中，原图片的展示是否保留。true 表示保留，false 表示不保留，直接空白等待下一张图片加载。 - matchTextDirection
该属性值表示图片的方向是否跟随文字的方向，其实就相当于左右翻转，true 表示翻转，false 表示不翻转，但是要想该属性生效，必须使用 Directionality 组件包裹 Image 组件，如下面代码：
new Directionality(
textDirection: TextDirection.rtl,
child: new Image(
image: new NetworkImage(imgUrl),
matchTextDirection: true,
),
) - repeat:
如果图片没填充满容器的话，图片的重复方式，可选值有：
- ImageRepeat.noRepeat：不重复。
-
ImageRepeat.repeat：X、Y 轴都重复。
-
ImageRepeat.repeatX：只在 X 轴重复。
-
ImageRepeat.repeatY：只在 Y 轴重复。
- ImageRepeat.noRepeat：不重复。
- semanticLabel:
图像的语义描述，类似 Android 中 ImageView 的 contentDescription 属性。
五，示例demo
六，官网地址
原文地址：https://www.cnblogs.com/lxlx1798/p/11060601.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。