Flutter图片加载与扩展功能插件extended_image_http_13_fork的使用

Flutter图片加载与扩展功能插件extended_image_http_13_fork的使用

简介

extended_image 是一个强大的第三方库，用于扩展 Flutter 的 Image 组件功能。它支持占位符（加载/失败状态）、网络图片缓存、缩放平移图片、照片查看器、滑动退出页面、编辑器（裁剪、旋转、翻转）等功能。

使用步骤

导入依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  extended_image: ^4.0.0

缓存网络图片

简单使用

可以使用 ExtendedImage.network 作为 Image 小部件：

ExtendedImage.network(
  url,
  width: ScreenUtil.instance.setWidth(400),
  height: ScreenUtil.instance.setWidth(400),
  fit: BoxFit.fill,
  cache: true,
  border: Border.all(color: Colors.red, width: 1.0),
  shape: BoxShape.circle,
  borderRadius: BorderRadius.all(Radius.circular(30.0)),
)

使用 ExtendedNetworkImageProvider

ExtendedNetworkImageProvider(
  this.url, {
  this.scale = 1.0,
  this.headers,
  this.cache: false,
  this.retries = 3,
  this.timeLimit,
  this.timeRetry = const Duration(milliseconds: 100),
  CancellationToken cancelToken,
})  : assert(url != null),
      assert(scale != null),
      cancelToken = cancelToken ?? CancellationToken();

参数说明：

加载状态

ExtendedImage 提供了三种状态：加载中、完成、失败。可以通过 loadStateChanged 回调定义自定义状态小部件。

final LoadStateChanged loadStateChanged;

enum LoadState {
  loading,
  completed,
  failed
}

final bool enableLoadState;

示例代码：

ExtendedImage.network(
  url,
  width: ScreenUtil.instance.setWidth(600),
  height: ScreenUtil.instance.setWidth(400),
  fit: BoxFit.fill,
  cache: true,
  loadStateChanged: (ExtendedImageState state) {
    switch (state.extendedImageLoadState) {
      case LoadState.loading:
        _controller.reset();
        return Image.asset(
          "assets/loading.gif",
          fit: BoxFit.fill,
        );
        break;

      case LoadState.completed:
        _controller.forward();
        return FadeTransition(
          opacity: _controller,
          child: ExtendedRawImage(
            image: state.extendedImageInfo?.image,
            width: ScreenUtil.instance.setWidth(600),
            height: ScreenUtil.instance.setWidth(400),
          ),
        );
        break;
      case LoadState.failed:
        _controller.reset();
        return GestureDetector(
          child: Stack(
            fit: StackFit.expand,
            children: [
              Image.asset(
                "assets/failed.jpg",
                fit: BoxFit.fill,
              ),
              Positioned(
                bottom: 0.0,
                left: 0.0,
                right: 0.0,
                child: Text(
                  "加载图片失败，点击重新加载",
                  textAlign: TextAlign.center,
                ),
              )
            ],
          ),
          onTap: () {
            state.reLoadImage();
          },
        );
        break;
    }
  },
)

缩放和平移

ExtendedImage.network(
  imageTestUrl,
  fit: BoxFit.contain,
  mode: ExtendedImageMode.gesture,
  initGestureConfigHandler: (state) {
    return GestureConfig(
        minScale: 0.9,
        animationMinScale: 0.7,
        maxScale: 3.0,
        animationMaxScale: 3.5,
        speed: 1.0,
        inertialSpeed: 100.0,
        initialScale: 1.0,
        inPageView: false,
        initialAlignment: InitialAlignment.center,
        );
  },
)

双击动画示例：

onDoubleTap: (ExtendedImageGestureState state) {
  var pointerDownPosition = state.pointerDownPosition;
  double begin = state.gestureDetails.totalScale;
  double end;

  _animation?.removeListener(animationListener);
  _animationController.stop();
  _animationController.reset();

  if (begin == doubleTapScales[0]) {
    end = doubleTapScales[1];
  } else {
    end = doubleTapScales[0];
  }

  animationListener = () {
    state.handleDoubleTap(
        scale: _animation.value,
        doubleTapPosition: pointerDownPosition);
  };
  _animation = _animationController
      .drive(Tween<double>(begin: begin, end: end));

  _animation.addListener(animationListener);
  _animationController.forward();
},

编辑器

ExtendedImage.network(
  imageTestUrl,
  fit: BoxFit.contain,
  mode: ExtendedImageMode.editor,
  extendedImageEditorKey: editorKey,
  initEditorConfigHandler: (state) {
    return EditorConfig(
        maxScale: 8.0,
        cropRectPadding: EdgeInsets.all(20.0),
        hitTestSize: 20.0,
        cropAspectRatio: _aspectRatio.aspectRatio);
  },
);

滑动退出页面

ExtendedImageSlidePage(
  child: result,
  slideAxis: SlideAxis.both,
  slideType: SlideType.onlyImage,
  onSlidingPage: (state) {
    var showSwiper = !state.isSliding;
    if (showSwiper != _showSwiper) {
      _showSwiper = showSwiper;
      rebuildSwiper.add(_showSwiper);
    }
  },
)