在顫動中拖動旋轉的容器

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"),
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        );
      }
    }