如何基于 GestureDetector 句柄在颤动中旋转图像？

Question

我有以下代码：

import 'package:flutter/material.dart';

double ballRadius = 7.5;

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double finalAngle = 0.0;
  double oldAngle = 0.0;
  double upsetAngle = 0.0;

  double _height = 200;
  double _width = 300;

  Offset centerOfGestureDetector = Offset(ballRadius, ballRadius);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: // rotate
              Transform.rotate(
            angle: finalAngle,
            child: Stack(
              children: [
                Positioned(
                  top: 50,
                  left: 50 + _width / 2,
                  child: Column(
                    children: [
                      GestureDetector(
                        behavior: HitTestBehavior.translucent,
                        onPanStart: (details) {
                          final touchPositionFromCenter =
                              details.localPosition - centerOfGestureDetector;
                          upsetAngle =
                              oldAngle - touchPositionFromCenter.direction;
                        },
                        onPanEnd: (details) {
                          setState(
                            () {
                              oldAngle = finalAngle;
                            },
                          );
                        },
                        onPanUpdate: (details) {
                          final touchPositionFromCenter =
                              details.localPosition - centerOfGestureDetector;

                          setState(
                            () {
                              finalAngle = touchPositionFromCenter.direction +
                                  upsetAngle;
                            },
                          );
                        },
                        child: Container(
                          height: 2 * ballRadius,
                          width: 2 * ballRadius,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(ballRadius),
                            border: Border.all(
                              width: 2,
                              color: Colors.blue,
                            ),
                          ),
                        ),
                      ),
                      Container(
                        height: 50,
                        width: 2,
                        color: Colors.blue,
                      ),
                    ],
                  ),
                ),
                Positioned(
                  top: 100,
                  left: 50,
                  child: Image.network(
                    "https://via.placeholder.com/300x200",
                    width: _width,
                    height: _height,
                    fit: BoxFit.fill,
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

拖动手柄时，图像应相应旋转。但是正如您所看到的，它无法正常工作。如果我不使用Stackand Positioned，它工作正常。但我确实需要Stack和Positioned。请帮我解决一下这个。

我期待轮换是这样的：

Answer 1

向堆栈添加固定的高度和宽度可以解决此问题，并且它正在正确旋转，如下所示。

import 'package:flutter/material.dart';

double ballRadius = 7.5;

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double finalAngle = 0.0;
  double oldAngle = 0.0;
  double upsetAngle = 0.0;

  double _height = 200;
  double _width = 300;

  Offset centerOfGestureDetector = Offset(ballRadius, ballRadius);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: // rotate
          Stack(
            children: [
              getImageWithHandle(),
            ],
          ),
        ),
      ),
    );
  }
  
  
  Widget getImageWithHandle(){
    return Transform.rotate(
                  angle: finalAngle,
                  child: SizedBox(
                    height: 400,
                    width: 400,
                    child: Stack(
                      children: [
                        Positioned(
                          top: 50,
                          left: 50 + _width / 2,
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              GestureDetector(
                                behavior: HitTestBehavior.translucent,
                                onPanStart: (details) {
                                  final touchPositionFromCenter =
                                      details.localPosition - centerOfGestureDetector;
                                  upsetAngle =
                                      oldAngle - touchPositionFromCenter.direction;
                                },
                                onPanEnd: (details) {
                                  setState(
                                        () {
                                      oldAngle = finalAngle;
                                    },
                                  );
                                },
                                onPanUpdate: (details) {
                                  final touchPositionFromCenter =
                                      details.localPosition - centerOfGestureDetector;

                                  setState(
                                        () {
                                      finalAngle = touchPositionFromCenter.direction +
                                          upsetAngle;
                                    },
                                  );
                                },
                                child: Container(
                                  height: 2 * ballRadius,
                                  width: 2 * ballRadius,
                                  decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.circular(ballRadius),
                                    border: Border.all(
                                      width: 2,
                                      color: Colors.blue,
                                    ),
                                  ),
                                ),
                              ),
                              Container(
                                height: 50,
                                width: 2,
                                color: Colors.blue,
                              ),
                            ],
                          ),
                        ),
                        Positioned(
                          top: 100,
                          left: 50,
                          child: Image.network(
                            "https://via.placeholder.com/300x200",
                            width: _width,
                            height: _height,
                            fit: BoxFit.fill,
                          ),
                        )
                      ],
                    ),
                  ),
                );
  }
}