Flutter可缩放组件插件zoomable_widget的使用

zoomable_widget 是一个为 Flutter 提供交互式查看组件的插件，支持平移、缩放和旋转手势。它在原有的 Flutter InteractiveViewer 组件基础上增加了更多功能，例如通过按住鼠标左键滚动鼠标滚轮来实现受约束的缩放。该插件非常适合需要交互元素的应用场景，如图库、地图和文档查看器等。

特性

• 支持平移、缩放和旋转手势，并且可以自定义约束。
• 增强的鼠标交互：按住鼠标左键并滚动滚轮可以实现缩放。
• 易于集成到现有的 Flutter 项目中。
• 可以自定义边界边距、最小和最大缩放值。
• 同时支持预定义的子组件和构建方法来动态生成内容。

开始使用

要在你的 Flutter 应用中使用 zoomable_widget，首先需要将插件添加到项目的 pubspec.yaml 文件中：

dependencies:
  zoomable_widget: ^0.0.6

然后，在 Dart 文件中导入该包：

import 'package:zoomable_widget/zoomable_widget.dart';

使用示例

基础用法

Zoomable(
  maxScale: 2.5,       // 设置最大的缩放比例
  minScale: 0.8,       // 设置最小的缩放比例
  panAxis: PanAxis.free, // 设置平移轴
  clipBehavior: Clip.hardEdge, // 设置剪切行为
  child: Image.asset('assets/my_image.png'), // 设置要缩放的子组件
)

动态内容示例

对于基于视口的大内容或无限内容（如地图），可以使用 builder 构造函数：

Zoomable.builder(
  builder: (BuildContext context, Quad viewport) {
    // 返回基于视口的子组件
    // 这对于大内容或无限内容（如地图）非常有用
    return MyCustomWidget(viewport: viewport);
  },
)

完整示例代码

以下是一个完整的示例代码，展示了如何在应用中使用 zoomable_widget 插件。

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

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

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

  // 这个小部件是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Zoomable(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  // 这个小部件是你的应用的首页。它是一个有状态的小部件，意味着
  // 它有一个包含影响其外观的字段的状态对象。
  // 这个类是状态的配置。它持有由父组件（在这个例子中是应用小部件）提供的值（如标题），
  // 并用于状态的构建方法。在小部件子类中的字段总是标记为 "final"。

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      // 这次调用告诉 Flutter 框架某些东西已经改变，
      // 导致重新运行构建方法以便显示更新后的值。
      // 如果我们不调用 setState() 而只是改变了 _counter 的值，
      // 则不会重新运行构建方法，因此什么也不会发生。
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每当调用 setState 时，此方法都会重新运行。
    // 
    // Flutter 框架经过优化，使得重新运行构建方法变得快速，
    // 因此你可以重建任何需要更新的东西，而不是逐个更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 尝试更改这里为特定颜色（如 Colors.amber），并触发热重载以看到 appBar 颜色的变化。
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        // 这里我们从 MyHomePage 对象获取值，
        // 该对象是由应用构建方法创建的，并将其用于设置 appBar 的标题。
        title: Text(widget.title),
      ),
      body: Center(
        // Center 是一个布局小部件。它接受一个子元素并将其放置在父元素的中间。
        child: Column(
          // Column 也是一个布局小部件。它接受一个子元素列表并垂直排列它们。
          // 默认情况下，它会水平调整自身大小以适应其子元素，并尝试与父元素一样高。
          // 
          // Column 有许多属性可以控制其自身的大小及其子元素的位置。
          // 在这里，我们使用 mainAxisAlignment 来垂直居中子元素；
          // 主轴在这里是垂直的（交叉轴是水平的）。
          // 
          // 尝试调试绘制（在 IDE 中选择“切换调试绘制”操作，或在控制台中按“p”），
          // 以看到每个小部件的线框。
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你已经点击了按钮这么多次：',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}