Flutter Zoomable Widget [英] Flutter Zoomable Widget

问题描述

我要构建的是一个小部件，可以使其子小部件可缩放，类似于可缩放行为.

What I want to build is a widget that can make its child widget zoomable similar to the zoomable behavior.

我要介绍的手势是

1. 捏缩放
2. 点按两次即可缩放
3. 点击以获取小部件的本地位置

这是我的小部件计划:

ZoomableWidget(
   child: // My custom Widget which should be zoomable.
)

这是我当前的进度:

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:vector_math/vector_math_64.dart';

class ZoomableWidget extends StatefulWidget {
  final Widget child;

  const ZoomableWidget({Key key, this.child}) : super(key: key);
  @override
  _ZoomableWidgetState createState() => _ZoomableWidgetState();
}

class _ZoomableWidgetState extends State<ZoomableWidget> {
  double _scale = 1.0;
  double _previousScale;
  @override
  Widget build(BuildContext context) {
    return ClipRect(
      child: GestureDetector(
        onScaleStart: (ScaleStartDetails details) {
          _previousScale = _scale;
        },
        onScaleUpdate: (ScaleUpdateDetails details) {
          setState(() {
            _scale = _previousScale * details.scale;
          });
        },
        onScaleEnd: (ScaleEndDetails details) {
          _previousScale = null;
        },
        child: Transform(
          transform: Matrix4.diagonal3(Vector3(_scale.clamp(1.0, 5.0),
              _scale.clamp(1.0, 5.0), _scale.clamp(1.0, 5.0))),
          alignment: FractionalOffset.center,
          child: widget.child,
        ),
      ),
    );
  }
}

我面临的问题是，我无法更改捏合的中心，因此即使放大了角落，图像也只会放大(0,0).另外，我无法访问水平拖动和垂直拖动来滚动小部件.

The problem I have faced is, I cannot change the center of the pinch thus the image only zooms at (0,0) even after I zoom in the corner. Also, I cannot access horizontal drag and vertical drag to scroll the widget.

谢谢.

推荐答案

截至 Flutter 1.20 ， InteractiveViewer 小部件支持平移和缩放开箱即用.
要使任何小部件都可缩放，您只需用InteractiveViewer包裹孩子即可.

As of Flutter 1.20, InteractiveViewer widget supports pan and Zoom out of the box.
To make any widget zoomable you need to simply wrap the child with InteractiveViewer.

@override
Widget build(BuildContext context) {
  return Center(
    child: InteractiveViewer(
      panEnabled: false, // Set it to false to prevent panning. 
      boundaryMargin: EdgeInsets.all(80),
      minScale: 0.5,
      maxScale: 4, 
      child: FlutterLogo(size: 200),
    ),
  );
}

这篇关于Flutter Zoomable Widget的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！