翩翩。如何使用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让这个形状平滑旋转?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 GestureDetector 的 onForcePress 属性?