flutter-图片控件与三方框架导入

前言

本文主要将图片的加载，加载方式包括本地和网络，同时引用第三方图片缓存框架档案里，顺便介绍三方框架的引入

flutter中类似github的三方仓库地址、国内服务器地址(推荐)

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，其中 AssetImage 继承了 ImageProvider，在一些地方需要用到
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 加载，如下所示

//加载方式1
Image.network("https://img0.baidu.com/it/u=2907855715,3034528164&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500")

//加载方式2 NetworkImage 继承了 ImageProvider
Image(image: 
NetworkImage("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';

使用如下所示

//默认使用
CachedNetworkImage(
    imageUrl: "https://img2.baidu.com/it/u=479460895,312746087&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
)

//带placeholder和错误占位的
CachedNetworkImage(
    imageUrl: "https://img2.baidu.com/it/u=479460895,312746087&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
    placeholder: (context, url) => CircularProgressIndicator(),
    errorWidget: (context, url, error) => Icon(Icons.error),
 ),
 
//带加载指示组件的
CachedNetworkImage(
    imageUrl: "http://via.placeholder.com/350x150",
    progressIndicatorBuilder: (context, url, downloadProgress) => 
            CircularProgressIndicator(value: downloadProgress.progress),
    errorWidget: (context, url, error) => Icon(Icons.error),
 ),

//想对图片进行加工或者装饰可以走imageBuilder
CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,),
      borderRadius: const BorderRadius.all(Radius.circular(6)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),


CachedNetworkImageProvider 继承了 ImageProvider
CachedNetworkImageProvider(url) 
Image(image: CachedNetworkImageProvider(url)) //也可以通过该方法获取widget

注意：如果项目运行到 ios 模拟器或者iphone，卡到了 pod install命令，如果 pod 本身没什么问题，那么可以打开podfile文件，将platform 将前面的#去掉，在尝试即可

最后

这里将三方的导入，fluter社区的地址也贴上了，快来尝试开发吧

也可以测试一下demo，效果还不错