电子商务网站设计说明,网站后台登录地址修改,电子商务网站建设需要的语言,如何向百度提交自己的网站大家好#xff0c;我是 17。
在 Flutter 中使用图片是最基础能力之一。17 做了精心准备#xff0c;满满的都是干货#xff01;本文介绍如何在 Flutter 中使用图片#xff0c;尽量详细#xff0c;示例完整#xff0c;包会#xff01;
使用网络图片
使用网络图片超级简…
大家好我是 17。
在 Flutter 中使用图片是最基础能力之一。17 做了精心准备满满的都是干货本文介绍如何在 Flutter 中使用图片尽量详细示例完整包会
使用网络图片
使用网络图片超级简单直接给出网络地址就行本例运行后显示的是一张猫头鹰的图片。 完整代码贴到 main.dart 就能用。后面的代码只给出 image 相关的。 import package:flutter/material.dart;void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});final imageSrc https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04ec6088c3c544a2b9459582e335483c~tplv-k3u1fbpfcp-watermark.image?;overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: Center(child: Image.network(imageSrc)),));}
}
图片加载成功后不管 http 请求头如何都会被缓存起来下次请求这个图片会直接从内存中读取。
一般我们需要指定图片的宽度和高度让它以指定的尺寸显示避免图片过大撑破布局。
Image.network(imageSrc,width: 100,height: 100,)如果提供了 cacheWidth 或 cacheHeight则指示引擎应以指定大小解码图像。无论这些参数如何图像都将根据约束进行渲染。cacheWidth 和 cacheHeight 主要是为了减少 ImageCache 的内存使用。
cacheWidth 和 cacheHeight 是为了优化内存用的如果你能确定网络图片的尺寸都是合适的尺寸就不用设置这两个参数。如果不能保证来源图片的尺寸比如可能有大尺寸的图片最好设置这两个参数。这两个参数只能优化内存占用对下载和解码没有帮助。如果要优化下载需要把图片缓存在磁盘上下次直接从磁盘读取就像 web 缓存那样。
把网络图片缓存到磁盘
我们可以用 cached_network_image 这个插件实现把网络图片缓存到磁盘这个功能。
安装插件
flutter pub add cached_network_image必须的参数只有一个 imageUrl。 MaterialApp(home: Scaffold(body: Center(child: CachedNetworkImage(imageUrl: imageSrc,)),));cached_network_image 自带 fadeIn 的效果在图片加载过程中显示 placeholder出现错误显示 errorWidget。
CachedNetworkImage(imageUrl: imageSrc,placeholder: (context, url) CircularProgressIndicator(),errorWidget: (context, url, error) Icon(Icons.error),)有时我们需要把图片应用到其它 widget 比如用在 BoxDecoration 中这时需要提供 imageProvider。 CachedNetworkImage(imageUrl: imageSrc,imageBuilder: (context, imageProvider) Container(decoration: BoxDecoration(image: DecorationImage(image: imageProvider,fit: BoxFit.cover,colorFilter:ColorFilter.mode(Colors.red, BlendMode.colorBurn)),),),placeholder: (context, url) CircularProgressIndicator(),errorWidget: (context, url, error) Icon(Icons.error),
),还有很多参数可以 在文档中查看
使用 assets 图片
assets 也可以叫做资源。资源是与您的应用程序一起捆绑和部署的文件可在运行时访问。常见的资源类型包括静态数据例如 JSON 文件、配置文件、图标和图像JPEG、WebP、GIF、动画 WebP/GIF、PNG、BMP 和 WBMP。
每个资源都由资源文件所在的显式路径相对于 pubspec.yaml 文件标识。声明资源的顺序无关紧要。包含资源的目录名称无关紧要。
在构建过程中Flutter 将资源放入一个名为资源包的特殊存档中应用程序会在运行时从中读取。
Flutter 使用位于项目根目录的 pubspec.yaml 文件来识别应用程序所需的资源。
资源文件夹的名称是随意的我们可以把资源文件夹放在和 lib 平级的根目录下面为图片建立文件夹 images把上面示例中的猫头鹰图片放入其中。 修改 pubspec.yaml 的配置。
flutter:assets:- images/owl.png注意空格 在代码中可以通过 images/owl.png 使用图片。
Image.asset(images/owl.png,width: 200,height: 200,
);运行成功显示了猫头鹰的图片。当你发布应用程序的时候pubspec.yaml 中配置的图片会和代码一起打包发布。
如果有很多图片这样一张一张注册很是麻烦我们可以直接指定文件夹。比如我们可以一次性注册 images 文件夹下面的所有图片。
flutter:assets:- images/适配浅色与深色模式
正常情况下我们用的是浅色模式在弱光环境下打开深色模式可获得出色的视觉体验。
构建过程支持资源变体的概念可以在不同上下文中显示资源的不同版本。当在 pubspec.yaml 中指定资源路径时构建过程会在相邻子目录中查找任何具有相同名称的文件。然后此类文件与指定资源一起包含在资源包中。
在 images 下面增加 dark 文件夹增加在深色模式下使用的与浅色文件同名的图片。17 的电脑屏幕截图 适配浅色与深色模式的工作就完成了
images/owl.png 和 images/dark/owl.png 都包含在您的资源包中。前者被视为主要资源而后者被视为变体。在浅色模式下Flutter 为我们显示显示 images/owl.png 在深色模式下显示 images/dark/owl.png。
在不同的设备使用不同分辨率的图片
Flutter 可以根据当前设备像素比加载分辨率合适的图像。
在 image 文件夹下增加 2.0x3.0x文件夹放入同名的高分辨率的图片。17 的电脑屏幕的截图 1.5x 文件夹也是合法的。 适合不同设备分辨率的工作就完成了
images/2.0x/owl.png 和 images/3.0x/owl.png 都包含在您的资源包中都被视为变体。 flutter 会自动为我们在 dpr 为 2 的设备上使用 images/2.0x/owl.png 在 dpr 为 3 的设备上使用 images/3.0x/owl.png在 dpr 为 1 设备上使用 images/owl.png。 images/owl.png 相当于是 images/1.0x/owl.png。 dpr 为设备分辨率device pixel ratio英文单词的首字母 还是一样的代码现在可以适配不同 dpr 的设备
Image.asset(images/owl.png,width: 200,height: 200,
);关于设备 dpr 不完全匹配的处理
Flutter 以 dpr 2.0 为界采用不同的处理方案目的是为了得到更好的体验。
2.0 以下的设备匹配分辨率更高的图片2.0 以上的设备匹配分辨率最接近的图片
比如有一个 dpr 为 1.25 的设备会采用 2.0 的图片而不是 1.0的图片。再比如有一个 dpr 为 2.25 的设备会采用 2.0 的图片而不会采用 3.0 的图片。
忽略 dpr 信息
如果要忽略 dpr 信息直接读取主资源就是不带 x.0路径的那个用 ExactAssetImage。可以指定 scale默认为 1.0。
如果 scale 为 2.0则意味着每个逻辑像素对应四个图像像素。看下实际的效果就明白了。 Column(mainAxisSize: MainAxisSize.min,children: [Image(image: ExactAssetImage(images/owl.png, scale: 5)),Image(image: ExactAssetImage(images/owl.png, scale: 10)),],)scale 越大图片显示的越小因为 scale 越大每个逻辑像素对应的图像像素就越多。 逻辑像素也叫 设备独立像素(device independent pixels)简称 dip 与具体设备无关。 使用相册图片
先安装插件
flutter pub add image_picker使用相册图片需要两步
使用 image_picker 插件从相册中读取图片使用 Image.file 展示图片
class MyWidget extends StatefulWidget {const MyWidget({super.key});overrideStateMyWidget createState() _MyWidgetState();
}class _MyWidgetState extends StateMyWidget {final _picker ImagePicker();File? _file;overrideWidget build(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.center,children: [ElevatedButton(onPressed: () async {var xfile await _picker.pickImage(source: ImageSource.gallery,maxWidth: 200,maxHeight: 300,requestFullMetadata: false);if (xfile ! null) {setState(() {_file File(xfile.path);});}},child: const Text(从相册中选择图片)),if (_file ! null) Image.file(_file!)],);}
}
maxWidth 和 maxHeight 最好设置一下从源头上控制一下图片的大小提高效率。如果这里没控制大小就必须让 Image.file 加上 cacheWidthcacheHeight参数因为用 Image.file 显示的图片也会缓存起来需要控制缓存的图片大小减少内存消耗。
requestFullMetadata: false 是为了避免 ios 闪退。requestFullMetadata: false 表示要请求完整的 metadata需要在 info.plist ios / Runner 下面 中申请权限。
打开 info.plist 的 dict 中加入如下内容就可以了。
keyNSPhotoLibraryUsageDescription/key
stringAPP需要您的同意才能使用相册以便于上传发布照片/stringandroid 不需要申请权限。
使用相机拍摄的图片
和使用相册图片步骤一样有两点不同
source: ImageSource.gallery 修改为 source: ImageSource.camera申请相机的权限
android 不需要申请权限直接可以使用相机ios 需要 打开 info.plist 在 dict 中加入如下内容
keyNSCameraUsageDescription/key
stringAPP需要您的同意才能使用摄像头以便于相机拍摄上传、发布照片/string使用内存图片
Image.memory 的必选参数 bytes 是 Uint8List 类型base64Decode 的返回值正好是 Uint8List我们用 Image.memory 展示一下 base64 格式的图片。
我们得到的 base64格式的图片可能是这样的
imageString image/jpeg;base64,/9j/4AA...把 image/jpeg;base64, 删除只保留后面的数据这样才能正常显示。
引用 dart:convert 把 imageString 用 base64Decode 转成 Uint8List 类型Image.memory 就能显示了。
import dart:convert;
Image.memory(base64Decode(imageString));图片用做装饰
DecoratedBox 是专门用来做装饰的 widget
DecoratedBox(decoration: BoxDecoration(image: DecorationImage(image: AssetImage(images/owl.png)),),child: SizedBox(width: 100,height: 100,),)更多时候我们可以用 Container。
Container(width: 100,height: 100,decoration: BoxDecoration(image: DecorationImage(image: AssetImage(images/owl.png))),)DecorationImage 的 image 参数类型是 ImageProviderImageProvider 的子类都可以用作参数。除了 AssetImage还可以用 FileImageMemoryImageNetworkImage。
图片预加载
在网页中的轮播图中我们一般都会做图片的预加载用 js 预加载图片避免图片在轮播时无法显示。Flutter 中也有轮播图我们也可以做类似的事情。
和 js 预加载一样Flutter 预加载图片也是很简单的。
preload(BuildContext context) {var configuration createLocalImageConfiguration(context);for (var src in [图片地址1, 图片地址2, 图片地址13]) {NetworkImage(src).resolve(configuration);}}图片什么时候加载完成不用管。Flutter 会用 NetWorkImage 做 key缓存图片下次用 NetworkImage 加载同样的图片无论是否加载完成都不会再次加载。
resolve 的作用就是把加载的工作提前执行。
判断两个 NetWorkImage 相同需要 urlscale 都相同所以如果如果 scale 不同会触发重新加载。 bool operator (Object other) {if (other.runtimeType ! runtimeType) {return false;}return other is NetworkImage other.url url other.scale scale;}centerSlice
centerSlice 用来切 9图的。比如下面这张图片我们用 9 图的方式来切图。 这张图是300 x 300 的图把它显示成 400 x 400。我们把它分成 9 个区域。
区域 5 会被垂直水平拉伸区域 46 被垂直拉伸区域 28 被水平拉伸1379 保持原样 Column(mainAxisSize: MainAxisSize.min,children: [Image.asset(images/btn.png,width: 300,height: 300,fit: BoxFit.fill,),Image.asset(images/btn.png,centerSlice: Rect.fromLTRB(100, 100, 200,200),width: 400,height:400,scale: 1,)],
);根据 9 图的特性我们可以把按钮的背景图做 9 图用来容纳可变化的字数也可以把聊天用的气泡做成 9 图。
centerSlice 只能放大不能缩小。
原图是 300 x 300 centerSlice 处理后的图只能是宽比 300 大高也比300 大否则报错。
全局缓存 ImageCache 的设置
ImageCache 有两个属性
maximumSize 可以获取和设置可以缓存的图片的最大数量默认 1000 张。maximumSizeBytes 可以获取和设置可以缓存的图片的最大容量默认 100M。
既然这两个属性可以让我们设置就说明在有的时候这两个属性的默认值是不合适的。我们可以通过 PaintingBinding.instance.imageCache 拿到全局 ImageCache 的实例通过PaintingBinding.instance.imageCache.currentSize 监控一下当前已经缓存的图片数量如果经常达到最大值说明默认值太小可以设置的更大些。
maximumSize 设置的数量调高需要考虑到硬件的承受能力。如果硬件条件差反而会适得其反。这个时候非但不能加大设置还需要减小设置。
图片类之间的关系
如果只是想会用 Flutter Image上面的内容就够用了可以跳过后面的内容。
上面讲了很多都是零散的涉及到的类很多难免有混乱之感所以需要对他们之间的关系梳理一下。
Image widget 是直接给我们用的。抛开那些命名构造函数如果我们直接用 Image只有一个必须的参数 imageimage 类型是 ImageProvider。
ImageProvider
abstract class ImageProviderT {ImageStream resolve(ImageConfiguration configuration) {// 省略}Futurebool evict({ ImageCache cache,ImageConfiguration configuration ImageConfiguration.empty }) async {// 省略}FutureT obtainKey(ImageConfiguration configuration); protectedImageStreamCompleter load(T key); // 需子类实现
}
obtainKey(ImageConfiguration) 方法
该接口主要是为了配合实现图片缓存不同的 key 代表不同的图片数据缓存。ImageProvider 从数据源加载完数据后会在全局的 ImageCache 中缓存图片。
resolve(ImageConfiguration) 方法
ImageStream resolve(ImageConfiguration configuration) {... //省略final ImageStream stream ImageStream();T obtainedKey; ////定义错误处理函数Futurevoid handleError(dynamic exception, StackTrace stack) async {... //省略stream.setCompleter(imageCompleter);imageCompleter.setError(...);}// 创建一个新Zone为了当发生错误时不会干扰 MainZonefinal Zone dangerZone Zone.current.fork(...);dangerZone.runGuarded(() {FutureT key;// 先验证是否已经有缓存try {// 生成缓存key后面会根据此key来检测是否有缓存key obtainKey(configuration);} catch (error, stackTrace) {handleError(error, stackTrace);return;}key.thenvoid((T key) {obtainedKey key;// 缓存的处理逻辑final ImageStreamCompleter completer PaintingBinding.instance.imageCache.putIfAbsent(key, () load(key), onError: handleError);if (completer ! null) {stream.setCompleter(completer);}}).catchError(handleError);});return stream;
}resolve 是 ImageProvider 对外暴露的主要方法我们可以调用这个方法来加载图片Image Widget 也是调用这个方法加载图片。
要从 ImageProvider 获取 ImageStream调用 resolve 并向其传递一个 ImageConfiguration 对象。 ImageProvider 通过 obtainKey 获得 Key 并使用全局的 imageCache 缓存图片。
类型参数 T 是用于表示已解析配置的对象的类型。这也是图像缓存中用于键的类型。它应该是不可变的并实现 运算符和 hashCode getter。
AssetBundleImageProviderFileImageMemoryImageNetworkImage
这四个都是 ImageProvider 的子类AssetBundleImageProvider 又有两个子类AssetImage 和 ExactAssetImage这两个和 FileImageMemoryImageNetworkImage 都可以直接给 image 参数赋值。
比如我们要读取 owl.png Image(image: AssetImage(image/owl.png),);Image.asset(image/owl.png);这两种都能显示 owl.png。那么有什么区别呢我们看下 Image.asset 构造函数的源码
Image.asset(String name, {省略...}) : image ResizeImage.resizeIfNeeded(cacheWidth,cacheHeight,scale ! null? ExactAssetImage(name, bundle: bundle, scale: scale, package: package): AssetImage(name, bundle: bundle, package: package),),省略...;Image.asset 构造函数为我们创建了 ImageProvider。
如果 scale 不为空创建 ExactAssetImage否则创建 AssetImage用 ResizeImage.resizeIfNeeded 包起来。
ResizeImage.resizeIfNeeded 执行下面的逻辑如果 cacheWidthcacheHeight 同时为空直接返回原 ImageProvider否则返回 ResizeImage。
static ImageProviderObject resizeIfNeeded(int? cacheWidth, int? cacheHeight, ImageProviderObject provider) {if (cacheWidth ! null || cacheHeight ! null) {return ResizeImage(provider, width: cacheWidth, height: cacheHeight);}return provider;
}ResizeImage 在放进缓存之前会根据 cacheWidthcacheHeight 对图片做优化这对于减少内存开销有帮助。
从以上可以看出没有特殊需要我们都使用 Image.asset、Image.network、Image.file、age.memory这四个命名构造函数。
ImageProvider 的子类还有一个 ScrollAwareImageProvider RawImage 会调用他避免在快速滚动时加载图像。我们一般不需要直接使用他。
本文到这里就结束了谢谢观看
