翩翩。如何使用GestureDetector让这个形状平滑旋转?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了翩翩。如何使用GestureDetector让这个形状平滑旋转?相关的知识,希望对你有一定的参考价值。

简介:我已经开始研究Flutter中的旋转,使用下面的代码,它应该是通过使用手势检测器(GestureDetector)来旋转一个正方形。

我开始研究Flutter中的旋转,使用下面的代码,应该是通过使用GestureDetector来旋转一个正方形。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  double angle = 0.0;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _panHandler(DragUpdateDetails d) {
    setState(() {
      widget.angle = atan(d.delta.dy / d.delta.dx);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onPanUpdate: _panHandler,
        child: Center(
          child: Transform.rotate(
            angle: this.widget.angle,
            child: Container(
              color: Colors.red,
              child: SizedBox(
                child: null,
                height: 100,
                width: 100,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

问题: 事实上,这个正方形确实在旋转;但是,它并不平滑。它在旋转时严重闪烁。我对此感到困惑,不知道如何让它平稳地转动。

问:请问

1)这个问题是由于某种小数点精度问题还是我的数学问题造成的?

答案

请试试这个

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double angle = 0.0;

  void _onPanUpdateHandler(DragUpdateDetails details) {
    final touchPositionFromCenter = details.localPosition;
    setState(
      () {
        angle = touchPositionFromCenter.direction;
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: GestureDetector(
        onPanUpdate: _onPanUpdateHandler,
        child: Transform.rotate(
          angle: angle,
          child: Container(
            color: Colors.red,
            child: SizedBox(
              child: null,
              height: 100,
              width: 100,
            ),
          ),
        ),
      )),
    );
  }
}

以上是关于翩翩。如何使用GestureDetector让这个形状平滑旋转?的主要内容,如果未能解决你的问题,请参考以下文章

翩翩起舞定制矩形

翩翩起舞 我怎么能连续异化一个图标呢?

Android_GestureDetector手势滑动使用

如何使用 GestureDetector 的 onForcePress 属性?

如何在 Flutter 中使用 GestureDetector 隐藏 appBar?

GestureDetector和SimpleOnGestureListener的使用教程