前言
本文主要将图片的加载,加载方式包括本地
和网络
,同时引用第三方图片缓存框架档案里,顺便介绍三方框架的引入
demo地址(内容在loadImage文件夹中,可以替换main中注释尝试效果)
本地图片加载
本地图片的加载,加载之前,先介绍图片的导入与路径配置工作
第一步
:创建一个存放图片的目录,放到与 ios、android
同级目录即可,一般为 images
或 assets
第二步
:打开pubspec.yaml
文件,在 assets
取消注释在下面,按照下面格式导入路径名称(可以通过拖拽到终端截取),配置如下所示(看了下图可能已经知道怎么加载android、ios中的资源图片了)
如果运行失败,可以尝试点击pubspec.yaml
文件内容的右上方 Pub get
或者 Pub upgrade
使用 Image.asset
加载本地图片,代码如下所示
//推荐
Image.asset("images/WechatIMG21002.jpeg")
//加载方式2
Image(image: AssetImage('images/WechatIMG21002.jpeg'))
复制代码
加载android和ios中的资源文件
和普通的本地资源文件加载方式一样,只不过先找到他们的资源路径位置
android
的资源位置: android/app/src/main/res
ios
的资源位置: ios/Runner/Assets.xcassets
然后配置到 pubspec.yaml
文件中,如下所示(可能看了前面的图片配置大家就猜到了)
然后使用 Image.asset
加载,实现如下所示
//加载android的资源图片
Image.asset("android/app/src/main/res/mipmap-mdpi/ic_launcher.png")
//加载一个ios的资源图片
Image.asset("ios/Runner/Assets.xcassets/logo.imageset/logo.png")
复制代码
网络图片加载
网络图片加载则省去了本地图片的加载步骤,直接使用 Image.network
加载,如下所示
Image.network("https://img0.baidu.com/it/u=2907855715,3034528164&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500")
复制代码
顺便介绍下FadeInImage
,其为渐变式显示网络图片,即:下载完毕后,采用渐变的方式显示图片,可以李继伟为透明度改变的方式显示图片,使图片显示没那么突兀了(个人感觉也就那样吧,还是直接显示来的爽快)
FadeInImage.assetNetwork(
placeholder: "images/WechatIMG21002.png", //预览图
fit: BoxFit.fitWidth, //自适应宽度
height: 140, //可以设置高度
image: "https://img0.baidu.com/it/u=2907855715,3034528164&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500",
),
复制代码
三方安装以及图片缓存控件使用
图片的缓存框架我们使用 cached_network_image
框架,并以它的导入步骤作为案例演示
执行下面命令即可导入,导入后的依赖也会被放到 pubspec.yaml
中
flutter pub add cached_network_image
复制代码
导入后的依赖也会被放到 pubspec.yaml
中,可以在 pubspec.yaml
文件中,更改自己想要的版本号,如果提示运行问题,可以在该文件上面点击 Pub get
或 Pub upgrade
更新环境
pubspec.yaml
中的依赖如下所示,可以根据情况更改版本号,然后点击右上角 Pub upgrade
即可
dependencies:
cached_network_image: ^3.2.0
复制代码
导入到工程后,项目文件 import 如下所示(使用系统提示导入更便捷)
import 'package:cached_network_image/cached_network_image.dart';
复制代码
注意:如果项目运行到 ios 模拟器
或者iphone
,卡到了 pod install
命令,如果 pod 本身没什么问题,那么可以打开podfile
文件,将platform
将前面的#
去掉,在尝试即可
最后
这里将三方的导入,fluter社区
的地址也贴上了,快来尝试开发吧