Flutter中基于拖拽手柄的图像旋转速度异常修复求助

你的问题出在直接将触摸点的方向角赋值给总旋转角，这会导致每次拖拽时角度直接跳转到当前触摸方向，而不是基于之前的角度平滑累加变化量，所以才会出现旋转速度忽快忽慢甚至跳变的情况。

我们需要通过记录拖拽开始时的初始角度和初始触摸方向，计算拖拽过程中的角度增量，再累加到总角度上，这样就能实现平滑稳定的旋转效果。

修改后的完整代码 #

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 _angle = 0.0;
  // 添加两个变量记录初始状态
  double _initialAngle = 0.0;
  double _initialTouchAngle = 0.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: Stack(
            children: [
              Positioned(
                top: 100,
                left: 100,
                child: Transform.rotate(
                  angle: _angle,
                  child: Column(
                    children: [
                      Container(
                        width: 30,
                        height: 30,
                        decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(30),
                        ),
                        child: LayoutBuilder(
                          builder: (context, constraints) {
                            return GestureDetector(
                              behavior: HitTestBehavior.translucent,
                              // 拖拽开始时记录初始角度和初始触摸方向
                              onPanStart: (DragStartDetails details) {
                                Offset centerOfGestureDetector = Offset(
                                  constraints.maxWidth / 2,
                                  constraints.maxHeight / 2,
                                );
                                final touchPositionFromCenter = details.localPosition - centerOfGestureDetector;
                                _initialAngle = _angle;
                                _initialTouchAngle = touchPositionFromCenter.direction;
                              },
                              onPanUpdate: (DragUpdateDetails details) {
                                Offset centerOfGestureDetector = Offset(
                                  constraints.maxWidth / 2,
                                  constraints.maxHeight / 2,
                                );
                                final touchPositionFromCenter = details.localPosition - centerOfGestureDetector;
                                final currentTouchAngle = touchPositionFromCenter.direction;
                                // 计算角度增量，累加到初始角度上
                                setState(() {
                                  _angle = _initialAngle + (currentTouchAngle - _initialTouchAngle);
                                });
                              },
                            );
                          },
                        ),
                      ),
                      Container(
                        height: 30,
                        width: 5,
                        color: Colors.black,
                      ),
                      Container(
                        height: 200,
                        width: 200,
                        color: Colors.red,
                      ),
                    ],
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

关键改动说明 #

• 添加_initialAngle和_initialTouchAngle变量，分别记录拖拽开始时的总旋转角度和触摸点相对于手柄中心的方向角。
• 在onPanStart回调中初始化这两个变量，确保每次拖拽都基于当前的旋转状态开始计算。
• 在onPanUpdate中，计算当前触摸方向与初始触摸方向的差值，将这个差值加到初始总角度上，得到新的旋转角。这样旋转就会跟随拖拽的平滑移动，不会出现跳变或速度不稳定的问题。

内容的提问来源于stack exchange，提问作者Axel