使用颤动中的按钮手势旋转文本或图像

Question

我正在尝试使用带有GestureDetector的rotation-icon旋转图像。图像正在旋转，但是旋转时出现一些问题，因此显示为锯齿形旋转。

  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;

    @override
    Widget build(BuildContext context) {
      return _defaultApp(context);
    }

    _defaultApp(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Single finger Rotate text'), // changed
        ),
        body: Center(
          child: makeChildren(),
        ),
      );
    }

    makeChildren() {
      return rotate();
    }

    Widget rotate() {
      return Column(
        children: <Widget>[
          Container(
            color: Colors.red,
            padding: EdgeInsets.all(10),
            margin: EdgeInsets.only(top: 50),
            child: Transform.rotate(
              angle: finalAngle,
              origin: Offset(0, 0),
              child: Container(
                height: 100.0,
                width: 100.0,
                child: Image.network(
                  'https://picsum.photos/250?image=9',
                ),
              ),
            ),
          ),
          GestureDetector(
            onPanStart: (detials) {},
            onPanEnd: (detials) {},
            onPanUpdate: (details) {
              setState(
                () {
                  finalAngle = details.delta.direction;
                },
              );
            },
            child: Container(
              margin: EdgeInsets.only(top: 30),
              color: Colors.black54,
              width: 50,
              height: 50,
              child: Icon(
                Icons.rotate_left,
                color: Colors.white,
              ),
            ),
          )
        ],
      );
    }
  }

Answer 1

[GestureDedector]返回以度为单位的角度，Transform.rotate()小部件将角度作为弧度。因此，您需要将其乘以PI / 180将其转换为弧度。您还需要每次都旋转finalAngle来增加角度。因此，您需要=而不是+=。最后一件事，you should avoid using widget functions，而是将其声明为类。

这里是完整的工作代码：

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RotateText(),
    );
  }
}

class RotateText extends StatefulWidget {
  RotateText({Key key}) : super(key: key); // changed

  @override
  _RotateTextState createState() => _RotateTextState();
}

class _RotateTextState extends State<RotateText> {
  double finalAngle = 0.0;

  @override
  Widget build(BuildContext context) {
    return _defaultApp(context);
  }

  _defaultApp(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Single finger Rotate text'), // changed
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.red,
              padding: EdgeInsets.all(10),
              margin: EdgeInsets.only(top: 50),
              child: Transform.rotate(
                angle: finalAngle,
                origin: Offset(0, 0),
                child: Container(
                  height: 100.0,
                  width: 100.0,
                  child: Image.network(
                    'https://picsum.photos/250?image=9',
                  ),
                ),
              ),
            ),
            GestureDetector(
              onPanStart: (detials) {},
              onPanEnd: (detials) {},
              onPanUpdate: (details) {
                setState(
                  () {
                    finalAngle += details.delta.direction * pi / 180;
                  },
                );
              },
              child: Container(
                margin: EdgeInsets.only(top: 30),
                color: Colors.black54,
                width: 50,
                height: 50,
                child: Icon(
                  Icons.rotate_left,
                  color: Colors.white,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}