189 8069 5689
Image是一个用于展示图片的组件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。
创新互联专业为企业提供渝北网站建设、渝北做网站、渝北网站设计、渝北网站制作等企业网站建设、网页设计与制作、渝北企业网站模板建站服务，十载渝北做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
Image.asset - 用于从资源目录的显示图片,需要在 pubspec.yaml 文件中声明。
Image.network - 用于从网络上显示图片。
Image.file - 用于从文件里显示图片。
Image.memory - 用于从内存里（Uint8List）显示图片。
alignment → AlignmentGeometry - 图像边界内对齐图像。
centerSlice → Rect - 九片图像的中心切片。
color → Color - 该颜色与每个图像像素混合colorBlendMode。
colorBlendMode → BlendMode - 用于 color 与此图像结合使用。
fit → BoxFit - 图像在布局中分配的空间。
gaplessPlayback → bool - 当图像提供者发生变化时，是继续显示旧图像（true）还是暂时不显示（false）。
image → ImageProvider - 要显示的图像。
matchTextDirection → bool - 是否在图像的方向上绘制图像 TextDirection。
repeat → ImageRepeat - 未充分容器时，是否重复图片。
height → double - 图像的高度。
width → double - 图像的宽度。
加载资源图片需要将图片资源放入工程中，例如：新建images文件夹，将图片放在该文件夹下，图片适配则是使用ios的方式1X，2X，3X：
然后在pubspec.yaml中配置assets：
加载资源/网络/本地文件图片/内存图片：
占位图加载图片：
圆形图片：1.裁剪实现 2.CircleAvatar实现 3.Container边框实现
圆角图片：1.裁剪实现 2.Container边框实现
BoxFit.contain 全图居中显示但不充满，显示原比例
BoxFit.cover 图片可能拉伸，也可能裁剪，但是充满容器
BoxFit.fill 全图显示且填充满，图片可能会拉伸
BoxFit.fitHeight 图片可能拉伸，可能裁剪，高度充满
BoxFit.fitWidth 图片可能拉伸，可能裁剪，宽度充满
BoxFit.scaleDown 效果和contain差不多， 但是只能缩小图片，不能放大图片
下一节学习基础组件之Text
flutter开发中，图片的引用是必不可少的，所以为了提高效率和精准度，我们需要对不同分辨率的手机使用相对应的切图图片，本章介绍如何进行 图片分辨率适配 和 图片批量拓展处理 。
flutter中会首先根据系统的devicePixelRatio（每一个逻辑像素包含多少个原始像素，可以通过MediaQueryData.devicePixelRatio来得到）来找对应倍数的文件夹下的图片，如果没有对应倍数，找最接近的。
所以在flutter项目中，我们需要构建对应的倍数像素文件夹
之后再pubspec.yaml中，配置assets文件后就可以使用了（如使用"assets/images/jay.png"，会自动适配该像素下最接近的jay图片）。
使用flutter-img-sync插件批量化处理，具体操作如下
目前还不能处理gif、webp等格式的图片，而且如果和上边介绍的不同像素比适配方案一起使用的话，由于进行了精准定位，所以指定图片后就不能进行像素适配，这是目前还存在的较大问题，所以目前两者方案只能暂时取一使用。
1、flutter项目中分别创建assets、images文件夹，在images文件夹下创建 2.0x 和 3.0x文件夹，用来分别存放2倍图3倍图。
层级结构如图下图:
2、在pubspec.yaml进行配置 (注意flutter下 assets:与uses-material-design: 层级结构要左对齐否则会报错 点击查看错误展示 )
3、cd 进入 flutter 项目目录下，终端执行 flutter pub get 命令，使配置生效
4、图片使用
Android 利用surface实现Flutter外接纹理
①Java层FlutterRenderer创建SurfaceTexture和textureId。
②将surfaceTexture和textureId通过JNI向引擎层注册
③向引擎注册过程中通过层层方法最后在texture.cc的TextureRegistry由map以键值对形式缓存实例对象。
④将需要显示图片在SurfaceTexture上离屏渲染。
⑤Java层创建的textureId通过Channel传递到Dart层作为Texture组件入参。
⑥Dart的Texture组件接收textureId入参后向下层组件实例化。
⑦在SceneBuilder调用addTexture时执行引擎层创建TextureLayer。
⑧最终在texture.cc中TextureRegistry的map根据TextureId获取SurfaceTexture实例。
使用Native(以Android为例)播放器构建Flutter播放插件
iOS 实现Flutter外接纹理
图片加载过程是由ImageProvider触发的。而ImageProvider表示异步获取图片数据的操作，可以从资源，网络，文件等不同的渠道获取。
首先，ImageProvider根据_ImageState中传递的图片配置生成对应的图片缓存key，然后去ImageCache中查找是否由对应的图片缓存，如果有，通知刷新对应的UI；如果没有通过ImageStream异步加载，加载完成后更新缓存，然后通知_ImageState刷新UI。
ImageCache采用的是LRU（Least Recently Used）