Flutter 学习 - Widget 之 Image和Icon

前言

前面的文章中我们介绍了文字展示Widget，在实际的开发中我们不仅仅只会用文字进行内容展示，还会用到很直观的内容控件 - 图片，在Flutter中图片的展示Widget有两个：Image和Icon，下面我们来逐个介绍这两个Widget。

1、使用 - Image

加载本地资源

• 在Flutter工程的根目录下创建一个images目录(名字可以随意，images比较直观)，然后将你需要展示的图片添加到这个目录下，如图
• 打开pubspec.yml，在flutter中添加图片的配置信息:如果只是添加一张图片：

flutter:
  uses-material-design: true
  assets:
    - images/flutter_demo.jpeg

或者我们有多张图片要添加的时候可以把整个目录配置上，就不需要一张张的添加图片了

flutter:
  uses-material-design: true
  assets:
    - images/

注：这里一定要注意一点，此处有深坑

填坑：这里需要注意assets的缩进位置，一定要在flutter:的下级，切记切记！！！

• 在代码中使用的时候就只需要传如图片的路径就可以了：

Image.asset(
    "images/flutter_demo.jpeg",
),

效果如下

源码分析

下面来看下Image的源码，可以看到，Image一共提供了5种构造函数，除了默认的，还有其他4种命名构造函数，我们在实际使用时一般使用的是后面4种命名构造函数，也代表了不同的图片来源：

class Image extends StatefulWidget {
   final ImageProvider image;
  const Image({ 
    @required this.image,
    ...
  }) : assert(image != null),
        ...;
/**
 * 从网络加载显示图片 这里需要传入图片的地址 src
 */
  Image.network(
    String src, {
    ...
  }) : image = NetworkImage(src, scale: scale, headers: headers),
       ...;
  /**
 * 从本地文件加载显示图片，这里需要传入图片的本地地址
 */  
  Image.file(
    File file, {
    ...
  }) : image = FileImage(file, scale: scale),
      ...;
 /**
 * 从Flutter 项目的资源文件里加载显示图片
 * 这里需要传入Flutter 项目图片资源文件的路径及图片名字（在.yaml中声明的）
 */     
  Image.asset(
    String name, {
    ...
  }) : image = scale != null
         ? ExactAssetImage(name, bundle: bundle, scale: scale, package: package)
         : AssetImage(name, bundle: bundle, package: package),
      ...;
  /**
 * 从内存加载显示图片，
 * 这里需要传入图片的bytes数据，类型是Uint8List
 */    
  Image.memory(
    Uint8List bytes, {
    ...
  }) : image = MemoryImage(bytes, scale: scale),
        ...;
       
}

下面来看下5个构造函数中的参数，这5个构造函数，参数略有差异，但是大部分相同，我们先看下相同的部分，这些参数都是可选的

参数名字	参数类型	参数含义
key	Key	Widget 的标识
scale	double	图形显示的比例
semanticsLabel	String	给 Image 加上一个语义标签
width	double	图片的宽
height	double	图片的高
matchTextDirection	bool	图片的绘制方向，true:从左往右，false:从右往左
gaplessPlayback	bool	当图像提供者更改时，true：继续显示旧图像，false：简单地显示任何内容
excludeFromSemantics	bool	是否将图像从语义中排除，用于不提供有意义信息的图像
color	Color	图片的混合色值
colorBlendMode	BlendMode	图片与颜色的混合模式
fit	BoxFit	用于在图片的显示空间和图片本身大小不同时指定图片的适应模式
alignment	Alignment	图片的对齐方式
repeat	ImageRepeat	当图片本身大小小于显示空间时，指定图片的重复规则
centerSlice	Rect	在这个矩形范围内的图片会被当成.9的图片
filterQuality	FilterQuality	设置图片的过滤质量
frameBuilder	ImageFrameBuilder	可以使用这个构建器添加动效（如淡入效果）或者占位符
loadingBuilder	ImageLoadingBuilder	图片加载的进度构建器

下面来看看其他命名构造函数中的额外字段

• Image

const Image({
    @required this.image,//需要展示的图片资源
  }) 

