Flutter如何实现同时支持缩放与滚动的交互效果？

想要实现如图所示的交互效果：

但使用以下代码尝试时，无法同时检测缩放与滚动操作，只能响应其中一种，恳请提供帮助。

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  double height = 400;
  double initialHeight = 400;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: GestureDetector(
        onScaleUpdate: (details) {
          double h = initialHeight * details.scale;

          if (h > 400 && h < 2000) {
            height = h;
          }

          setState(() {});
        },
        child: SingleChildScrollView(
          child: Container(
            color: Colors.amber,
            width: double.infinity,
            height: height,
            child: Text(height.toString()),
          ),
        ),
      ),
    );
  }
}

Flutter中GestureDetector和SingleChildScrollView的手势识别存在竞争关系，默认的手势识别逻辑会优先处理其中一种手势，导致另一种操作无法被响应。

以下提供两种可行的解决方式：

方案一：使用RawGestureDetector自定义手势优先级 #

通过RawGestureDetector注册缩放和滚动手势识别器，调整手势竞争规则，让两者可以共存：

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  double height = 400;
  double initialHeight = 400;
  final ScrollController _scrollController = ScrollController();

  final ScaleGestureRecognizer _scaleRecognizer = ScaleGestureRecognizer();
  final VerticalDragGestureRecognizer _dragRecognizer = VerticalDragGestureRecognizer();

  @override
  void initState() {
    super.initState();
    _scaleRecognizer.onUpdate = (ScaleUpdateDetails details) {
      double h = initialHeight * details.scale;
      if (h > 400 && h < 2000) {
        setState(() {
          height = h;
        });
      }
    };
    _dragRecognizer.onUpdate = (DragUpdateDetails details) {
      _scrollController.jumpTo(_scrollController.offset - details.delta.dy);
    };
  }

  @override
  void dispose() {
    _scaleRecognizer.dispose();
    _dragRecognizer.dispose();
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: RawGestureDetector(
        gestures: {
          ScaleGestureRecognizer: GestureRecognizerFactoryWithHandlers<ScaleGestureRecognizer>(
            () => _scaleRecognizer,
            (instance) {},
          ),
          VerticalDragGestureRecognizer: GestureRecognizerFactoryWithHandlers<VerticalDragGestureRecognizer>(
            () => _dragRecognizer,
            (instance) {
              instance.gestureSettings = const GestureSettings(
                velocityTrackerStrategy: VelocityTrackerStrategy.estimates,
              );
            },
          ),
        },
        behavior: HitTestBehavior.opaque,
        child: SingleChildScrollView(
          controller: _scrollController,
          child: Container(
            color: Colors.amber,
            width: double.infinity,
            height: height,
            child: Center(child: Text(height.toStringAsFixed(1))),
          ),
        ),
      ),
    );
  }
}

方案二：结合Listener与GestureDetector分离手势处理 #

通过状态标记区分缩放和滚动状态，禁用SingleChildScrollView的默认滚动，用Listener手动处理滚动操作：

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  double height = 400;
  double initialHeight = 400;
  final ScrollController _scrollController = ScrollController();
  bool _isScaling = false;

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Listener(
        onPointerMove: (PointerMoveEvent event) {
          if (!_isScaling) {
            _scrollController.jumpTo(_scrollController.offset - event.delta.dy);
          }
        },
        child: GestureDetector(
          onScaleStart: (details) {
            _isScaling = true;
            initialHeight = height;
          },
          onScaleUpdate: (details) {
            double h = initialHeight * details.scale;
            if (h > 400 && h < 2000) {
              setState(() {
                height = h;
              });
            }
          },
          onScaleEnd: (details) {
            _isScaling = false;
          },
          child: SingleChildScrollView(
            controller: _scrollController,
            physics: const NeverScrollableScrollPhysics(),
            child: Container(
              color: Colors.amber,
              width: double.infinity,
              height: height,
              child: Center(child: Text(height.toStringAsFixed(1))),
            ),
          ),
        ),
      ),
    );
  }
}

• 方案一通过自定义手势识别规则，让两种手势可以同时被识别，交互逻辑更自然。
• 方案二通过状态标记隔离操作状态，实现方式更简单直观，适合快速开发需求。

内容的提问来源于stack exchange，提问作者Develocode 777