flutter - 使用交互式查看器 (FLUTTER) 时的手势检测器问题

Question

工作:
我正在为书籍创建应用程序，我正在链接图像并滑动到下一页
我正在使用手势检测器滑动下一页
我正在使用 InteractiveViewer 进行缩放页面
问题:
问题是当我使用捏来放大它的成功工作但是当拖动页面以查看更多单词时。它检测手势检测器并转到其他页面..
我想要什么:
我想在使用 InteractiveViewer 时禁用gestureDetector，
就像当我处于放大模式时，手势检测器禁用，当我缩小时
GestureDetector 启用。

import 'package:flutter/material.dart';

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

  @override
  _Screen2State createState() => _Screen2State();
}

class _Screen2State extends State<Screen2> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
           appBar: appbarr(),
        body: GestureDetector(
          onHorizontalDragUpdate: (details) {  
        // Note: Sensitivity is integer used when you don't want to mess up vertical drag
        int sensitivity = 8;
        int senElse = -8;
        if (details.delta.dx > sensitivity) {
            Navigator.pop(context);
        } 
        else if (details.delta.dx < senElse )
        {
             Navigator.push(context, MaterialPageRoute(builder: (context) => Screen3()));
         }
        },
          child: InteractiveViewer(
            panEnabled: true,
            minScale: 0.5,
            maxScale: 5,
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/2.jpg"),
                fit: BoxFit.fill,
              ),
              ),
            ),
          ),
        )
    );
  }
}

Answer 1

您需要检查用户是否已放大。如果用户放大了我们不会渲染 GestureDetector .我们只使用 GestureDetector是用户没有缩放。要检查用户是否已放大，我们使用 TranformationController并将其当前值与单位矩阵进行比较。
这是工作代码:

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

  @override
  _Screen2State createState() => _Screen2State();
}

class _Screen2State extends State<Screen2> {
  final transformationController = TransformationController();

  bool get userHasZoomedIn => (Matrix4.identity() - transformationController.value).infinityNorm() > 0.000001;
  
  @override
  Widget build(BuildContext context) {
    final interactiveImage = InteractiveViewer(
      panEnabled: true,
      minScale: 0.5,
      maxScale: 5,
      transformationController: transformationController,
      onInteractionEnd: (details) => setState((){}),
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/2.jpg"),
            fit: BoxFit.fill,
          ),
        ),
      ),
    );
    final appBar = AppBar(title: Text('Title'));

    if(userHasZoomedIn){
      return Scaffold(
        appBar: appBar,
        body: interactiveImage,
      );
    }
    
    return Scaffold(
      appBar: appBar,
      body: GestureDetector(
        onHorizontalDragUpdate: (details) {
          // Note: Sensitivity is integer used when you don't want to mess up vertical drag
          int sensitivity = 8;
          int senElse = -8;
          if (details.delta.dx > sensitivity) {
            Navigator.pop(context);
          }
          else if (details.delta.dx < senElse )
          {
            Navigator.push(context, MaterialPageRoute(builder: (context) => Screen3()));
          }
        },
        child: interactiveImage,
      )
    );
  }
}

请注意，我们调用 setState在 InteractionViewer.onInteractionEnd .另一种方法是向 TransformationController 添加一个监听器。 :

transformationController.addListener(() {
  setState(() {});
});

你不应该这样做，因为那会触发 setState()太频繁了，这会导致糟糕的用户体验和高 CPU 和 GPU 负载。