标签：sports 显示 sin circular filter 三方 网络图片 eat 创建
一，概述
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
六，官网地址
标签：sports 显示 sin circular filter 三方 网络图片 eat 创建
原文：https://www.cnblogs.com/lxlx1798/p/11060601.html
