Flutter 127: 图解基础 Image 小组件

2021-08-31 20:15:47

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

Image

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

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

源码分析

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'));

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'));
}

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'));
}

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'));
}

5. width & height

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

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

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'));
}

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);
      });
}

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);
      });
}

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);
      });
}

10. centerSlice

centerSlice 用于设置一个矩形，类似于 .9.png 图一样，进行固定范围的拉伸；其中注意 fit 类型不可为 BoxFit.none 或 BoxFit.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'));
}

Image 案例源码

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

来源：阿策小和尚

码农公寓