图片组件（Image）

图片组件（Image）是显示图像的组件，Image组件有多重构造函数：

new Image：从ImageProvidrer获取图像。

new Image.asset：加载资源图片。

new Image.file：加载本地图片文件。

new Image.network：加载网络图片。

new Image.memory：加载Uint8List资源图片。

 

Image组件常见属性如下：

属性名	类型	说明
image	ImageProvider	抽象类，需要自己实现获取图片数据的操作。
width/height	double	Image显示区域的宽度和高度设置，这里需要把Image和图片两个东西区分开，图片本身有大小，Image Widget是图片的容器，本身也有大小。宽度和高度的配置经常和fit属性配合使用
fit	BoxFit	图片填充模式，具体取值见下一个表
color	Color	图片颜色
colorBlendMode	BlendMode	在对图片进行手动处理的时候，可能用到图层混合，如改变图片的颜色。此属性可以对颜色进行混合处理。有多种模式
alignment	Alignment	控制图片的摆放位置，比如图片放置在右下角为Alignment.bottomRight
repeat	ImageRepeat	此属性可以设置图片重复模式。noRepeat为不重复，Repeat为x和y方向重复，repeatX为x方向重复，repeatY为y方向重复
centerSlice	Rect	当图片需要被拉伸显示时，centerSlice定义的矩形区域会被拉伸，可以理解成我们在图片内部定义一个点9个点文件用作拉伸，9个点为“上”“下”“左”“右”“上中”“下中”“左中”“右中”“正中”
matchTextDirection	bool	matchTextDirection与Directionality配合使用。TextDirection有两个值分别为：TextDirection.ltr从左向右展示图片，TextDirection.rtl从右向左展示图片
gaplessPlayback	bool	当ImageProvider发生变化后，重新加载图片的过程中，原图片的展示是否保留。值为true则保留；值为false则不保留，直接空白等待下一张图片加载

 

BoxFit取值及描述参见表：

取值	描述
BoxFit.fill	全图显示，显示可能拉伸，充满
BoxFit.contain	全图显示，显示原比列，不需充满
BoxFit.cover	显示可能拉伸，肯能裁剪，充满
BoxFit.fitWidth	显示可能拉伸，肯能裁剪，宽度充满
BoxFit.fitHeight	显示可能拉伸，肯能裁剪，高度充满
BoxFit.none	原始大小
BoxFit.scaleDown	效果和BoxFit.contain差不多，但是此属性不允许显示超过源图片大小，即可小不可大

 

1. 本地图片

Image.asset加载项目资源包的图片

 

//先将图片拷贝到项目 images 目录中，然后在 pubspec.yaml文件配置文件相对路径到 assets

Image.asset(

'images/cat.jpg',

width: 200,

height: 200,

)

Image.file加载手机内置或外置存储的图片

 

//加载Android平台的外置存储图片需要AndroidManifest.xml配置android.permission.READ_EXTERNAL_STORAGE权限

Image.file(

File('/0/images/cat.jpg'),

width: 200,

height: 200,

)

 

2. 网络图片

Image.network无本地缓存

 

Image.network(

'https://pic4.zhimg.com/v2-19dced236bdff0c47a6b7ac23ad1fbc3.jpg',

width: 200,

height: 200,

)

FadeInImage.assetNetwork淡入效果，无本地缓存

 

FadeInImage.assetNetwork(

placeholder: 'images/avatar.png',

image: 'https://pic1.zhimg.com/v2-7fab628481a26f025188b095b5cfafbc.jpg',

width: 200,

height: 200

)

 

CachedNetworkImage第三方控件，有本地缓存和淡入效果

 

//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,

)

圆形头像

方式1: CircleAvatar
CircleAvatar(
  //头像半径
  radius: 60,
  //头像图片 -> NetworkImage网络图片，AssetImage项目资源包图片, FileImage本地存储图片
  backgroundImage: NetworkImage(
    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'
  ),
)
方式2: ClipOval
ClipOval(
  child: Image.network(
    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
    width: 120,
    height: 120,
    fit: BoxFit.cover,
  ),
)

方式3: Container + BoxDecoration
Container(
  width: 120,
  height: 120,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'),
      fit: BoxFit.cover
    )
  )
)

 圆角图片

方式1: ClipRRect
ClipRRect(
  borderRadius: BorderRadius.circular(8),
  child: Image.network(
    'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
    width: 120,
    height: 120
  )
)
方式2: Container + BoxDecoration
Container(
  width: 120,
  height: 120,
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(8),
    image: DecorationImage(
      image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
    )
  )
)

 各种形状

使用ShapeDecoration可以做出各种形状

斜切角: BeveledRectangleBorder
圆角: RoundedRectangleBorder
超椭圆: SuperellipseShape
体育场: StadiumBorder
圆形: CircleBorder
//斜切角形状示例
Container(
  width: 120,
  height: 120,
  decoration: ShapeDecoration(
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(16)
    ),
    image: DecorationImage(
      fit: BoxFit.cover,
      image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
    )
  )
)