如何解决SingleChildScrollView与InteractiveViewer的手势冲突问题

问题场景与代码 #

我在SingleChildScrollView中嵌套使用InteractiveViewer，完整代码如下：

import 'package:flutter/material.dart';
import '../constants/images.dart';

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

class MyApp extends StatelessWidget {
  final List<String> images = [Images.IMG1, Images.IMG2, Images.IMG3];

  MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: [
              for (var image in images) ...[
                SizedBox(width:double.infinity,child: Divider(thickness: 5,)),
                Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: ClipOval(
                        child: CircleAvatar(
                          radius: 24,
                          child: Image.asset(Images.PROFILE_IMAGE),
                        ),
                      ),
                    ),
                    Text('User1'),
                  ],
                ),
                InteractiveViewer(
                    child: Image.asset(
                  image,
                  fit: BoxFit.fitWidth,
                )),
                Row(
                  children: [
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Icon(Icons.favorite),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Icon(Icons.comment),
                    ),
                  ],
                )
              ]
            ],
          ),
        ),
      ),
    );
  }
}

问题现象 #

尝试对InteractiveViewer进行缩放操作时，首次操作通常无效，需要在不同触摸位置尝试5-6次才能生效；移除SingleChildScrollView后该组件可正常使用。

解决办法 #

问题根源是SingleChildScrollView与InteractiveViewer的手势识别冲突，ScrollView会优先拦截触摸事件，导致InteractiveViewer无法及时响应缩放手势。

方案：给InteractiveViewer添加手势抢占器 #

1. 先导入手势相关包：

import 'package:flutter/gestures.dart';

2. 修改InteractiveViewer代码，添加gestureRecognizers参数，用EagerGestureRecognizer优先抢占手势事件：

InteractiveViewer(
  gestureRecognizers: {
    Factory<OneSequenceGestureRecognizer>(
      () => EagerGestureRecognizer(),
    ),
  },
  child: Image.asset(
    image,
    fit: BoxFit.fitWidth,
  ),
),

原理说明 #

EagerGestureRecognizer会在触摸事件开始时立即抢占事件处理权，确保InteractiveViewer能第一时间响应缩放、平移等手势，避免SingleChildScrollView拦截事件导致的操作无效问题。

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