带有 CarouselSlider 的颤动 InteractiveViewer 很难捏缩放

问题描述

我有一个 Flutter 应用程序，它显示带有 CarouselSlider 和 InteractiveViewer 的图像，因此用户可以捏合来放大和缩小。问题是这样做非常困难，通常捏合运动会使 CarouselSlider 在照片之间滑动。一种解决方案是使用 neverscrollablescrollphysics() 禁用幻灯片，但我不想这样做。

这是代码的一部分：

CarouselSlider(
          items: widget.photos.map((i) {
            return Container(
              margin: EdgeInsets.all(10),child: InteractiveViewer(
                scaleEnabled: true,minScale: 0.1,maxScale: 10.0,child: Image.network(i),),);
          }).toList(),options: CarouselOptions(
            enableInfiniteScroll: false,height: MediaQuery.of(context).size.height,disableCenter: true,viewportFraction: 1.0,initialPage: widget.position,onPageChanged: (index,reason) {
              setState(() {
                widget.position = index;
              });
            },

解决方法

这是第一个快速修复（我会尽快更新）

您可以复制 CarouselSlider-Class 并将其命名为 MyCarouselSlider

然后像这样编辑 getGestrureWrapper-Method

  Widget getGestureWrapper(Widget child) {
    Widget wrapper;
    if (widget.options.height != null) {
      wrapper = Container(height: widget.options.height,child: child);
    } else {
      wrapper = AspectRatio(aspectRatio: widget.options.aspectRatio,child: child);
    }
    return GestureDetector(
      child: NotificationListener(
        onNotification: (dynamic notification) {
          if (widget.options.onScrolled != null && notification is ScrollUpdateNotification) {
            widget.options.onScrolled(carouselState.pageController.page);
          }
          return false;
        },child: wrapper,),behavior: HitTestBehavior.opaque,dragStartBehavior: DragStartBehavior.start,);

    // return RawGestureDetector(
    //   behavior: HitTestBehavior.translucent,//   gestures: {
    //     _MultipleGestureRecognizer: GestureRecognizerFactoryWithHandlers<_MultipleGestureRecognizer>(
    //         () => _MultipleGestureRecognizer(),(_MultipleGestureRecognizer instance) {
    //       instance.onStart = (_) {
    //         onPanDown();
    //       };
    //       instance.onDown = (_) {
    //         onPanDown();
    //       };
    //       instance.onEnd = (_) {
    //         onPanUp();
    //       };
    //       instance.onCancel = () {
    //         onPanUp();
    //       };
    //     }),//   },//   child: NotificationListener(
    //     onNotification: (dynamic notification) {
    //       if (widget.options.onScrolled != null && notification is ScrollUpdateNotification) {
    //         widget.options.onScrolled(carouselState.pageController.page);
    //       }
    //       return false;
    //     },//     child: wrapper,//   ),// );
  }

并改用您新创建的 MyCarouselSlider-Class。 重要提示：这不是最终解决方案。

我不确定 RawGestureDetector 有什么问题。如果我找到更好的解决方案，我会更新这篇文章。