Flutter 127: 图解基础 Image 小组件

    Image 图片作为日常中最常用的 Widget 却也是最容易忽略的,小菜在日常中通常仅用到 Image 展示图片属性,但是 Image 本身非常强大,有很多小菜所不熟知的属性特征;今天小菜重新认识一下 Image Widget

Image

    Image 作为支持展示多种图片格式的 Widget,提供了多种构造方法;

  • Image() 用于从 ImageProvider 中获取图片资源;
  • Image.asset() 用于从 AssetBundle 中获取工程目录图片资源;
  • Image.network() 用于从 URL 中获取网络图片资源;
  • Image.file() 用于从 File 中获取本地图片资源;
  • Image.memory() 用于从 Uint8List 中获取内存图片资源;

Flutter 127: 图解基础 Image 小组件

源码分析

const Image({
    Key key,
    @required this.image,       // 图片资源
    this.frameBuilder,          // 帧构造器
    this.loadingBuilder,        // 加载过程帧构造器
    this.errorBuilder,          // 失败状态帧构造器
    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.isAntiAlias = false,
    this.filterQuality = FilterQuality.low,
})

    简单分析源码可得,Image 作为一个有状态的 StatefulWidget,主要通过 image 属性来设置图片资源,多种附加属性来支持图片更多样的展示效果;小菜逐一进行尝试学习;

案例尝试

1. image

    Image 通过 ImageProvider 来展示图片,Flutter 提供了多种方式,与各类命名构造方法对应;

_imageWid00(isNet) => Image(
    image: isNet
        ? NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg')
        : AssetImage('images/icon_hzw01.jpg'));

Flutter 127: 图解基础 Image 小组件

2. frameBuilder

typedef ImageFrameBuilder = Widget Function(
  BuildContext context,
  Widget child,
  int frame,
  bool wasSynchronouslyLoaded,
);

    frameBuilder 帧构造器用于控制在 Image 构建时小部件签名,其中 child 用于保存默认 Image 图片并且不可为空;frame 为渲染 Image 帧数下标,默认为首帧;可以通过 frameBuilder 设置图片基本样式;

_imageWid01(isNet) {
  return Image(
      frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) {
        return Container(
            padding: EdgeInsets.all(18.0),
            color: Colors.deepOrange.withOpacity(0.4),
            child: child);
      },
      image: isNet
          ? NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg')
          : AssetImage('images/icon_hzw01.jpg'));
}

Flutter 127: 图解基础 Image 小组件

3. loadingBuilder

    loadingBuilder 加载状态帧构造器,在加载过程中展示的 Image 构造器;查看效果图可以看到,设置了两层内边距,因为在 loading 状态和加载完状态时都对 child 设置了内边距;

_imageWid02(isNet) {
  return Image(
      frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) {
        return Container(
            padding: EdgeInsets.all(18.0),
            color: Colors.deepOrange.withOpacity(0.4),
            child: child);
      },
      loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
        return Container(
            padding: EdgeInsets.all(18.0),
            color: Colors.green.withOpacity(0.4),
            child: child);
      },
      image: isNet
          ? NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg')
          : AssetImage('images/icon_hzw01.jpg'));
}

Flutter 127: 图解基础 Image 小组件

4. errorBuilder

    errorBuilder 为失败时替换 Image 展示的构造器;

_imageWid03(isNet) {
  return Image(
      frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) {
        return Container(
            padding: EdgeInsets.all(18.0),
            color: Colors.deepOrange.withOpacity(0.4),
            child: child);
      },
      loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
        return Container(
            padding: EdgeInsets.all(18.0),
            color: Colors.green.withOpacity(0.4),
            child: child);
      },
      errorBuilder: (BuildContext context, Object exception, StackTrace stackTrace) {
        return Container(
            height: 100.0, padding: EdgeInsets.all(18.0),
            color: Colors.grey.withOpacity(0.4),
            child: Center(child: Icon(Icons.error)));
      },
      image: isNet
          ? NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl11.jpg')
          : AssetImage('images/icon_hzw0111.jpg'));
}

Flutter 127: 图解基础 Image 小组件

5. width & height

    width & height 为设置图片展示宽高尺寸;

_imageWid05(width, height) => Image(image: AssetImage('images/icon_hzw01.jpg'), width: width, height: height);

Flutter 127: 图解基础 Image 小组件

6. color & colorBlendMode

    color & colorBlendMode 配合使用绘制的混合模式,可以用来创建其他效果,如黑白模式,X 光特效等;之前小菜有所尝试;

