一，概述

　　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获取图像。

    • 类名构造方法，它指定了图片是从哪里加载，是从项目中还是网络中等等。　　

      1.  
      2. const Image({
      3. Key key,
      4. @required this.image,
      5. this.frameBuilder,
      6. this.loadingBuilder,
      7. this.semanticLabel,
      8. this.excludeFromSemantics = false,
      9. this.width,
      10. this.height,
      11. this.color,
      12. this.colorBlendMode,
      13. this.fit,
      14. this.alignment = Alignment.center,
      15. this.repeat = ImageRepeat.noRepeat,
      16. this.centerSlice,
      17. this.matchTextDirection = false,
      18. this.gaplessPlayback = false,
      19. this.filterQuality = FilterQuality.low,
      20. }) : assert(image != null),
      21. assert(alignment != null),
      22. assert(repeat != null),
      23. assert(filterQuality != null),
      24. assert(matchTextDirection != null),
      25. super(key: key);
  • new Image.asset: 加载资源图片文件。
    • 命名构造方法，用于使用key从AssetBundle获取图像。就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。
    • 其实就相当于第一种构造方法指定 ImageProvider 为 AssetImage
    • 沿袭的是 iOS 的图片风格，分为 1x，2x，3x，具体做法是在项目的根目录下创建两个文件夹，如下图所示：

    • 然后需要在 pubspec.yaml文件中声明一下：

      1. flutter:
      2.  
      3.   # The following line ensures that the Material Icons font is
      4.   # included with your application, so that you can use the icons in
      5.   # the material Icons class.
      6.   uses-material-design: true
      7.   assets:
      8.     - images/logo.png
      9.     - images/.0x/logo.png
      10.     - images/.0x/logo.png

    • 用法如下：

      1. new Image.asset('images/logo.png')
    • 构造方法
      1.   Image.asset(
      2.     String name, {
      3.     Key key,
      4.     AssetBundle bundle,
      5.     this.frameBuilder,
      6.     this.semanticLabel,
      7.     this.excludeFromSemantics = false,
      8.     double scale,
      9.     this.width,
      10.     this.height,
      11.     this.color,
      12.     this.colorBlendMode,
      13.     this.fit,
      14.     this.alignment = Alignment.center,
      15.     this.repeat = ImageRepeat.noRepeat,
      16.     this.centerSlice,
      17.     this.matchTextDirection = false,
      18.     this.gaplessPlayback = false,
      19.     String package,
      20.     this.filterQuality = FilterQuality.low,
      21.   }) : image = scale != null
      22.          ? ExactAssetImage(name, bundle: bundle, scale: scale, package: package)
      23.          : AssetImage(name, bundle: bundle, package: package),
      24.        loadingBuilder = null,
      25.        assert(alignment != null),
      26.        assert(repeat != null),
      27.        assert(matchTextDirection != null),
      28.        super(key: key);
  • new Image.file： 加载本地图片文件。
    • 命名构造方法，加载本地图片，就是加载本地文件中的图片，这个是一个绝对路径，跟包体无关。 用于从File获取图像
    • 其实就相当于第一种构造方法指定 ImageProvider 为 FlieImage
    • 加载一个本地 File 图片，比如相册中的图片，用法如下 
      1. new Image.file(new File('/storage/xxx/xxx/test.jpg'))
    • 构造函数 
      1.  Image.file(
      2.     File file, {
      3.     Key key,
      4.     double scale = 1.0,
      5.     this.frameBuilder,
      6.     this.semanticLabel,
      7.     this.excludeFromSemantics = false,
      8.     this.width,
      9.     this.height,
      10.     this.color,
      11.     this.colorBlendMode,
      12.     this.fit,
      13.     this.alignment = Alignment.center,
      14.     this.repeat = ImageRepeat.noRepeat,
      15.     this.centerSlice,
      16.     this.matchTextDirection = false,
      17.     this.gaplessPlayback = false,
      18.     this.filterQuality = FilterQuality.low,
      19.   }) : image = FileImage(file, scale: scale),
      20.        loadingBuilder = null,
      21.        assert(alignment != null),
      22.        assert(repeat != null),
      23.        assert(filterQuality != null),
      24.        assert(matchTextDirection != null),
      25.        super(key: key);
  • new Image.network: 加载网络图片。
    • 命名构造方法，用于从URL地址获取图像。意思就是你需要加入一段http://xxxx.xxx的这样的网络路径地址。

      1. new Image.network('http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg')
    • 其实就相当于第一种构造方法指定 ImageProvider 为 NetworkImage。

    • 有的时候我们需要像Android那样使用一个占位图或者图片加载出错时显示某张特定的图片，这时候需要用到 FadeInImage 这个组件：

      1. //第一种方法是加载一个本地的占位图
      1. new FadeInImage.assetNetwork(
      2.   placeholder: 'images/logo.png',
      3.   image: imageUrl,
      4.   width: ,
      5.   fit: BoxFit.fitWidth,
      6. )
      7.  
      8. //第二种是加载一个透明的占位图，但是需要注意的是，这个组件是不可以设置加载出错显示的图片的
      9. new FadeInImage.memoryNetwork(
      10.   placeholder: kTransparentImage,
      11.   image: imageUrl,
      12.   width: ,
      13.   fit: BoxFit.fitWidth,
      14. )

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

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

    • 构造函数 
      1.   Image.network(
      2.     String src, {
      3.     Key key,
      4.     double scale = 1.0,
      5.     this.frameBuilder,
      6.     this.loadingBuilder,
      7.     this.semanticLabel,
      8.     this.excludeFromSemantics = false,
      9.     this.width,
      10.     this.height,
      11.     this.color,
      12.     this.colorBlendMode,
      13.     this.fit,
      14.     this.alignment = Alignment.center,
      15.     this.repeat = ImageRepeat.noRepeat,
      16.     this.centerSlice,
      17.     this.matchTextDirection = false,
      18.     this.gaplessPlayback = false,
      19.     this.filterQuality = FilterQuality.low,
      20.     Map<String, String> headers,
      21.   }) : image = NetworkImage(src, scale: scale, headers: headers),
      22.        assert(alignment != null),
      23.        assert(repeat != null),
      24.        assert(matchTextDirection != null),
      25.        super(key: key);
  • new Image.memory: 加载Uint8List资源图片。
    • 用来将一个 byte 数组加载成图片

      1. new Image.memory(bytes)
    • 命名构造函数 
      1.   Image.memory(
      2.     Uint8List bytes, {
      3.     Key key,
      4.     double scale = 1.0,
      5.     this.frameBuilder,
      6.     this.semanticLabel,
      7.     this.excludeFromSemantics = false,
      8.     this.width,
      9.     this.height,
      10.     this.color,
      11.     this.colorBlendMode,
      12.     this.fit,
      13.     this.alignment = Alignment.center,
      14.     this.repeat = ImageRepeat.noRepeat,
      15.     this.centerSlice,
      16.     this.matchTextDirection = false,
      17.     this.gaplessPlayback = false,
      18.     this.filterQuality = FilterQuality.low,
      19.   }) : image = MemoryImage(bytes, scale: scale),
      20.        loadingBuilder = null,
      21.        assert(alignment != null),
      22.        assert(repeat != null),
      23.        assert(matchTextDirection != null),
      24.        super(key: key);

      　　

