TabBarView 中的 GestureDetector - 嵌套滚动？

Question

我有一个 TabBarView，其中每个选项卡都包含一个 Image，包裹在一个 GestureDetector 中，用于缩放和平移。如果重要的话，这就是我目前实现缩放的方式：.

现在我遇到的问题是，只有当捏合移动非常垂直时缩放才有效。如果我偏离了一点点，触摸事件会立即用于滑动到下一个选项卡，即使我用的是两根手指。而且我认为水平平移根本不起作用。

Flutter 中是否有任何机制允许内部 GestureDetector 在将某些触摸事件提供给 TabBarView 之前拦截某些触摸事件（但不是其他，并不总是）？

Answer 1

我认为如果 Flutter 的平移手势识别器检测到第二个指针向下并且缩放手势识别器处于活动状态，则它可能应该让位于缩放手势识别器。如果您同意，请随时提出问题。

同时，您可以 "disable" PageView 的平移手势识别器，方法是在其上放置一个不透明 GestureRecognizer 并将缩放事件转发到您的州。

import 'package:flutter/material.dart';
import 'package:vector_math/vector_math_64.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new DefaultTabController(
      length: 2,
      child: new Scaffold(
        appBar: new AppBar(
          bottom: new TabBar(
            tabs: [
              new Tab(text: 'foo'),
              new Tab(text: 'bar'),
            ],
          ),
        ),
        body: new ScalableTabBarView()
      ),
    );
  }
}

class ScalableTabBarView extends StatelessWidget {

  final List<GlobalKey<ScaledState>> keys = <GlobalKey<ScaledState>>[
    new GlobalKey<ScaledState>(),
    new GlobalKey<ScaledState>(),
  ];

  Widget build(BuildContext context) {
    return new Stack(children: [
      new TabBarView(
        children: [
          new Center(
            child: new Scaled(
              child: new FlutterLogo(),
              key: keys[0],
            ),
          ),
          new Center(
            child: new Scaled(
              child: new FlutterLogo(),
              key: keys[1],
            ),
          ),
        ],
      ),
      new GestureDetector(
        behavior: HitTestBehavior.opaque,
        onScaleStart: (ScaleStartDetails details) {
          keys[DefaultTabController.of(context).index].currentState.onScaleStart(details);
        },
        onScaleUpdate: (ScaleUpdateDetails details) {
          keys[DefaultTabController.of(context).index].currentState.onScaleUpdate(details);
        },
        onScaleEnd: (ScaleEndDetails details)
        {
          keys[DefaultTabController.of(context).index].currentState.onScaleEnd(details);
        }
      ),
    ],
    );
  }
}

class Scaled extends StatefulWidget {
  Scaled({ Key key, this.child }) : super(key: key);

  final Widget child;
  State createState() => new ScaledState();
}

class ScaledState extends State<Scaled> {

  double _previousScale;
  double _scale = 1.0;

  void onScaleStart(ScaleStartDetails details) {
    print(details);
    setState(() {
      _previousScale = _scale;
    });
  }
  void onScaleUpdate(ScaleUpdateDetails details) {
    print(details);
    setState(() {
      _scale = _previousScale * details.scale;
    });
  }
  void onScaleEnd(ScaleEndDetails details) {
    print(details);
    setState(() {
      _previousScale = null;
    });
  }
  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
        child: new Transform(
          transform: new Matrix4.diagonal3(new Vector3(_scale, _scale, _scale)),
          alignment: FractionalOffset.center,
          child: widget.child,
        ),
    );
  }
}

处理 TabBarView 之外的缩放手势也可用于记住选项卡的缩放状态，而不是让它们在屏幕外时重置为 1.0。

TabBarView 中的 GestureDetector - 嵌套滚动？

GestureDetector within TabBarView - nested scrolling?

flutter