无法在颤振中创建英雄动画的缩放放大

Question

我试图添加放大放大动画的图像，但我也使用英雄动画从肖像到景观动画时，我点击图像。

我试着用GestureDetector来放大/缩小动画，但是似乎没有什么效果。

  double scale = 0.0;
  double _scaleFactor = 1.0;
  double _baseScaleFactor = 1.0;

return GestureDetector(
                                  behavior: HitTestBehavior.translucent,
                                  onScaleStart: (details) {
                                    _baseScaleFactor = _scaleFactor;
                                  },
                                  onScaleUpdate: (details) {
                                    setState(() {
                                      _scaleFactor =
                                          _baseScaleFactor * details.scale;
                                    });
                                  },
                                  onTap: () {
                                    Navigator.of(context, rootNavigator: true)
                                        .pushNamed('/historyPage');
                                    SystemChrome.setPreferredOrientations(
                                        [DeviceOrientation.landscapeRight]);
                                  },
                                  child: Hero(
                                    tag: snapshotImage,
                                    child: Image.memory(
                                      bytes!,
                                      width: 400,
                                      height: 400,
                                    ),
                                  ),
                                );

Answer 1

我没有注意到在我想要使用放大/缩放的地方，我是如何把屏幕弄乱的。另外，我还发现了另一个很好的实现方法。

因此，在第二个屏幕上，您可以获得全屏图像(我使用英雄动画制作)，您需要使用以下代码：

class OpenWideImageHero extends StatefulWidget {
  const OpenWideImageHero({Key? key}) : super(key: key);

  @override
  State<OpenWideImageHero> createState() => _OpenWideImageHeroState();
}

class _OpenWideImageHeroState extends State<OpenWideImageHero> {
  final _transformationController = TransformationController();
  late TapDownDetails _doubleTapDetails;

  void _handleDoubleTapDown(TapDownDetails details) {
    _doubleTapDetails = details;
  }

  void _handleDoubleTap() {
    if (_transformationController.value != Matrix4.identity()) {
      _transformationController.value = Matrix4.identity();
    } else {
      final position = _doubleTapDetails.localPosition;
      _transformationController.value = Matrix4.identity()
        ..translate(-position.dx * 2, -position.dy * 2)
        ..scale(3.0);
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onDoubleTapDown: _handleDoubleTapDown,
      onDoubleTap: _handleDoubleTap,
      onTap: () {
        tabControllerGlobally.animateTo(2);
        // Navigator.of(context, rootNavigator: true).pushNamed('/historyPage2');
        SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]);
      },
      child: Hero(
        tag: 'snapshotImage',
        child: InteractiveViewer(
          transformationController: _transformationController,
          child: Image.memory(
            bytes!,
            width: 400,
            height: 400,
          ),
        ),
      ),
    );
  }
}