如何修复 InteractiveViewer 和滚动视图竞争手势

Question

我有一个垂直的scrollView，然后是一个水平的pageView，其中包含包裹在其中的图像InteractiveViewer。

但当我尝试使用 InteractiveViewer 进行放大时，情况相当混乱。所有这些滚动视图都在争夺手势，我想找到一种更简单的方法来解决这个问题。

编辑：所以问题似乎出在 onScale 手势（GestureDetector()）或 2 个指针手势上

我有类似的东西

CustomScrollView(
  slivers: [
   const SliverToBoxAdapter(
         child: Container(
           width: double.infinity,
           height: 400,
           child: PageView(
             ...
             InteractiveViewer()
             ...
        )
      )
    ),
 ]
)

Answer 1

当用户开始使用交互时，您可以从相关小部件中禁用物理，也许可以添加一些基于比例、手指等的条件。

  ScrollPhysics _pagePhysics = const PageScrollPhysics();
  ScrollPhysics _customScrollViewPhysics = const ScrollPhysics();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CustomScrollView(
          // assign physic for scroll ------------------------
          physics: _customScrollViewPhysics,
          slivers: [
            SliverToBoxAdapter(
              child: SizedBox(
                height: 400,
                child: PageView(
                  // assign physic for page view --------------------
                  physics: _pagePhysics,
                  children: [
                    Container(
                      color: Colors.blue,
                    ),
                    InteractiveViewer(
                      onInteractionStart: (details) {
                        /// you can add some condition like this
                        //if use 2 finger
                        //if(details.pointerCount == 2){}

                        // then disable physic
                        setState(() {
                          _pagePhysics = const NeverScrollableScrollPhysics();
                          _customScrollViewPhysics =
                              const NeverScrollableScrollPhysics();
                        });
                        
                      },
                      onInteractionUpdate: (details) {
                        //condition based on scale
                        if (details.scale == 1.2) {}
                      },
                      onInteractionEnd: (details) {
                        // after interaction revert it
                        setState(() {
                          _pagePhysics = const PageScrollPhysics();
                          _customScrollViewPhysics = const ScrollPhysics();
                        });
                        
                      },
                      child: Container(
                        color: Colors.yellow,
                        child: const Text("Lorem Ipsum"),
                      ),
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

如果interactiveviewer没有为 pageview 或 customScroll 留出空间，那么添加一些按钮总是好的，这样用户就不会卡在上面InteractiveViewer。你应该让你的用户界面像这样：