_imageWid06(isNet, index) {
  BlendMode blendMode;
  if (index == 0) {
    blendMode = BlendMode.difference;
  } else if (index == 1) {
    blendMode = BlendMode.screen;
  } else if (index == 2) {
    blendMode = BlendMode.hardLight;
  } else {
    blendMode = BlendMode.colorBurn;
  }
  return Image(
      color: Colors.indigoAccent.withOpacity(0.4),
      colorBlendMode: blendMode,
      image: isNet
          ? NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg')
          : AssetImage('images/icon_hzw01.jpg'));
}

Flutter 127: 图解基础 Image 小组件

7. alignment

    alignment 为边界内的对齐方式;当图片资源小于图片尺寸时,可以通过 Alignment 调整对齐方式;

_imageWid07(index) {
  Alignment alignment;
  if (index == 0) {
    alignment = Alignment.topLeft;
  } else if (index == 1) {
    alignment = Alignment.center;
  } else {
    alignment = Alignment.bottomRight;
  }
  return Image(
      image: AssetImage('images/icon_wechat_moments.png'),
      alignment: alignment,
      height: 120,
      frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) {
        return Container(
            padding: EdgeInsets.all(2.0),
            color: Colors.deepOrange.withOpacity(0.4),
            child: child);
      });
}

Flutter 127: 图解基础 Image 小组件

8. repeat

    repeat 为覆盖图片未覆盖区域样式,包括水平方向或竖直方向平铺效果;

_imageWid08(index) {
  ImageRepeat repeat;
  if (index == 0) {
    repeat = ImageRepeat.repeatX;
  } else if (index == 1) {
    repeat = ImageRepeat.repeatY;
  } else {
    repeat = ImageRepeat.repeat;
  }
  return Image(
      image: AssetImage('images/icon_wechat_moments.png'),
      repeat: repeat, height: 120,
      frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) {
        return Container(
            padding: EdgeInsets.all(18.0),
            color: Colors.deepOrange.withOpacity(0.4),
            child: child);
      });
}

Flutter 127: 图解基础 Image 小组件

9. fit

    fit 为图片在布局中的分布效果;

  • BoxFit.fitWidth:整体图片资源以图片宽度为基准放大或缩小;
  • BoxFit.fitHeight:整体图片资源以图片高度为基准放大或缩小;
  • BoxFit.fill:整体图片填充满图片宽高,可进行拉伸或压缩等;
  • BoxFit.contain:整体图片按比例放大或缩小至最大宽或高可容纳范围,并在设置宽高内居中整体显示;
  • BoxFit.cover:整体图片按比例放大或缩小至最小宽或高可容纳范围,并居中显示;
  • BoxFit.scaleDown:整体图片大于设置尺寸,按比例缩小并居中显示;若整体图片小于设置尺寸,则不做处理,居中显示;
_imageWid09(index) {
  BoxFit fit;
  if (index == 0) {
    fit = BoxFit.fitWidth;
  } else if (index == 1) {
    fit = BoxFit.fitHeight;
  } else if (index == 2) {
    fit = BoxFit.fill;
  } else if (index == 3) {
    fit = BoxFit.cover;
  } else if (index == 4) {
    fit = BoxFit.contain;
  } else {
    fit = BoxFit.scaleDown;
  }
  return Image(
      image: AssetImage('images/icon_hzw03.jpg'),
      fit: fit, height: 120,
      frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) {
        return Container(
            padding: EdgeInsets.all(2.0),
            color: Colors.deepOrange.withOpacity(0.4),
            child: child);
      });
}

Flutter 127: 图解基础 Image 小组件

10. centerSlice

    centerSlice 用于设置一个矩形,类似于 .9.png 图一样,进行固定范围的拉伸;其中注意 fit 类型不可为 BoxFit.noneBoxFit.cover

_imageWid10(index) {
  Rect rect;
  if (index == 0) {
    rect = null;
  } else if (index == 1) {
    rect = Rect.fromLTWH(100, 100, 50, 50);
  } else if (index == 2) {
    rect = Rect.fromLTWH(50, 50, 50, 50);
  }
  return Image(
      fit: BoxFit.contain,
      width: 250,
      height: 250,
      centerSlice: rect,
      image: AssetImage('images/icon_music.png'));
}

Flutter 127: 图解基础 Image 小组件


    Image 案例源码


    小菜对 Image 的学习还仅限于基础应用,对于平时不常用的属性有了进一步了解,但对源码的学习还不够深入;如有错误,请多多指导!

来源: 阿策小和尚
上一篇:Flutter 129: 图解 ToggleButtons 按钮切换容器组


下一篇:8月22日云栖精选夜读 | Java开发者必看!机器学习开发库精选!