一,概述
Image(图片组件)是显示图像的组件,一个显示图片的widget,支持图像格式:JPEG,PNG,GIF,动画GIF,WebP,动画WebP,BMP和WBMP。 Image组件有多种构造函数:
二,继承关系
三,构造方法
然后需要在 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);
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(‘http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg‘)
有的时候我们需要像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);
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);
四,参数详解
如果图片没有填充满容器的话,图片的对齐方式,值为一个 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 偏移量。
图片的缩放方式,类似 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.fromLTRB(l, t, r, b)
该属性值表示图片的方向是否跟随文字的方向,其实就相当于左右翻转,true 表示翻转,false 表示不翻转,但是要想该属性生效,必须使用 Directionality 组件包裹 Image 组件,如下面代码:
new Directionality(
textDirection: TextDirection.rtl,
child: new Image(
image: new NetworkImage(imgUrl),
matchTextDirection: true,
),
)
如果图片没填充满容器的话,图片的重复方式,可选值有:
ImageRepeat.repeat:X、Y 轴都重复。
ImageRepeat.repeatX:只在 X 轴重复。
ImageRepeat.repeatY:只在 Y 轴重复。
五,示例demo
六,官网地址
原文:https://www.cnblogs.com/lxlx1798/p/11060601.html