• Image.network

Image.network(
    String src, { //图片的URL地址
    Map<String, String> headers,//用于在图像请求的时候发送自定义Http header 
  })

• Image.file

Image.file(
    File file, {//需要展示的手机中的图片文件，注意在Android上运行时需要添加"android.permission.READ_EXTERNAL_STORAGE"权限
  })

-Image.asset

Image.asset(
    String name, {//项目中资源文件的图片路径
    AssetBundle bundle,//加载资源功能类
    String package, //使用包中的资源文件的时候这个参数不能为空，需要把对应的包名加上
  }) 

• Image.memory

Image.memory(
    Uint8List bytes, {//这里需要传入图片的bytes数据，类型是Uint8List
  })

接下来我们来看看在加载图片的时候有用到哪些新的数据类型（只说几个常用的）

• BoxFit ：用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。

enum BoxFit {
  fill,//会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。
  contain,//会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。
  cover,//这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。
  fitWidth,//图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
  fitHeight,//图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。
  scaleDown,//对齐目标框内的源（默认情况下，居中），并在必要时缩小源以确保源适合框内。这与contains相同，如果这会缩小图像，否则它与none相同。
  none,//图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分
}

• Alignment ：图片的对齐方式

class Alignment extends AlignmentGeometry {
   ///左上对齐
  static const Alignment topLeft = Alignment(-1.0, -1.0);
  ///上部居中对齐
  static const Alignment topCenter = Alignment(0.0, -1.0);
  ///右上对齐 
  static const Alignment topRight = Alignment(1.0, -1.0);
  ///中间居左对齐 
  static const Alignment centerLeft = Alignment(-1.0, 0.0);
  /// 中间对齐
  static const Alignment center = Alignment(0.0, 0.0);
  ///中间居右对齐 
  static const Alignment centerRight = Alignment(1.0, 0.0);
  ///左下对齐 
  static const Alignment bottomLeft = Alignment(-1.0, 1.0);
  ///底部居中对齐
  static const Alignment bottomCenter = Alignment(0.0, 1.0);
  /// 右下对齐
  static const Alignment bottomRight = Alignment(1.0, 1.0);
}

• ImageRepeat：当图片本身大小小于显示空间时，指定图片的重复规则。

enum ImageRepeat {
  repeat,//在x和y轴上重复图像，直到填充满空间。
  repeatX,//在x轴上重复图像，直到填充满空间。
  repeatY,//在y轴上重复图像，直到填充满空间。
  noRepeat,//不重复
}

• FilterQuality：设置图片的过滤质量

enum FilterQuality {
  none,//最快的过滤。
  low,//比none的过滤质量好，但是比none的时间要长。
  medium,//比low的过滤质量好，但是也比low的时间要长
  high,//过滤质量最高，但也最慢
}

2、使用 - Icon

• 单独使用

 Icon(
     Icons.android,
 )

效果如下：

• 添加颜色

Icon(
     Icons.android,
     color: Colors.blue,
 )

效果如下：

• 改变图标大小

Icon(
     Icons.android,
     color: Colors.blue,
     size: 150.0,
 )

效果如下：

Icon源码分析

const Icon(
    this.icon, {//所要展示的icon数据，类型为IconData
    Key key,//Widget 的标识	
    this.size,//double 类型，icon的大小	
    this.color,//icon的颜色	类型为Color
    //String类型，给 Image 加上一个语义标签没有实际用处
    this.semanticLabel,
    this.textDirection,//Icon的绘制方向	类型为TextDirection	
  }) : super(key: key);

结尾

截止到这里Image和Icon就介绍完了。
以下是我的Flutter系列的链接，后续会持续更新，欢迎大家指正。

Flutter 系列文章

• Flutter 学习 - 开篇
• Flutter 学习 - 基础框架
• Flutter 学习 - 网络请求和数据解析
• Flutter 学习 - Widget 之 Text
• Flutter 学习 - Widget 之 RichText
• Flutter 学习 - Widget 之 Image和Icon

更多关于技术相关的内容请关注博主公众号–迷途程序猿