image - fluttercandies extended_image.如何用 1 根手指双击而不需要 2 根手指来放大图像？

Question

https://github.com/fluttercandies/extended_image

https://github.com/fluttercandies/extended_image/tree/master/example

https://github.com/fluttercandies/extended_image/blob/master/example/lib/pages/zoom_image_demo.dart

fluttercandies extended_image.如何用 1 根手指双击而不需要 2 根手指来放大图像？当导航器从页面滑出时，如何让滑动图像弹出？

尝试用 1 根手指双击来实现缩放/平移图像，而不是需要 2 根手指来展开缩放图像。这段代码有两个问题，想知道是否有人有任何想法。该类非常简单，只有 2 个字符串:传递给它的图像和标题。

1，我需要在双击时展开图像。我希望用户能够用一根手指而不是两根手指来扩展图像。我想我需要把这段代码放在最后。好处是，一旦展开，双击就可以缩小图像尺寸。当它处于正常尺寸时，如何让它做相反的事情？

2、图片滑出页面导致黑屏。值得庆幸的是，这不会卡住或崩溃应用程序，但它会给用户留下一个空白屏幕，并且需要按下系统后退按钮。我希望幻灯片能够使导航器弹出回到原始屏幕。

首先，这是我如何将图像和标题传递到 expandimage.dart 的示例代码。

FlatButton(
            child: Image.asset(_kAsset5),
            onPressed: () async {
              Navigator.push(
                context,
                MaterialPageRoute(
                    builder: (context) => ExpandImage(
                          image: _kAsset5,
                          title: "\'go help\' 1",
                        )),
              );
            },
          ),

这是我用于这个“expandimage.dart”的代码，其中很多代码都是基于来自 flutter candies/extended image example 的平移/缩放示例。

import 'package:flutter/material.dart';
import 'package:extended_image/extended_image.dart';

class ExpandImage extends StatelessWidget {
  final String image, title;

  ExpandImage({this.image, this.title});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.red[900],
        appBar: AppBar(
          backgroundColor: Colors.red[900],
          leading: IconButton(
            icon: Icon(Icons.close),
            onPressed: Navigator.of(context).pop,
          ),
          title: Text(
            title,
            style: TextStyle(
              color: Colors.yellow,
              inherit: true,
              fontWeight: FontWeight.w300,
              fontStyle: FontStyle.italic,
              letterSpacing: 2.0, //1.2
            ),
          ),
          centerTitle: true,
        ),
        body: SizedBox.expand(
          // child: Hero(
          // tag: heroTag,
          child: ExtendedImageSlidePage(
            slideAxis: SlideAxis.both,
            slideType: SlideType.onlyImage,
            child: ExtendedImage(
              //disable to stop image sliding off page && entering dead end without back button.
              //setting to false means it won't slide at all.
              enableSlideOutPage: true,
              mode: ExtendedImageMode.gesture,
              initGestureConfigHandler: (state) => GestureConfig(
                minScale: 1.0,
                animationMinScale: 0.8,
                maxScale: 3.0,
                animationMaxScale: 3.5,
                speed: 1.0,
                inertialSpeed: 100.0,
                initialScale: 1.0,
                inPageView: false,
              ),
              // onDoubleTap: ?  zoom in on image
              fit: BoxFit.scaleDown,
              image: AssetImage(
                image,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

这是传入的示例图像。滑动图像时页面变红，然后在图像滑出页面时变黑。

Answer 1

希望对大家有所帮助，有疑问可以在评论中提问。

class _DetailState extends State<Detail> with TickerProviderStateMixin{


@override
  Widget build(BuildContext context) {
  AnimationController _animationController = AnimationController(duration: Duration(milliseconds: 200),vsync: this);
  Function() animationListener = () {};
  Animation? _animation;
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        child: ExtendedImage.network(
            widget.wallpaper.path,
            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) {
              ///you can use define pointerDownPosition as you can,
              ///default value is double tap pointer down postion.
              var pointerDownPosition = state.pointerDownPosition;
              double begin = state.gestureDetails!.totalScale!;
              double end;

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

              if (begin == 1) {
                end = 1.5;
              } else {
                end = 1;
              }
              animationListener = () {
                //print(_animation.value);
                state.handleDoubleTap(
                    scale: _animation!.value,
                    doubleTapPosition: pointerDownPosition);
              };
              _animation = _animationController
                  .drive(Tween<double>(begin: begin, end: end));

              _animation!.addListener(animationListener);

              _animationController.forward();
            },
          ),
      ),
  }
}

如果有帮助，请标记为正确。