flutter - 在抖动中使用GestureDetector移动旋转的图像

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(
      debugShowCheckedModeBanner: false,
      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 * 90,
            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"),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

基本上，功能是使图像可拖动。但是当我旋转它并尝试移动图像时，坐标变得困惑。它没有朝正确的方向移动。当 Angular 为0时，它可以完美工作。我们将不胜感激。

Answer 1

您可以在下面复制粘贴运行完整代码
您可以向下移动Transform.rotate以包装Image.network请参阅下面的工作演示
程式码片段

 Transform.rotate(
                angle: math.pi / 180 * 90,
                child: Image.network(
                    "https://via.placeholder.com/300x200")),
          ),

工作演示

完整的代码

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(
      debugShowCheckedModeBanner: false,
      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: 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: Transform.rotate(
                        angle: math.pi / 180 * 90,
                        child: Image.network(
                            "https://via.placeholder.com/300x200")),
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}