首页 > 其他 > 详细

Flutter学习】基本组件之图片组件Image

时间:2019-06-20 19:06:14      阅读:75      评论:0      收藏:0      [点我收藏+]

标签:sports   显示   sin   circular   filter   三方   网络图片   eat   创建   

一,概述
  Image(图片组件)是显示图像的组件,一个显示图片的widget,支持图像格式:JPEG,PNG,GIF,动画GIF,WebP,动画WebP,BMP和WBMP。 Image组件有多种构造函数:

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

二,继承关系

  • Object > Diagnosticablet > DiagnosticableTreet > Widgett > StatefulWidgett > Image

三,构造方法

  • new Image: 从ImageProvider获取图像。
    • 类名构造方法,它指定了图片是从哪里加载,是从项目中还是网络中等等。  
      const Image({
      Key key,
      @required this.image,
      this.frameBuilder,
      this.loadingBuilder,
      this.semanticLabel,
      this.excludeFromSemantics = false,
      this.width,
      this.height,
      this.color,
      this.colorBlendMode,
      this.fit,
      this.alignment = Alignment.center,
      this.repeat = ImageRepeat.noRepeat,
      this.centerSlice,
      this.matchTextDirection = false,
      this.gaplessPlayback = false,
      this.filterQuality = FilterQuality.low,
      }) : assert(image != null),
      assert(alignment != null),
      assert(repeat != null),
      assert(filterQuality != null),
      assert(matchTextDirection != null),
      super(key: key);
  • new Image.asset: 加载资源图片文件。
    • 命名构造方法,用于使用key从AssetBundle获取图像。就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径。
    • 其实就相当于第一种构造方法指定 ImageProvider 为 AssetImage
    • 沿袭的是 iOS 的图片风格,分为 1x,2x,3x,具体做法是在项目的根目录下创建两个文件夹,如下图所示:
      技术分享图片
    • 然后需要在 pubspec.yaml文件中声明一下:

      flutter:
      
        # The following line ensures that the Material Icons font is
        # included with your application, so that you can use the icons in
        # the material Icons class.
        uses-material-design: true
        assets:
          - images/logo.png
          - images/2.0x/logo.png
          - images/3.0x/logo.png
    • 用法如下:

      new Image.asset(images/logo.png)
    • 构造方法
    •   Image.asset(
          String name, {
          Key key,
          AssetBundle bundle,
          this.frameBuilder,
          this.semanticLabel,
          this.excludeFromSemantics = false,
          double scale,
          this.width,
          this.height,
          this.color,
          this.colorBlendMode,
          this.fit,
          this.alignment = Alignment.center,
          this.repeat = ImageRepeat.noRepeat,
          this.centerSlice,
          this.matchTextDirection = false,
          this.gaplessPlayback = false,
          String package,
          this.filterQuality = FilterQuality.low,
        }) : image = scale != null
               ? ExactAssetImage(name, bundle: bundle, scale: scale, package: package)
               : AssetImage(name, bundle: bundle, package: package),
             loadingBuilder = null,
             assert(alignment != null),
             assert(repeat != null),
             assert(matchTextDirection != null),
             super(key: key);
  • new Image.file: 加载本地图片文件。
    • 命名构造方法,加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关。 用于从File获取图像
    • 其实就相当于第一种构造方法指定 ImageProvider 为 FlieImage
    • 加载一个本地 File 图片,比如相册中的图片,用法如下
      new Image.file(new File(/storage/xxx/xxx/test.jpg))
    • 构造函数
       Image.file(
          File file, {
          Key key,
          double scale = 1.0,
          this.frameBuilder,
          this.semanticLabel,
          this.excludeFromSemantics = false,
          this.width,
          this.height,
          this.color,
          this.colorBlendMode,
          this.fit,
          this.alignment = Alignment.center,
          this.repeat = ImageRepeat.noRepeat,
          this.centerSlice,
          this.matchTextDirection = false,
          this.gaplessPlayback = false,
          this.filterQuality = FilterQuality.low,
        }) : image = FileImage(file, scale: scale),
             loadingBuilder = null,
             assert(alignment != null),
             assert(repeat != null),
             assert(filterQuality != null),
             assert(matchTextDirection != null),
             super(key: key);
  • new Image.network: 加载网络图片。
    • 命名构造方法,用于从URL地址获取图像。意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。
      new Image.network(http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg)
    • 其实就相当于第一种构造方法指定 ImageProvider 为 NetworkImage。
    • 有的时候我们需要像Android那样使用一个占位图或者图片加载出错时显示某张特定的图片,这时候需要用到 FadeInImage 这个组件:

      //第一种方法是加载一个本地的占位图
      new FadeInImage.assetNetwork(
        placeholder: images/logo.png,
        image: imageUrl,
        width: 120,
        fit: BoxFit.fitWidth,
      )

      //第二种是加载一个透明的占位图,但是需要注意的是,这个组件是不可以设置加载出错显示的图片的
      new FadeInImage.memoryNetwork( placeholder: kTransparentImage, image: imageUrl, width: 120, fit: BoxFit.fitWidth, )

        //另一种方法可以使用第三方 package 的 CachedNetworkImage 组件:CachedNetworkImage 组件中的占位图是一个 Widget,这样的话就可以自定义了,你想使用什么样的组件进行占位都行,同样加载出错的占位图也是一个组件,也可以自己定义;该组件也是通过缓存来加载图片的。

       new CachedNetworkImage(
        width: 120,
         fit: BoxFit.fitWidth,
         placeholder: new CircularProgressIndicator(),
         imageUrl: imageUrl,
         errorWidget: new Icon(Icons.error),
        )

    • 构造函数
        Image.network(
          String src, {
          Key key,
          double scale = 1.0,
          this.frameBuilder,
          this.loadingBuilder,
          this.semanticLabel,
          this.excludeFromSemantics = false,
          this.width,
          this.height,
          this.color,
          this.colorBlendMode,
          this.fit,
          this.alignment = Alignment.center,
          this.repeat = ImageRepeat.noRepeat,
          this.centerSlice,
          this.matchTextDirection = false,
          this.gaplessPlayback = false,
          this.filterQuality = FilterQuality.low,
          Map<String, String> headers,
        }) : image = NetworkImage(src, scale: scale, headers: headers),
             assert(alignment != null),
             assert(repeat != null),
             assert(matchTextDirection != null),
             super(key: key);
  • new Image.memory: 加载Uint8List资源图片。
    • 用来将一个 byte 数组加载成图片
      new Image.memory(bytes)
    • 命名构造函数
        Image.memory(
          Uint8List bytes, {
          Key key,
          double scale = 1.0,
          this.frameBuilder,
          this.semanticLabel,
          this.excludeFromSemantics = false,
          this.width,
          this.height,
          this.color,
          this.colorBlendMode,
          this.fit,
          this.alignment = Alignment.center,
          this.repeat = ImageRepeat.noRepeat,
          this.centerSlice,
          this.matchTextDirection = false,
          this.gaplessPlayback = false,
          this.filterQuality = FilterQuality.low,
        }) : image = MemoryImage(bytes, scale: scale),
             loadingBuilder = null,
             assert(alignment != null),
             assert(repeat != null),
             assert(matchTextDirection != null),
             super(key: key);
        

