Question

我有一个 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;
              });
            },
          ),
        ),

Answer 1

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

您可以复制 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 有什么问题。如果我找到更好的解决方案，我会更新这篇文章。

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

1 个答案: