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

2019-04-26 本文已影响17人白晓明

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

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

猜你喜欢

热点阅读