Flutter图片缩放插件mno_zoom_widget的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter 图片缩放插件 mno_zoom_widget 的使用

通过使用此插件，你可以在 Flutter 中创建一个可自定义的画布，允许用户进行缩放。

你可以自定义画布的几乎各个方面，如颜色、背景色、启用或禁用滚动、更改滚动条的颜色、调整缩放灵敏度、初始缩放等。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  mno_zoom_widget: ^0.1.0

如何使用

你只需要在 Scaffold 或其他任意 Widget 的子节点中创建一个 Zoom 类的实例。在子属性中放置你想要缩放的 Widget，并指定画布的宽度和高度。

导入

import 'package:mno_zoom_widget/zoom_widget.dart';

简单示例

以下是一个简单的示例，展示如何使用该插件进行缩放：

Zoom(
  maxZoomWidth: 1800,
  maxZoomHeight: 1800,
  child: Center(
    child: Text("Happy zoom!!"),
  )
);

回调

你可以通过简单的回调获取画布相对于滚动的位置以及缩放和缩放比例。例如：

Zoom(
  maxZoomWidth: 1800,
  maxZoomHeight: 1800,
  onTap: () {
    print("Widget clicked");
  },
  onPositionUpdate: (Offset position) {
    print(position);
  },
  onScaleUpdate: (double scale, double zoom) {
    print("$scale  $zoom");
  },
  child: Center(
    child: Text("Happy zoom!!"),
  )
);

自定义属性

通过自定义属性，你可以获得非常棒的效果。以下是可用的属性列表：

  • maxZoomWidth (double): 最大宽度
  • maxZoomHeight (double): 最大高度
  • backgroundColor (Color): 背景颜色
  • canvasColor (Color): 画布颜色
  • onPositionUpdate() (Callback): 位置更新回调
  • onScaleUpdate() (Callback): 缩放更新回调
  • onTap() (Callback): 点击回调
  • scrollWeight (double): 滚动条宽度
  • opacityScrollBars (double 0.0-1.0): 滚动条透明度
  • colorScrollBars (Color): 滚动条颜色
  • centerOnScale (bool): 是否在缩放时居中
  • initZoom (double 0.0-1.0): 初始缩放比例
  • enableScroll (bool): 启用滚动
  • zoomSensibility (double): 缩放灵敏度
  • doubleTapZoom (bool): 双击缩放
  • axis (Axis): 轴方向

自定义属性示例

以下是一个包含自定义属性的示例：

Zoom(
  maxZoomWidth: 1800,
  maxZoomHeight: 1800,
  canvasColor: Colors.grey,
  backgroundColor: Colors.orange,
  colorScrollBars: Colors.purple,
  opacityScrollBars: 0.9,
  scrollWeight: 10.0,
  centerOnScale: true,
  enableScroll: true,
  doubleTapZoom: true,
  zoomSensibility: 2.3,
  initZoom: 0.0,
  axis: Axis.horizontal,
  onTap: () { 
    print("Widget clicked");
  },
  onPositionUpdate: (position) {
    setState(() {
      x = position.dx;
      y = position.dy;
    });
  },
  onScaleUpdate: (scale, zoom) {
    setState(() {
      _zoom = zoom;
    });
  },
  child: Center(
    child: Text(
      "x:${x.toStringAsFixed(2)} y:${y.toStringAsFixed(2)} zoom:${_zoom.toStringAsFixed(2)}",
      style: TextStyle(color: Colors.deepPurple, fontSize: 50),
    ),
  ),
);

示例

移动端

在 example/mobile 文件夹中，你可以找到一个已经准备好的例子，可以使用以下命令运行：

flutter pub get
flutter run

桌面端

在 example/desktop 文件夹中，你可以找到一个已经准备好的例子，可以使用以下命令运行：

hover run

更多关于Flutter图片缩放插件mno_zoom_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter图片缩放插件mno_zoom_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何在Flutter中使用mno_zoom_widget插件来实现图片缩放的代码示例。mno_zoom_widget是一个用于图片缩放的Flutter插件，它允许用户通过手势对图片进行缩放和平移。

首先，确保你已经在pubspec.yaml文件中添加了mno_zoom_widget依赖：

dependencies:
  flutter:
    sdk: flutter
  mno_zoom_widget: ^latest_version  # 请替换为实际的最新版本号

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

接下来，你可以在你的Flutter应用中按照以下方式使用mno_zoom_widget：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Image Zoom Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ImageZoomPage(),
    );
  }
}

class ImageZoomPage extends StatefulWidget {
  @override
  _ImageZoomPageState createState() => _ImageZoomPageState();
}

class _ImageZoomPageState extends State<ImageZoomPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Zoom Example'),
      ),
      body: Center(
        child: MnoZoomWidget(
          // 替换为你的图片资源
          imageProvider: NetworkImage('https://via.placeholder.com/800x600'),
          // 可选参数：设置初始缩放级别，范围在0到3之间
          initialScale: 1.0,
          // 可选参数：设置最小和最大缩放级别
          minScale: 1.0,
          maxScale: 3.0,
          // 可选参数：设置图片加载时的占位符
          placeholder: Center(child: CircularProgressIndicator()),
          // 可选参数：设置缩放动画的持续时间
          scaleAnimationDuration: Duration(milliseconds: 200),
          // 可选参数：设置平移动画的持续时间
          translationAnimationDuration: Duration(milliseconds: 200),
        ),
      ),
    );
  }
}

在这个示例中：

  • MnoZoomWidget是mno_zoom_widget插件提供的主要组件。
  • imageProvider参数接受一个ImageProvider对象，这里我们使用NetworkImage来加载网络图片。你也可以使用AssetImage来加载本地图片资源。
  • initialScale参数设置图片的初始缩放级别。
  • minScale和maxScale参数分别设置图片的最小和最大缩放级别。
  • placeholder参数允许你设置一个占位符，在图片加载时显示。
  • scaleAnimationDuration和translationAnimationDuration参数分别设置缩放和平移动画的持续时间。

运行这个示例应用，你将看到一个可以缩放和平移的图片。你可以根据需要调整这些参数以满足你的应用需求。

回到顶部