flutter Image图片控件-知识点

图片是大家做项目中常用最大控件之一，本篇针对项目中经常用的功能，做些总结。

ImageProvider 是一个抽象类，主要定义了图片数据获取的接口load()，从不同的数据源获取图片需要实现不同的ImageProvider ，如AssetImage是实现了从Asset中加载图片的ImageProvider，而NetworkImage实现了从网络加载图片的ImageProvider。

图片加载方式

主要分为三种形式获取图片：

• Asset
  使用asset之前，需要配置程序内的资源文件，在pubspec.yaml中的flutter部分添加如下内容：

 
Image.asset("images/avatar.png",
  width: 100.0,
)

• File
  在获取file的时候，一定要确保设备已经获取了用户权限-SD卡的读写权限。

 Image.file(File(rootPath + "/DCIM/Camera/ggg.png"),width: 222,height: 222,)

• 网络获取

Image.network(
  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
  width: 100.0,
)

图片填充模式

eg: BoxFit.fill

• fill：会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。
• cover：会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。
• contain：这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
• fitWidth：图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
• fitHeight：图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
• none：图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。
• scaleDown 和contain类同。

圆形图片

第一种：

 ClipOval( // 椭圆形
            child: Image.network(
              "https://dimg03.c-ctrip.com/images/fd/tg/g1/M03/7E/19/CghzfVWw6OaACaJXABqNWv6ecpw824_C_500_280_Q90.jpg",
              width: 144,
              height: 144,
              fit: BoxFit.cover,
            ),
          ),

第二种:

 CircleAvatar(
            radius: 55,
            backgroundImage: NetworkImage(
              "https://dimg03.c-ctrip.com/images/fd/tg/g1/M03/7E/19/CghzfVWw6OaACaJXABqNWv6ecpw824_C_500_280_Q90.jpg",
            ),
          ),

第三种

Container(
  width: 120,
  height: 120,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image: NetworkImage("https://dimg03.c-ctrip.com/images/fd/tg/g1/M03/7E/19/CghzfVWw6OaACaJXABqNWv6ecpw824_C_500_280_Q90.jpg"),
      fit: BoxFit.cover
    )
  )
)

圆角图片

 ClipRRect(
              borderRadius: BorderRadius.circular(8),
              child: Image.network(
                  "https://dimg03.c-ctrip.com/images/fd/tg/g1/M03/7E/19/CghzfVWw6OaACaJXABqNWv6ecpw824_C_500_280_Q90.jpg",
                  width: 120,
                  height: 120
              )
          )

占位图

FadeInImage.assetNetwork(
  placeholder: 'images/avatar.png',
  image: 'https://pic1.zhimg.com/v2-7fab628481a26f025188b095b5cfafbc.jpg',
  width: 200,
  height: 200
)
 

缓存图片

//1、将依赖框架配置到pubspec.yaml文件
dependencies:
  cached_network_image: ^0.7.0

//2、引入相关类
import 'package:cached_network_image/cached_network_image.dart';

//3、使用控件，默认自带图片淡入效果
CachedNetworkImage(
  imageUrl: 'https://pic4.zhimg.com/v2-19dced236bdff0c47a6b7ac23ad1fbc3.jpg',
  width: 200,
  height: 200,
)
 

点击和长按

在flutter里，图片控件没有直接的点击和长按事件，需要借助GestureDetector来实现。

GestureDetector(
            onTap: () => printMsg("onTap"),

            onLongPress: () => printMsg("onLongPress"),
            child: CircleAvatar(
              radius: 55,
              backgroundImage: NetworkImage(
                "https://dimg03.c-ctrip.com/images/fd/tg/g1/M03/7E/19/CghzfVWw6OaACaJXABqNWv6ecpw824_C_500_280_Q90.jpg",
              ),
            ),
          )