如何解决Flutter Zoomable Widget
使用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),
),
);
}
解决方法
我要构建的是一个小部件,可以使其子小部件可缩放,类似于可缩放行为。
我要讲的手势是
- 捏放大
- 点按两次即可缩放
- 点击以获取小部件的本地位置
这是我的小部件计划:
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))),alignment: FractionalOffset.center,child: widget.child,),);
}
}
我面临的问题是,我无法更改捏合的中心,因此即使我放大了角落,图像也只能放大(0,0)。另外,我无法访问水平拖动和垂直拖动来滚动小部件。
提前致谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。