flutter - 在 flutter 中拖动旋转的容器

Question

通常，要在屏幕上拖动容器或图像，我可以这样做:

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:math' as math;

void main() {
  debugPaintSizeEnabled = true;
  return runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey,
        body: SafeArea(
          child: TestComp(),
        ),
      ),
    );
  }
}

class TestComp extends StatefulWidget {
  @override
  _TestCompState createState() => _TestCompState();
}

class _TestCompState extends State<TestComp> {
  double _y = 0;
  double _x = 0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: _y,
          left: _x,
          child: Transform.rotate(
            angle: math.pi / 180 * 0,
            child: Container(
              height: 200,
              width: 300,
              color: Colors.black,
              child: Stack(
                children: <Widget>[
                  Positioned(
                    top: 0,
                    left: 0,
                    child: GestureDetector(
                      onPanUpdate: (details) {
                        var dx = details.delta.dx;
                        var dy = details.delta.dy;
                        setState(() {
                          _y += dy;
                          _x += dx;
                        });
                      },
                      child:
                          Image.network("https://via.placeholder.com/300x200"),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

这工作得很好。但是，当我将此容器旋转至-136度时，它无法正确移动。

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:math' as math;

void main() {
  debugPaintSizeEnabled = true;
  return runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey,
        body: SafeArea(
          child: TestComp(),
        ),
      ),
    );
  }
}

class TestComp extends StatefulWidget {
  @override
  _TestCompState createState() => _TestCompState();
}

class _TestCompState extends State<TestComp> {
  double _y = 0;
  double _x = 0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: _y,
          left: _x,
          child: Transform.rotate(
            angle: math.pi / 180 * -136,
            child: Container(
              height: 200,
              width: 300,
              color: Colors.black,
              child: Stack(
                children: <Widget>[
                  Positioned(
                    top: 0,
                    left: 0,
                    child: GestureDetector(
                      onPanUpdate: (details) {
                        var dx = details.delta.dx;
                        var dy = details.delta.dy;
                        setState(() {
                          _y += dy;
                          _x += dx;
                        });
                      },
                      child:
                          Image.network("https://via.placeholder.com/300x200"),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

我在这里的要求是在Stack> Positioned上有 Transform.rotate。内部堆栈可以包含更多元素，因此我希望GestureDetector仅在图像内部，因为仅应在移动图像时更新坐标。请帮我解决一下这个。

Answer 1

GestureDetector中存在问题，正在将x和y值旋转-136度
只需将手势检测器放在Transform Widget上方，它将采用正确的x和
y值
您的错误已解决

        void main() {
      debugPaintSizeEnabled = true;
      return runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            backgroundColor: Colors.grey,
            body: SafeArea(
              child: TestComp(),
            ),
          ),
        );
      }
    }
    
    class TestComp extends StatefulWidget {
      @override
      _TestCompState createState() => _TestCompState();
    }
    
    class _TestCompState extends State<TestComp> {
      double _y = 0;
      double _x = 0;
    
      @override
      Widget build(BuildContext context) {
        return Stack(
          children: [
            Positioned(
              top: _y,
              left: _x,
              child: GestureDetector(
                onPanUpdate: (details) {
                  var dx = details.delta.dx;
                  var dy = details.delta.dy;
                  setState(() {
                    _y += dy;
                    _x += dx;
                  });
                },
                child: Transform.rotate(
                  angle: math.pi / 180 * -136,
                  child: Container(
                    height: 200,
                    width: 300,
                    color: Colors.black,
                    child: Stack(
                      children: <Widget>[
                        Positioned(
                          top: 0,
                          left: 0,
                          child: Image.network("https://via.placeholder.com/300x200"),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        );
      }
    }