Flutter自定义缩放功能插件custom_zoom_widget的使用

Flutter自定义缩放功能插件custom_zoom_widget的使用

功能

custom_zoom_widget 是一个用于在可滚动屏幕中显示可缩放图片的自定义组件。它允许用户以友好的方式缩放图片，当用户释放屏幕并停止捏合手势时，图片会平滑地恢复到原始大小。

使用方法

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 custom_zoom_widget 依赖：

dependencies:
  custom_zoom_widget: ^0.0.1

2. 基本用法

以下是一个简单的示例，展示如何使用 CustomZoomWidget 来显示一张网络图片：

CustomZoomWidget(
  child: Image.network(
    'https://storage.googleapis.com/cms-storage-bucket/70760bf1e88b184bb1bc.png'
  ),
)

3. 高级参数

CustomZoomWidget 还支持一些额外的参数，以便根据需求进行更精细的控制。例如：

CustomZoomWidget(
  child: Image.network('https://storage.googleapis.com/cms-storage-bucket/70760bf1e88b184bb1bc.png'),
  minScale: 0.8, // 最小缩放比例
  maxScale: 4,   // 最大缩放比例
  resetDuration: const Duration(milliseconds: 200), // 恢复动画持续时间
  boundaryMargin: const EdgeInsets.only(bottom: 0), // 边界边距
  clipBehavior: Clip.none, // 是否裁剪内容
  useOverlay: true, // 是否使用遮罩层
  maxOverlayOpacity: 0.5, // 遮罩层最大透明度
  overlayColor: Colors.black, // 遮罩层颜色
  fingersRequiredToPinch: 2, // 需要的手指数量来触发捏合手势
)

4. 在可滚动视图中使用

在可滚动视图（如 SingleChildScrollView）中使用 CustomZoomWidget 时，可能会遇到一个问题：单指拖动会覆盖双指缩放手势。为了解决这个问题，可以在检测到第二个手指触摸屏幕时，将滚动物理属性设置为 NeverScrollableScrollPhysics，从而禁用滚动，使缩放手势优先。

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

  [@override](/user/override)
  State<TestSimpleScroll> createState() => _TestSimpleScrollState();
}

class _TestSimpleScrollState extends State<TestSimpleScroll> {
  bool blockScroll = false;
  ScrollController controller = ScrollController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      controller: controller,
      physics: blockScroll ? NeverScrollableScrollPhysics() : ScrollPhysics(),
      child: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: Container(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              SizedBox(
                width: 300,
                height: 250,
                child: CustomZoomWidget(
                  child: Image.network(
                    'https://www.animalfriends.co.uk/siteassets/media/images/article-images/cat-articles/38_afi_article1_caring-for-a-kitten-tips-for-the-first-month.png',
                  ),
                  twoFingersOn: () => setState(() => blockScroll = true), // 当两个手指触摸屏幕时，禁用滚动
                  twoFingersOff: () => Future.delayed(
                    CustomZoomWidget.defaultResetDuration,
                    () => setState(() => blockScroll = false), // 延迟恢复滚动
                  ),
                ),
              ),
              const SizedBox(height: 5000,), // 模拟长内容
            ],
          ),
        ),
      ),
    );
  }
}

5. 模拟器测试

在模拟器中测试时，可以通过设置 fingersRequiredToPinch: -1 来禁用对手指数量的要求，方便测试缩放功能：

CustomZoomWidget(
  child: Image.network('https://storage.googleapis.com/cms-storage-bucket/70760bf1e88b184bb1bc.png'),
  fingersRequiredToPinch: -1, // 禁用手指数量要求
)

完整示例代码

以下是一个完整的示例代码，展示了如何在一个可滚动页面中使用 CustomZoomWidget：

import 'package:flutter/material.dart';
import 'package:custom_zoom_widget/custom_zoom_widget.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Zoom Widget Example')),
        body: TestSimpleScroll(),
      ),
    );
  }
}

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

  [@override](/user/override)
  State<TestSimpleScroll> createState() => _TestSimpleScrollState();
}

class _TestSimpleScrollState extends State<TestSimpleScroll> {
  bool blockScroll = false;
  ScrollController controller = ScrollController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      controller: controller,
      physics: blockScroll ? NeverScrollableScrollPhysics() : ScrollPhysics(),
      child: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: Container(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              SizedBox(
                width: 300,
                height: 250,
                child: CustomZoomWidget(
                  child: Image.network(
                    'https://www.animalfriends.co.uk/siteassets/media/images/article-images/cat-articles/38_afi_article1_caring-for-a-kitten-tips-for-the-first-month.png',
                  ),
                  twoFingersOn: () => setState(() => blockScroll = true), // 当两个手指触摸屏幕时，禁用滚动
                  twoFingersOff: () => Future.delayed(
                    CustomZoomWidget.defaultResetDuration,
                    () => setState(() => blockScroll = false), // 延迟恢复滚动
                  ),
                  minScale: 0.8, // 最小缩放比例
                  maxScale: 4,   // 最大缩放比例
                  resetDuration: const Duration(milliseconds: 200), // 恢复动画持续时间
                  boundaryMargin: const EdgeInsets.only(bottom: 0), // 边界边距
                  clipBehavior: Clip.none, // 是否裁剪内容
                  useOverlay: true, // 是否使用遮罩层
                  maxOverlayOpacity: 0.5, // 遮罩层最大透明度
                  overlayColor: Colors.black, // 遮罩层颜色
                  fingersRequiredToPinch: 2, // 需要的手指数量来触发捏合手势
                ),
              ),
              const SizedBox(height: 5000,), // 模拟长内容
            ],
          ),
        ),
      ),
    );
  }
}