Image组件的构造方法
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、网络空间、营销软件、网站建设、海原网站维护、网站推广。
在 Android 中,我们都知道,图片的显示方式有很多,资源图片、网络图片、文件图片等等,在 Flutter 中也有多种方式,用来加载不同形式的图片:
Image:通过ImageProvider来加载图片
Image.asset:用来加载本地资源图片
Image.file:用来加载本地(File文件)图片
Image.network:用来加载网络图片
Image.memory:用来加载Uint8List资源(byte数组)图片
Image 的一个参数是 ImageProvider,基本上所有形式的图片加载都是依赖它,这个类里面就是实现图片加载的原理。用法如下:
加载一个本地资源图片,和 Android 一样,有多种分辨率的图片可供选择,但是沿袭的是 iOS 的图片风格,分为 1x,2x,3x,具体做法是在项目的根目录下创建两个文件夹,如下图所示:
还要配置如下
在pubspec.yaml文件
加载一个本地 File 图片,比如相册中的图片,用法如下
加载一个网络图片,用法如下:
有的时候我们需要像Android那样使用一个占位图或者图片加载出错时显示某张特定的图片,这时候需要用到 FadeInImage 这个组件:
用来将一个 byte 数组加载成图片,用法如下:
Image中三个重要的属性:
alignment:图片的对齐方式
fit:图片的展示方式
repeat:图片平铺方式
圆角图片:第一种方式
圆角图片:第二种方式
一. flutter中我们想加载本地图片,需要两步:
二. flutter项目中本地图片加载的原理
在加载图片时,系统自动会根据屏幕分辨率优先选择到符合自己分配率的文件夹(2.0x或者3.0x或者4.0x)下去取相对应的图片,如果当前文件夹下没有,则会到低一倍的文件夹下去,如果还没有,则继续向更低一倍去取。(比如:iOS 5.5英寸及以上屏幕会优先选择去3.0x下去取图片,如果3.0x不存在或者3.0x文件夹下没有,则去2.0x下取;如果2.0x不存在或者2.0x下没有,则去1.0x下取;1.0x下再没有,则在images文件下取)。
先上图(样式自己调整)
1.新建小部件
根据实际情况修改以下部分内容;
2.使用(index 为当前点击图片的下标,)