我要构建的是一个小部件,可以使其子小部件可缩放,类似于可缩放行为。
我要讲的手势是
这是我的小部件计划:
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一起提供的小部件。
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), ), ); }