Question

我希望能够移动，旋转和缩放图像中看到的每个元素：例如3张图片和1个文本。这些元素是“堆栈”窗口小部件内的“定位”窗口小部件（红色框）。

我正在尝试使用软件包matrix_gesture_detector（https://pub.dev/packages/matrix_gesture_detector），但问题是我无法对Positioned执行给定的操作，也无法将其包装在其他任何包装中小部件（例如MatrixGestureDetector）处理所有操作，因为“ 已定位的小部件必须直接放置在堆栈小部件中”。

如果我将MatrixGestureDetector用作Positioned的子代，则我可以执行所有操作，但只能在Positioned边界内

如何直接在“定位”对象上执行这些操作？还是可以使用其他小部件代替Stack / Positioned？

Answer 1

对我来说，效果很好。尝试以下方法：

首先，我制作了一个小部件，以便每个小部件都可以拥有自己的Transformer Matrix

class TransformerWidget extends StatefulWidget {
  final Widget child;

  TransformerWidget(this.child, {Key key}) : super(key: key);

  @override
  _TransformerWidgetState createState() => _TransformerWidgetState();
}

class _TransformerWidgetState extends State<TransformerWidget> {
  final ValueNotifier<Matrix4> notifier = ValueNotifier(Matrix4.identity());

  @override
  Widget build(BuildContext context) {
    final ValueNotifier<Matrix4> notifier = ValueNotifier(Matrix4.identity());

    return MatrixGestureDetector(
      onMatrixUpdate: (m, tm, sm, rm) {
        notifier.value = m;
      },
      child: AnimatedBuilder(
        animation: notifier,
        builder: (ctx, child) {
          return Transform(
            transform: notifier.value,
            child: widget.child,
          );
        },
      ),
    );
  }
}

第二，我将小部件像这样包装在堆栈上：

       Stack(
          children: [
            TransformerWidget(
              Container(
                color: Colors.white30,
              ),
            ),
            Positioned.fill(
              child: Container(
                transform: notifier.value,
                child: TransformerWidget(
                  FittedBox(
                    fit: BoxFit.contain,
                    child: Icon(
                      Icons.favorite,
                      color: Colors.deepPurple.withOpacity(0.5),
                    ),
                  ),
                ),
              ),
            ),
            TransformerWidget(
              Container(
                decoration: FlutterLogoDecoration(),
                alignment: Alignment(0, -0.5),
                child: Text(
                  'use your two fingers to translate / rotate / scale ...',
                  style: Theme.of(context).textTheme.display2,
                  textAlign: TextAlign.center,
                ),
              ),
            ),

效果很好！除非您捏或触摸两个小部件，否则它们都会发生变形。.仍然不知道如何解决此问题，但现在可以使用！：D

在Flutter中的Stack小部件内移动，缩放和调整大小的定位小部件

1 个答案: