Question

简介：

我已经开始使用以下代码研究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）这个问题是由于某种十进制精度问题还是我的数学问题引起的？

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

Flutter：如何使用GestureDetector使该形状平滑旋转？

1 个答案: