Flutter初学之路—`Image` （图片组件）

Image（图片组件）用来显示图像的组件，提供了多个构造函数：

• new Image：从ImageProvider获取图像；
• new Image.asset：加载资源图片；
• new Image.network：加载网络图片；
• new Image.file：加载本地图片文件；
• new Image.memory：加载Unit8List资源图片。

图片组件支持以下格式图片：JPEG、PNG、动图GIF、WebP、动图WebP、BMP和WBMP。
若要自动执行像素密度感知有用的分辨率，需使用AssetImage指定图像，并确保在组件树中的图像组件上方存在MaterialApp、WidgetsApp或MediaQuery组件。
图像是使用paintImage绘制的，其更详细的描述了该类中各个字段的含义。
参考：

• Icon：显示来自字体的图像；
• new lnk.image：这是在一个material application中显示图像的首选方法（特别是当图像位于一个Material中并且上边还存在InkWell时）。

继承

Object > Diagnosticable > DiagnosticableTree > Widget > StatefulWidget > Image

构造函数

• 从ImageProvider获取图像：

Image({
    Key key,  //图像组件的唯一标识符
    @required ImageProvider image,//要显示的图像
    String semanticLabel,//图像的语义描述
    bool excludeFromSemantics:false,  //是否将此图像从语义中排除
    double width,//设置图像宽度
    double height,//设置图像高度
    Color color,  //如果非空，则使用`colorBlendMode`将此颜色与图像每个像素混合
    BlendMode colorBlendMode,  //用于将颜色与此图像结合
    BoxFit fit,  //如何在布局过程中将图像嵌入到分配的空间中
    AlignmentGeometry alignment: Alignment.center,//如何在其范围内对齐图像
    ImageRepeat repeat: ImageRepeat.noRepeat,//图像的平铺模式
    Rect centerSlice,    //9块图像的中心切片
    bool matchTextDirection: false,//是否按照`TextDirection`的方向绘制图像
    bool gaplessPlayback: false,//当图像提供程序更改时，是否继续显示旧图像（True），或短暂显示空（False）
    FilterQuality filterQuality: FilterQuality.low,//用于设置图像的FilterQuality
  })

• 加载资源图片

  Image.asset(String name, {
    Key key,
    AssetBundle bundle,//应用程序使用的资源合集
    String semanticLabel,
    bool excludeFromSemantics: false,
    double scale,
    double width,
    double height,
    Color color,
    BlendMode colorBlendMode,
    BoxFit fit,
    AlignmentGeometry alignment: Alignment.center,
    ImageRepeat repeat: ImageRepeat.noRepeat,
    Rect centerSlice,
    bool matchTextDirection: false,
    bool gaplessPlayback: false,
    String package,
    FilterQuality filterQuality: FilterQuality.low,
  })

• 加载网络图片

  Image.network(String src, {
    Key key,
    double scale = 1.0,
    String semanticLabel,
    bool excludeFromSemantics: false,
    double width,
    double height,
    Color color,
    BlendMode colorBlendMode,
    BoxFit fit,
    AlignmentGeometry alignment: Alignment.center,
    ImageRepeat repeat: ImageRepeat.noRepeat,
    Rect centerSlice,
    bool matchTextDirection: false,
    bool gaplessPlayback: false,
    FilterQuality filterQuality: FilterQuality.low,
    Map<String, String> headers,
  })

• 加载本地图片文件

  Image.file(File file, {
    Key key,
    double scale = 1.0,
    String semanticLabel,
    bool excludeFromSemantics: false,
    double width,
    double height,
    Color color,
    BlendMode colorBlendMode,
    BoxFit fit,
    AlignmentGeometry alignment: Alignment.center,
    ImageRepeat repeat: ImageRepeat.noRepeat,
    Rect centerSlice,
    bool matchTextDirection: false,
    bool gaplessPlayback: false,
    FilterQuality filterQuality: FilterQuality.low,
  })

• 加载Unit8List资源图片

  Image.memory(Uint8List bytes, {
    Key key,
    double scale = 1.0,
    String semanticLabel,
    bool excludeFromSemantics: false,
    double width,
    double height,
    Color color,
    BlendMode colorBlendMode,
    BoxFit fit,
    AlignmentGeometry alignment: Alignment.center,
    ImageRepeat repeat: ImageRepeat.noRepeat,
    Rect centerSlice,
    bool matchTextDirection: false,
    bool gaplessPlayback: false,
    FilterQuality filterQuality: FilterQuality.low,
  })

属性

属性名	类型	说明
key	Key	图像组件的唯一标识符
alignment	AlignmentGeometry	如何在其范围内对齐图像
centerSlice	Rect	9块图像的中心切片
color	Color	如果非空，则使用colorBlendMode将此颜色与图像每个像素混合
colorBlendMode	BlendMode	用于将颜色与此图像结合
excludeFromSemantics	bool	是否将此图像从语义中排除
filterQuality	FilterQuality	用于设置图像的FilterQuality
fit	BoxFit	如何在布局过程中将图像嵌入到分配的空间中
gaplessPlayback	bool	当图像提供程序更改时，是否继续显示旧图像（True），或短暂显示空（False）
height	double	设置图像高度
width	double	设置图像宽度
image	ImageProvider	要显示的图像
matchTextDirection	bool	是否按照TextDirection的方向绘制图像
repeat	ImageRepeat	图像的平铺模式
semanticLabel	String	图像的语义描述
hashCode	int	哈希码
runtimeType	Type	对象运行时类型的表示形式

方法：

方法名	类型	说明
createState()	_ImageState	在树中的给定位置为这个组件创建可变状态
debugFillProperties(DiagnosticPropertiesBuilder properties)	void	添加与节点相关联的其他属性
createElement()	StatefulElement	创建一个StatefulElement来管理这个组件在树中的位置
debugDescribeChildren()	List<DiagnosticsNode>	返回描述词节点子节点的diagnostics节点对象列表
noSuchMethod(Invocation invocation)	dynamic	当访问不存在的方法或属性时调用
toDiagnosticsNode({String name, DiagnosticsTreeStyle style})	DiagnosticsNode	返回由使用调试工具和DiagnostisNode.toStringDep的对象的调试表示形式
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug})	String	返回此对象的字符串表示形式
toStringDeep({String prefixLineOne:'', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug})	String	返回子节点和它的子节点的字符串表示形式
toStringShallow({Sting joiner:',', DiagnosticLevel minLevel:DiagnosticLevel.debug})	String	返回对象的一行详细说明
toStringShort()	String	对组件简短的文本描述

---

参考文档：Image class