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) Возникает ли эта проблема из-за какой-то проблемы с десятичной точностью или моей математики?


flutter gesturedetector
person George Lee    schedule 02.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Пожалуйста, попробуйте это

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,
            ),
          ),
        ),
      )),
    );
  }
}
person Sanjay Sharma    schedule 02.05.2020
comment
Это работает фантастически snj. Я пытаюсь выяснить из документации, как это работает. Итак, DragUpdateDetails.localPosition возвращает угол. Это фантастика знать! Я полагаю, это было спроектировано таким образом, чтобы быть таким гладким. Спасибо за красноречивый ответ! - person George Lee; 02.05.2020