Flutter Zoomable Widget

  • Z时代
  • 2024-01-10
  • 分类：问答

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

我要讲的手势是

  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）。另外，我无法访问水平拖动和垂直拖动来滚动小部件。

提前致谢。

回答：

使用InteractiveViewer随Flutter一起提供的小部件。

@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 的全部内容， 来源链接： utcz.com/qa/413564.html

回到顶部