四，参数详解

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

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

    1.     Alignment.topLeft：垂直靠顶部水平靠左对齐。
    2.     Alignment.topCenter：垂直靠顶部水平居中对齐。
    3.     Alignment.topRight：垂直靠顶部水平靠右对齐。
    4.     Alignment.centerLeft：垂直居中水平靠左对齐。
    5.     Alignment.center：垂直和水平居中都对齐。
    6.     Alignment.centerRight：垂直居中水平靠右对齐。
    7.     Alignment.bottomLeft：垂直靠底部水平靠左对齐。
    8.     Alignment.bottomCenter：垂直靠底部水平居中对齐。
    9.     Alignment.bottomRight：垂直靠底部水平靠右对齐。

    除了上面的常量之外，还可以创建 Alignment 对象指定 x、y 偏移量。

  • color
    在图片上设置颜色，值为一个 Color 对象，会覆盖 image 指定的图片，如果也设置了 colorBlendMode 属性，则会与 image 混合产生特殊效果。
  • colorBlendMode
    • 颜色混合模式，类似 BoxDecoration 的 backgroundBlendMode。
    • BlendModel枚举值

    • switch (blendMode) {
      case kCGBlendModeNormal: {
      　 strMsg = @"kCGBlendModeNormal: 正常；也是默认的模式。前景图会覆盖背景图";
         break;
      }
      case kCGBlendModeMultiply: {
         strMsg = @"kCGBlendModeMultiply: 正片叠底；混合了前景和背景的颜色，最终颜色比原先的都暗";
         break;
      }
      case kCGBlendModeScreen: {
         strMsg = @"kCGBlendModeScreen: 滤色；把前景和背景图的颜色先反过来，然后混合";
         break;
      }
      case kCGBlendModeOverlay: {
         strMsg = @"kCGBlendModeOverlay: 覆盖；能保留灰度信息，结合kCGBlendModeSaturation能保留透明度信息，在imageWithBlendMode方法中两次执行drawInRect方法实现我们基本需求";
         break;
      }
      case kCGBlendModeDarken: {
         strMsg = @"kCGBlendModeDarken: 变暗"; //将线条色变为黑色，背景色设置为目的色
         break;
      }
      case kCGBlendModeLighten: {
         strMsg = @"kCGBlendModeLighten: 变亮";
         break;
      }
      case kCGBlendModeColorDodge: {
         strMsg = @"kCGBlendModeColorDodge: 颜色变淡";
         break;
      }
      case kCGBlendModeColorBurn: {
         strMsg = @"kCGBlendModeColorBurn: 颜色加深"; //线条颜色（原本）加深，背景色设置为目的色
         break;
      }
      case kCGBlendModeSoftLight: {
         strMsg = @"kCGBlendModeSoftLight: 柔光";
         break;
      }
      case kCGBlendModeHardLight: {
         strMsg = @"kCGBlendModeHardLight: 强光"; //全为目的色
         break;
      }
      case kCGBlendModeDifference: {
         strMsg = @"kCGBlendModeDifference: 插值";
         break;
      }
      case kCGBlendModeExclusion: {
         strMsg = @"kCGBlendModeExclusion: 排除";
         break;
      }
      case kCGBlendModeHue: {
         strMsg = @"kCGBlendModeHue: 色调";
         break;
      }
      case kCGBlendModeSaturation: {
         strMsg = @"kCGBlendModeSaturation: 饱和度";
         break;
      }
      case kCGBlendModeColor: {
         strMsg = @"kCGBlendModeColor: 颜色"; //感觉将图片线条色设置为白色，背景色设置为目的色，之后再再图片上加一个有透明度的目的色
         break;
      }
      case kCGBlendModeLuminosity: {
         strMsg = @"kCGBlendModeLuminosity: 亮度";
         break;
      }

      //Apple额外定义的枚举
      //R: premultiplied result, 表示混合结果
      //S: Source, 表示源颜色(Sa对应透明度值: 0.0-1.0)
      //D: destination colors with alpha, 表示带透明度的目标颜色(Da对应透明度值: 0.0-1.0)
      case kCGBlendModeClear: {
        strMsg = @"kCGBlendModeClear: R = 0"; //1.清空（如果图标背景色为白色则为全白）
        break;
      }
      case kCGBlendModeCopy: {
        strMsg = @"kCGBlendModeCopy: R = S"; //2全色覆盖整个图片
        break;
      }
      case kCGBlendModeSourceIn: {
        strMsg = @"kCGBlendModeSourceIn: R = S*Da"; //3.线条变色
        break;
      }
      case kCGBlendModeSourceOut: {
        strMsg = @"kCGBlendModeSourceOut: R = S*(1 - Da)"; //4.背景变为目的色,线条自动变为白色（比如图标线条原为蓝色，会自动变为白色）
        break;
      }
      case kCGBlendModeSourceAtop: {
        strMsg = @"kCGBlendModeSourceAtop: R = S*Da + D*(1 - Sa)"; //5.线条变色，目前感觉和SourceIn效果一致
        break;
      }
      case kCGBlendModeDestinationOver: {
        strMsg = @"kCGBlendModeDestinationOver: R = S*(1 - Da) + D"; //6.背景色变为目的色，线条色不变
        break;
      }
      case kCGBlendModeDestinationIn: {
        strMsg = @"kCGBlendModeDestinationIn: R = D*Sa；能保留透明度信息"; //7.只看到线条色（本色），无其他颜色
        break;
      }  
      case kCGBlendModeDestinationOut: {
        strMsg = @"kCGBlendModeDestinationOut: R = D*(1 - Sa)"; //8.空白什么都没哟
        break;
      }
      case kCGBlendModeDestinationAtop: {
        strMsg = @"kCGBlendModeDestinationAtop: R = S*(1 - Da) + D*Sa"; //9.会把整个矩形的背景填充目的色（如图9系列）原色保留
        break;
      }
      case kCGBlendModeXOR: {
        strMsg = @"kCGBlendModeXOR: R = S*(1 - Da) + D*(1 - Sa)"; //10.线条变白，背景色变为目的色
        break;
      }
      case kCGBlendModePlusDarker: {
        strMsg = @"kCGBlendModePlusDarker: R = MAX(0, (1 - D) + (1 - S))"; //11.线条变为黑色， 背景色变为目的色
        break;
      }
      case kCGBlendModePlusLighter: {
        strMsg = @"kCGBlendModePlusLighter: R = MIN(1, S + D)（最后一种混合模式）"; //12.线条变为白色（混合色：如color为红色，就是偏粉色的白，有一定透明度的感觉）
        break;
      }
      default: {
        break;
      }

    • 　　
  • excludeFromSemantics
    是否启用图像的语义描述。
  • filterQuality
    图像过滤器的质量级别（使用该属性还没看到效果，后面用到了再研究）。
  • fit：

    图片的缩放方式，类似 Android 中 ImageView 的 scaleType，可选值有：

    1.    BoxFit.none：将图片的内容按原大小居中显示。
    2.    BoxFit.contain：将图片的内容完整居中显示，通过按比例缩小或原来的 size 使得图片宽/高等于或小于组件的宽/高，类似 Android 的 centerInside。
    3.    BoxFit.cover：按比例放大图片的 size 居中显示，类似 Android 的 centerCrop。
    4.    BoxFit.fill：把图片不按比例放大/缩小到组件的大小显示，类似 Android 的 fitXY。
    5.    BoxFit.fitHeight：把图片的高按照组件的高显示，宽等比例放大/缩小。
    6.    BoxFit.fitWidth：把图片的宽按照组件的宽显示，高等比例放大/缩小。
    7.    BoxFit.scaleDown：如果图片宽高大于组件宽高，则让图片内容完全居中显示，此时同 contain，如果图片宽高小于组件宽高，则按图片原大小居中显示，此时同 none。
  • centerSlice
    　　该属性用于的中心拉伸，值为一个 Rect 对象，应该就是拉伸区域，我在使用该属性的时候只有当 fit 设置为 contain 和 fill 时才看到了效果，该属性应该也是用于图形变换，不常用。
    • 使用方法

      1. //centerSlice =  Rect.fromLTRB(l, t, r, b)

      Image.network(
      　　"https://upload.jianshu.io/users/upload_avatars/3884536/d847a50f1da0.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240",
          width: 400,
          height: 400,
          fit: BoxFit.contain,
          centerSlice: Rect.fromLTWH(10, 10, 10, 10),
      )

      • 效果　　

      • Rect效果默认

         
      • centerSlice处理
         

        　　

  • gaplessPlayback（无间隙播放）
    • 当image provider 发生变化时，显示新图片的过程中，如果true则保留旧图片直至显示出新图片为止；如果false，则显示新图片的过程中，空白，不保留旧图片。
  • repeat:

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

    • ImageRepeat.noRepeat：不重复。

    • ImageRepeat.repeat：X、Y 轴都重复。

    • ImageRepeat.repeatX：只在 X 轴重复。

    • ImageRepeat.repeatY：只在 Y 轴重复。

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

五，示例demo　　

  1. import 'package:flutter/material.dart';
  2.  
  3. void main() => runApp(MyApp());
  4.  
  5. class MyApp extends StatelessWidget {
  6.   @override
  7.   Widget build(BuildContext context) {
  8. //  var imgUrl =
  9.    //   "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545191828292&di=caef0d773e90142191de9fc5f5871cef&imgtype=0&src=http%3A%2F%2Fimg.mp.sohu.com%2Fq_mini%2Cc_zoom%2Cw_640%2Fupload%2F20170807%2Fb008bbf3df1b490d85e3ff3152ea898e_th.jpg";
  10.     var imgUrl =
  11.         "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1545790666&di=45beff1e706ea81d796d2268553c9e6f&imgtype=jpg&er=1&src=http%3A%2F%2Fp1.music.126.net%2FfydScGuKzV4GFdqeCMKhxQ%3D%3D%2F109951163178133629.jpg%3Fparam%3D180y180";
  12.     return MaterialApp(
  13.       //是否显示 debug 标签
  14.       debugShowCheckedModeBanner: false,
  15.       title: "Image",
  16.       home: Scaffold(
  17.         appBar: new AppBar(
  18.           title: new Text("Image"),
  19.         ),
  20.         body: new Container(
  21.           color: new Color(0xFFFF0000),
  22.           //子组件
  23.           child: new Image(
  24.             /**
  25.              * 从资源目录中加载图片，需在 pubspec.yaml 配置文件中配置 assets 目录
  26.             * flutter:
  27.             *  assets:
  28.             *    - assets/images/
  29.             * 必须是上面的层级关系，但是感觉从资源目录加载图片老有问题，有时候显示不出来但又不报错，可以试试目录后面跟上具体文件名，即
  30.             * flutter:
  31.             *   assets:
  32.             *    - assets/images/iverson.jpg
  33.             * 但是这样每张图片都得配置，未免太过麻烦
  34.             * image: new AssetImage("assets/images/iverson.jpg"),
  35.             **/
  36.             //从网络加载图片，非常容易，不用配置，而且只要有网就没什么问题
  37.             image: new NetworkImage(imgUrl),
  38.             width: ,
  39.             height: ,
  40.             /*
  41.             * 如果图片没有填充满容器的话，图片的对齐方式，值为一个 AlignmentGeometry 对象，Alignment 是它的一个实现类
  42.             * 可选值同 Container 的 Alignment 取值一样。
  43.             * Alignment.topLeft：垂直靠顶部水平靠左对齐
  44.             * Alignment.topCenter：垂直靠顶部水平居中对齐
  45.             * Alignment.topRight：垂直靠顶部水平靠右对齐
  46.             * Alignment.centerLeft：垂直居中水平靠左对齐
  47.             * Alignment.center：垂直和水平居中都对齐
  48.             * Alignment.centerRight：垂直居中水平靠右对齐
  49.             * Alignment.bottomLeft：垂直靠底部水平靠左对齐
  50.             * Alignment.bottomCenter：垂直靠底部水平居中对齐
  51.             * Alignment.bottomRight：垂直靠底部水平靠右对齐
  52.             * 除了上面的常量之外，还可以创建 Alignment 对象指定 x、y 偏移量
  53.             *
  54.             */
  55.            alignment: Alignment.center,
  56.             //在图片上设置颜色，值为一个 Color 对象，会覆盖 image 指定的图片，如果也设置了 colorBlendMode 属性，则会与 image 混合产生特殊效果
  57.            color: new Color(0xFFFFFF00),
  58.             //颜色混合模式，类似 BoxDecoration 的 backgroundBlendMode
  59.            colorBlendMode: BlendMode.darken,
  60.            excludeFromSemantics: true,
  61.            filterQuality: FilterQuality.high,
  62.             /*
  63.             * 图片的缩放方式，类似 Android 中 ImageView 的 scaleType，可选值有：
  64.             * BoxFit.none：将图片的内容按原大小居中显示。
  65.             * BoxFit.contain：将图片的内容完整居中显示，通过按比例缩小或原来的 size 使得图片宽/高等于或小于组件的宽/高，类似 Android 的 centerInside。
  66.             * BoxFit.cover：按比例放大图片的 size 居中显示，类似 Android 的 centerCrop。
  67.             * BoxFit.fill：把图片不按比例放大/缩小到组件的大小显示，类似 Android 的 fitXY。
  68.             * BoxFit.fitHeight：把图片的高按照组件的高显示，宽等比例放大/缩小。
  69.             * BoxFit.fitWidth：把图片的宽按照组件的宽显示，高等比例放大/缩小。
  70.             * BoxFit.scaleDown：如果图片宽高大于组件宽高，则让图片内容完全居中显示，此时同 contain，如果图片宽高小于组件宽高，则按图片原大小居中显示，此时同 none。
  71.             */
  72.             fit: BoxFit.contain,
  73.             centerSlice:new Rect.fromCircle(center: Offset(100.0, 100.0), radius: 10.0),
  74.             //当图像提供者发生变化时，是继续显示旧图像，默认不显示
  75.             gaplessPlayback: true,
  76.             //图片与颜色混合模式
  77.             matchTextDirection: true,
  78.             /*
  79.             * 如果图片没填充满容器的话，图片的重复方式，可选值有：
  80.             * ImageRepeat.noRepeat：不重复
  81.             * ImageRepeat.repeat：X、Y 轴都重复
  82.             * ImageRepeat.repeatX：只在 X 轴重复
  83.             * ImageRepeat.repeatY：只在 Y 轴重复
  84.             */
  85.             repeat: ImageRepeat.noRepeat,
  86.             //图像的语义描述
  87.             semanticLabel:'Image组件学习',
  88.           ),
  89.         ),
  90.       ),
  91.     );
  92.   }
  93. }

六，实现圆角/圆形图片

  • 圆角

    • 使用裁剪来实现图片圆角：

      1. new ClipRRect(
      2.   child: Image.network(
      3.     imageUrl,
      4.     scale: 8.5,
      5.     fit: BoxFit.cover,
      6.   ),
      7.   borderRadius: BorderRadius.only(
      8.     topLeft: Radius.circular(),
      9.     topRight: Radius.circular(),
      10.   ),
      11. )
    • 使用边框来实现图片圆角：

      1. new Container(
      2.   width: ,
      3.   height: ,
      4.   decoration: BoxDecoration(
      5.     shape: BoxShape.rectangle,
      6.     borderRadius: BorderRadius.circular(10.0),
      7.     image: DecorationImage(
      8.         image: NetworkImage(imageUrl),
      9.         fit: BoxFit.cover),
      10.   ),
      11. )
    • 需要注意的是，使用边框实现的时候要注意设置 fit属性，不然效果也是有问题的，当然了你还可以使用 Material组件来实现。

  • 圆形
    圆形图片用得最多的应该是头像之类的，这种同样有多种方式可以实现，下面我也举两个例子

    • 使用裁剪实现圆形图片：

      1. new ClipOval(
      2.     child: Image.network(
      3.     imageUrl,
      4.     scale: 8.5,
      5.   ),
      6. )
    • 使用CircleAvatar来实现圆形图片：
       
      1. new CircleAvatar(
      2.   backgroundImage: NetworkImage(imageUrl),
      3.   radius: 50.0,
      4. )

七，官方地址

【Flutter学习】基本组件之图片组件Image的更多相关文章

  1. Flutter学习笔记（10）--容器组件、图片组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...

  2. Flutter学习笔记（9）--组件Widget

    如需转载,请注明出处:Flutter学习笔记(9)--组件Widget 在Flutter中,所有的显示都是Widget,Widget是一切的基础,我们可以通过修改数据,再用setState设置数据(调 ...

  3. Flutter——Image组件（图片组件）

    Image组件有很多构造函数,这里只说两个. Image.asset  本地图片 1.在根目录新建文件夹 /images 2.在 images 文件夹下建立两个文件夹 /images/2.0x  /i ...

  4. Flutter学习笔记（8）--Dart面向对象

    如需转载,请注明出处:Flutter学习笔记(7)--Dart异常处理 Dart作为高级语言,支持面向对象的很多特性,并且支持基于mixin的继承方式,基于mixin的继承方式是指:一个类可以继承自多 ...

  5. Flutter学习笔记（11）--文本组件、图标及按钮组件

    如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 文本组件 文本组件(text)负责显示文本和定义显示样式,下表为text常见属性 Text组件属性及描述 属性名 类型 默认 ...

  6. Flutter学习笔记（18）--Drawer抽屉组件

    如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...

  7. Flutter学习笔记（21）--TextField文本框组件和Card卡片组件

    如需转载,请注明出处:Flutter学习笔记(21)--TextField文本框组件和Card卡片组件 今天来学习下TextField文本框组件和Card卡片组件. 只要是应用程序就少不了交互,基本上 ...

  8. 【Flutter学习】页面布局之基础布局组件

    一,概述 Flutter中拥有30多种预定义的布局widget,常用的有Container.Padding.Center.Flex.Row.Colum.ListView.GridView.按照< ...

  9. Flutter学习笔记（12）--列表组件

    如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源 ...

随机推荐

  1. 【和孩子一起学编程】 python笔记--第二天

    第六章 GUI:用户图形界面(graphical user interface) 安装easygui:打开cmd命令窗口,输入:pip install easygui 利用msgbox()函数创建一个 ...

  2. djangorestframework-jwt 分页器 三种

    数据准备 # models class Teacher(models.Model): name = models.CharField(max_length=32) salary = models.De ...

  3. 数据中台核心方法论--OneModel为何需要产品化支撑？

    什么是产品化 大部分创业公司都是从一个伟大的想法创意开始的,并且需要有一堆技术专家来实现.我们清楚,伟大的技术并不等同于和伟大的产品,技术可以解决问题,但如果它没有办法法规模化,那这些技术或者能力对用 ...

  4. TableStore最佳实践：GEO索引打造店铺搜索系统

    摘要: 如何使用TableStore打造店铺搜索系统 一.方案背景 对于一套GEO管理系统,其核心点与瓶颈在于数据库的存储性能与查询能力:一方面,存储服务需要应对海量数据的低延迟存.读,另一方面,存储 ...

  5. 阿里云异构计算团队亮相英伟达2018 GTC大会

    摘要: 首届云原生计算国际会议(KubeCon + CloudNativeCon,China,2018)在上海举办,弹性计算研究员伯瑜介绍了基于虚拟化.容器化编排技术的云计算操作系统PouchCont ...

  6. sql 基础语法3：分组，聚合函数，having，联合查询，快速备份，内联函数

    select * from Classinfo select * from StuInfo select * from CourseInfo select * from ScoreInfo --分组 ...

  7. 探索Redis设计与实现2：Redis内部数据结构详解——dict

    本文转自互联网 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial ...

  8. 无法在要求对象展开的函数中使用 __try

    解决方案: 单独把try里面的代码封装成一个函数,然后再在try里面调用

  9. kafka ConsumerConfig 配置

  10. restTemplate源码详解深入剖析底层实现思路

    一 准备工作 1 启动一个项目,发布一个restful的get请求,端口设置为8090. @RestController @RequestMapping("/youku1327") ...