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

编程问答 2022-05-16

问题描述

我有以下几行代码，主要取自对 Rotate text or image using button gesture in flutter 个问题。

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

我想更新值，假设在向右旋转一次时增加 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,),);
                },)
          ],);
  }
}

enter image description here

解决方法

你需要数学库

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