Flutter图像缩放插件 zoom_view 的使用

zoom_view 是一个允许在Flutter中对 ListView 或其他可滚动组件进行缩放和平移的插件。以下是该插件的基本用法和一些示例代码。

使用方法

使用 ListView

以下是如何将 zoom_view 插件与 ListView 结合使用的示例：

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

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});
  
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ScrollController controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ZoomListView(
        child: ListView.builder(
            controller: controller,
            itemCount: 10000,
            itemBuilder: (context, index) {
              return Center(child: Text("text $index"));
            }
        ),
      ),
    );
  }
}

注意： 必须为您的 ListView 设置 controller 参数。

使用其他滚动列表

如果要与其他滚动列表一起使用，可以参考下面的例子：

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

  @override
  State<ZoomViewExample> createState() => _ZoomViewExampleState();
}

class _ZoomViewExampleState extends State<ZoomViewExample> {
  ScrollController controller = ScrollController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ZoomView(
        controller: controller,
        child: ListView.builder(
            controller: controller,
            itemCount: 10000,
            itemBuilder: (context, index) {
              return Center(child: Text("text $index"));
            }
        ),
      ),
    );
  }
}

注意： 在这里，控制器需要同时提供给 ZoomView 和 ListView。

双击放大

为了实现双击放大功能，你可以这样设置：

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

  @override
  State<ZoomViewExample> createState() => _ZoomViewExampleState();
}

class _ZoomViewExampleState extends State<ZoomViewExample> {
  ScrollController controller = ScrollController();
  ZoomViewGestureHandler handler = ZoomViewGestureHandler(zoomLevels: [2, 1]);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ZoomView(
        controller: controller,
        onDoubleTapDown: (ZoomViewDetails zoomViewDetails){
           handler.onDoubleTap(zoomViewDetails);
        },
        child: ListView.builder(
            controller: controller,
            itemCount: 10000,
            itemBuilder: (context, index) {
              return Center(child: Text("text $index"));
            }
        ),
      ),
    );
  }
}

使用 ScrollablePositionedList

如果你想要使用 ScrollablePositionedList，你需要使用特定的fork版本，并且可能需要做一些额外的配置来暴露 ScrollPosition。

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

dependencies:
  scrollable_positioned_list:
    git: https://github.com/yakagami/scrollable_positioned_list

然后创建一个新的类 ScrollOffsetToScrollController 并使用它：

class ScrollOffsetToScrollController extends ScrollController{
  ScrollOffsetToScrollController({required this.scrollOffsetController});
  final ScrollOffsetController scrollOffsetController;

  @override
  ScrollPosition get position => scrollOffsetController.position;

  @override
  void jumpTo(double value){
    scrollOffsetController.jumpTo(value);
  }

  @override
  Future<void> animateTo(double offset, {required Curve curve, required Duration duration}){
    return scrollOffsetController.animateScroll(offset: offset, duration: duration);
  }
}

最后，使用这个新的控制器：

final ScrollOffsetController scrollOffsetController = ScrollOffsetController();

ZoomView(
  controller: ScrollOffsetToScrollController(
    scrollOffsetController: scrollOffsetController,
  ),
  child: ScrollablePositionedList.builder(
    scrollOffsetController : scrollOffsetController,
    itemBuilder: (context, index) => Text('Item $index'),
  ),
),

以上就是 zoom_view 插件的一些基本使用方法，通过这些示例，你可以在自己的项目中轻松集成图片缩放和平移的功能。