Flutter图片移动缩放插件image_zoom_on_move的使用

image_zoom_on_move 是一个用于Flutter的插件，允许你在鼠标悬停在图片上时实现缩放效果。该插件特别推荐用于Web平台。

特性

使用方法

要使用这个插件，请在你的 pubspec.yaml 文件中添加 image_zoom_on_move 作为依赖项：

dependencies:
  flutter:
    sdk: flutter
  image_zoom_on_move: ^latest_version

然后运行 flutter pub get 来安装依赖。

示例代码

以下是完整的示例代码，展示如何在Flutter应用中使用 ImageZoomOnMove 组件。

完整的示例Demo

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  static const imageUrl =
      "https://images.unsplash.com/photo-1619360142632-031d811d1678?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image Zoom on Move'),
      ),
      body: Center(
        child: ImageZoomOnMove(
          width: 500,
          height: 500,
          cursor: SystemMouseCursors.grab, // 可选：设置鼠标指针样式
          image: Image.network(
            imageUrl,
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

构造函数参数

ImageZoomOnMove 的构造函数如下：

const ImageZoomOnMove({
  this.height,
  this.width,
  this.cursor = SystemMouseCursors.zoomIn, // 默认鼠标指针样式
  this.onTap, // 点击事件回调
  required this.image, // 图片组件
  Key? key,
}) : super(key: key);