旋转对象并使用 GestureDetector 更新 flutter 中的值

Question

我有以下几行代码，主要是从问题。

这里我有旋转轮胎，我可以旋转它，但我无法根据旋转方向更新数字值。

我想更新值，假设在向右方向完全旋转一次时递增 1，向左方向完全旋转一次时递减 1。

我试了很多方法，还是没有效果。

感谢任何帮助

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class RotateText extends StatefulWidget {
  RotateText({Key? key}) : super(key: key); // changed

  @override
  _RotateTextState createState() => _RotateTextState();
}

class _RotateTextState extends State<RotateText> {
  double finalAngle = 0.0;
  double offsetAngle = 0.0;
  double number = 0;

  @override
  Widget build(BuildContext context) {
    return _defaultApp(context);
  }

  _defaultApp(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text('$number'),
            Container(
              width: 250,
              height: 250,
              margin: EdgeInsets.all(30.0),
              child: LayoutBuilder(
                builder: (context, constraints) {
                  return GestureDetector(
                    dragStartBehavior: DragStartBehavior.start,
                    behavior: HitTestBehavior.translucent,
                    onPanStart: (details) {
                      Offset centerOfGestureDetector = Offset(
                          constraints.maxWidth / 2, constraints.maxHeight / 2);
                      final touchPositionFromCenter =
                          details.localPosition - centerOfGestureDetector;
                      offsetAngle =
                          touchPositionFromCenter.direction - finalAngle;
                    },
                    onPanUpdate: (details) {
                      Offset centerOfGestureDetector = Offset(
                          constraints.maxWidth / 2, constraints.maxHeight / 2);
                      final touchPositionFromCenter =
                          details.localPosition - centerOfGestureDetector;
                      setState(() {
                        finalAngle =
                            touchPositionFromCenter.direction - offsetAngle;
                      });
                    },
                    child: Transform.rotate(
                      angle: finalAngle,
                      child: Image.asset(
                        'assets/images/marked_tyre_base.png',
                        fit: BoxFit.cover,
                      ),
                    ),
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

你需要数学图书馆

import 'dart:math';

添加一个参数

  double oldFinalAngle = 0;

并更新 onPanUpdate

  onPanUpdate: (details) {
                  Offset centerOfGestureDetector = Offset(
                      constraints.maxWidth / 2, constraints.maxHeight / 2);
                  final touchPositionFromCenter =
                      details.localPosition - centerOfGestureDetector;
                  setState(() {
                    finalAngle =
                        touchPositionFromCenter.direction - offsetAngle;
                    finalAngle = finalAngle % (2 * pi);

                    if ((oldFinalAngle > ((3 / 2) * pi)) &&
                        (finalAngle < (pi / 2))) {
                      number++;
                    } else if ((finalAngle > ((3 / 2) * pi)) &&
                        (oldFinalAngle < (pi / 2))) {
                      number--;
                    }
                    oldFinalAngle = finalAngle;
                  });
                },

旋转对象并使用 GestureDetector 更新 flutter 中的值

Rotate an object and update a value in flutter with GestureDetector

animation

rotation

gesturedetector

flutter