固定位置的可缩放小部件

Question

我正在尝试使用可缩放的小部件，而我正在使用以固定方式（带有边距）放置元素的小部件

在这里，我有一个固定为340 * 560大小的BodyWidget，它通过边距放置身体部位：

return Container(
    alignment: Alignment.center,
    child: Container(
      width: 340,
      height: 560,
      child: Stack(
        children: bodyParts.map((BodyPart d) => _bodyPart(d)).toList(),
      ),
    ));

我的ZoomableWidget：

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

class ZoomableWidget extends StatefulWidget {
  final Widget child;
  final double scale;

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

class _ZoomableWidgetState extends State<ZoomableWidget> {
  Matrix4 matrix = Matrix4.identity();

  @override
  Widget build(BuildContext context) {
    matrix.scale(widget.scale);
    return MatrixGestureDetector(
      onMatrixUpdate: (Matrix4 m, Matrix4 tm, Matrix4 sm, Matrix4 rm) {
        setState(() {
          matrix = m;
        });
      },
      child: Transform(
        transform: matrix,
        child: widget.child,
      ),
    );
  }
}

当我的小部件可以占用足够的空间时，一切顺利，我可以正确缩放：

另一方面，当我限制可用大小时（在flex 1处设置了一个行，其中包含2个小部件），即使我将缩放比例设置为0.5，内部元素也无法正确放置（您可以看到手和前臂放置不正确）：

如何确保元素放置正确，然后应用Zoomable？

非常感谢

Answer 1

使用OverflowBox代替呢？

return Container(
    alignment: Alignment.center,
    child: OverflowBox(
      maxWidth: 340.0,
      maxHeight: 560.0,
      child: Stack(
        children: bodyParts.map((BodyPart d) => _bodyPart(d)).toList(),
      ),
    ));

Answer 2

使用Zoom小部件 添加到导入

import 'package:zoom_widget/zoom_widget.dart';

然后添加此

return Container(
    alignment: Alignment.center,
    child: Zoom(
      width: 340,
      height: 560,
      child: Stack(
        children: bodyParts.map((BodyPart d) => _bodyPart(d)).toList(),
      ),
    ));