四,参数详解

  • image
    从哪里加载图片,值为一个 ImageProvider 对象,ImageProvider 的实现类有 AssetBundleImageProvider(AssetImage 继承自它)、FileImageMemoryImageNetworkImage,需要注意的是,如果选择 AssetImage 从资源目录中加载图片,需在 pubspec.yaml 配置文件中配置 assets 目录:上面有介绍
  • width 和 heigh: 宽和高
  • alignment:

    如果图片没有填充满容器的话,图片的对齐方式,值为一个 AlignmentGeometry 对象,Alignment 是它的一个实现类,可选值同 ContainerAlignment 取值一样。

        Alignment.topLeft:垂直靠顶部水平靠左对齐。
        Alignment.topCenter:垂直靠顶部水平居中对齐。
        Alignment.topRight:垂直靠顶部水平靠右对齐。
        Alignment.centerLeft:垂直居中水平靠左对齐。
        Alignment.center:垂直和水平居中都对齐。
        Alignment.centerRight:垂直居中水平靠右对齐。
        Alignment.bottomLeft:垂直靠底部水平靠左对齐。
        Alignment.bottomCenter:垂直靠底部水平居中对齐。
        Alignment.bottomRight:垂直靠底部水平靠右对齐。

     除了上面的常量之外,还可以创建 Alignment 对象指定 xy 偏移量。

  • color
    在图片上设置颜色,值为一个 Color 对象,会覆盖 image 指定的图片,如果也设置了 colorBlendMode 属性,则会与 image 混合产生特殊效果。
  • colorBlendMode
    颜色混合模式,类似 BoxDecorationbackgroundBlendMode
  • excludeFromSemantics
    是否启用图像的语义描述。
  • filterQuality
    图像过滤器的质量级别(使用该属性还没看到效果,后面用到了再研究)。
  • fit:

    图片的缩放方式,类似 Android 中 ImageViewscaleType,可选值有:

       BoxFit.none:将图片的内容按原大小居中显示。
       BoxFit.contain:将图片的内容完整居中显示,通过按比例缩小或原来的 size 使得图片宽/高等于或小于组件的宽/高,类似 Android 的 centerInside。
       BoxFit.cover:按比例放大图片的 size 居中显示,类似 Android 的 centerCrop。
       BoxFit.fill:把图片不按比例放大/缩小到组件的大小显示,类似 Android 的 fitXY。
       BoxFit.fitHeight:把图片的高按照组件的高显示,宽等比例放大/缩小。
       BoxFit.fitWidth:把图片的宽按照组件的宽显示,高等比例放大/缩小。
       BoxFit.scaleDown:如果图片宽高大于组件宽高,则让图片内容完全居中显示,此时同 contain,如果图片宽高小于组件宽高,则按图片原大小居中显示,此时同 none。
  • centerSlice
      该属性用于的中心拉伸,值为一个 Rect 对象,应该就是拉伸区域,我在使用该属性的时候只有当 fit 设置为 contain 和 fill 时才看到了效果,该属性应该也是用于图形变换,不常用。
    • 使用方法
      centerSlice =  Rect.fromLTRB(l, t, r, b)
  • gaplessPlayback
    当 ImageProvider 发生变化后,重新加载图片的过程中,原图片的展示是否保留。true 表示保留,false 表示不保留,直接空白等待下一张图片加载。
  • matchTextDirection

    该属性值表示图片的方向是否跟随文字的方向,其实就相当于左右翻转,true 表示翻转,false 表示不翻转,但是要想该属性生效,必须使用 Directionality 组件包裹 Image 组件,如下面代码:

    new Directionality(
    textDirection: TextDirection.rtl,
    child: new Image(
    image: new NetworkImage(imgUrl),
    matchTextDirection: true,
    ),
    )

  • repeat:

    如果图片没填充满容器的话,图片的重复方式,可选值有:

    •  ImageRepeat.noRepeat:不重复。
      技术分享图片
    • ImageRepeat.repeat:X、Y 轴都重复。
      技术分享图片

    • ImageRepeat.repeatX:只在 X 轴重复。
      技术分享图片

    • ImageRepeat.repeatY:只在 Y 轴重复。
      技术分享图片

  • semanticLabel:
    图像的语义描述,类似 Android 中 ImageView 的 contentDescription 属性。


五,示例demo

六,官网地址

Flutter学习】基本组件之图片组件Image

标签:sports   显示   sin   circular   filter   三方   网络图片   eat   创建   

原文:https://www.cnblogs.com/lxlx1798/p/11060601.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号