如何在图片捏合缩放时禁用SingleChildScrollView滚动

我使用pinch_zoom_release_unzoom库实现图片捏合缩放功能，并将其嵌套在SingleChildScrollView中。但用户双指捏合缩放图片时，由于页面本身可滚动，导致缩放操作难以顺利进行，需要解决这个手势冲突问题。

解决方案 #

核心思路是在缩放操作进行时禁用页面滚动，缩放结束后恢复滚动。通过PinchZoomReleaseUnzoomWidget的回调方法监听缩放状态，动态切换SingleChildScrollView的滚动物理效果。

修改后的完整代码 #

import 'package:flutter/material.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
import 'package:pinch_zoom_release_unzoom/pinch_zoom_release_unzoom.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      home: HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final String imageUrl = 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg';
  bool _isZooming = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Tutorial'),
      ),
      body: Column(
        children: [
          Center(
            child: ElevatedButton(
              onPressed: () {
                showMaterialModalBottomSheet(
                  expand: false,
                  context: context,
                  builder: (context) => PinchZoomReleaseUnzoomWidget(
                    onZoomStart: () {
                      setState(() {
                        _isZooming = true;
                      });
                    },
                    onZoomEnd: () {
                      setState(() {
                        _isZooming = false;
                      });
                    },
                    child: SingleChildScrollView(
                      controller: ModalScrollController.of(context),
                      physics: _isZooming 
                          ? const NeverScrollableScrollPhysics() 
                          : const ClampingScrollPhysics(),
                      child: Column(
                        children: [
                          const SizedBox(height: 100),
                          Image.network(imageUrl),
                          const SizedBox(height: 1000),
                        ],
                      ),
                    ),
                  ),
                );
              },
              child: const Text('showModalBottomSheet'),
            ),
          ),
        ],
      ),
    );
  }
}

关键逻辑说明 #

• 状态管理：将原StatelessWidget改为StatefulWidget，通过_isZooming变量标记当前是否处于缩放状态
• 缩放监听：利用PinchZoomReleaseUnzoomWidget的onZoomStart和onZoomEnd回调，实时更新缩放状态
• 滚动控制：根据_isZooming的值切换SingleChildScrollView的physics属性：
  • 缩放时使用NeverScrollableScrollPhysics，禁止页面滚动，确保缩放操作不受干扰
  • 缩放结束后恢复ClampingScrollPhysics，页面重新支持滚动

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