Question

我一直在为Flutter挣扎，而我脑中似乎很简单。我想要一个在按下按钮时旋转的容器，并且该容器应设置为动画。屏幕中央有一个容器。我有2个按钮，其中1个带有“ +”和一个“-”。当我按下“ +”号时，我希望容器按顺时针方向旋转180度；如果我再次按下“ +”号，则我希望其再次执行180度旋转。按下“-”时，我希望它逆时针旋转180度。

当前，我将其构建为可旋转容器，但是轴位于容器的左上角而不是中心。我已尝试解决此问题，但似乎没有任何改变这种行为的方法，但我发现了这个问题，但此问题已经关闭

https://github.com/flutter/flutter/issues/27419

让我感到困惑的是，我无法执行如此简单的操作，并且想知道是否有人知道我要去哪里。

某些代码：

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

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

class Spinner extends StatefulWidget {
   @override
   _SpinnerState createState() => _SpinnerState();
}

class _SpinnerState extends State<Spinner>  {
  double _angle = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
            child: AnimatedContainer(
              alignment: FractionalOffset.center,
              height: 200,
              width: 200,
              transform: Matrix4.rotationZ(_angle),
              decoration: BoxDecoration(
                 color: Colors.blue
              ),
              duration: Duration(seconds: 2),
            ),
          ),
          floatingActionButton: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: <Widget>[
              FloatingActionButton(onPressed: () {
                setState(() {
                  _angle += 180 * pi / 180;
                });
              },
                child: const Icon(Icons.add),
              ),
              Container(
                height: 20,
              ),
               FloatingActionButton(onPressed: () {
                   setState(() {
                   _angle -= 180 * pi / 180;
               });
              },
               child: const Icon(Icons.remove),
            )
          ],
        )
      )
    );
  }
}

编辑：

我确实找到了这篇文章，但是使用它时，容器会立即捕捉到新位置，并且希望对此进行动画处理。

How can I rotate a Container widget in 2D around a specified anchor point?

Answer 1

我找到了解决此问题的解决方案，而不是使用animationContained，而是决定使用动画控制器。

我的SpinnerState类现在看起来像这样：

class _SpinnerState extends State<RadialMenu> with SingleTickerProviderStateMixin {
  AnimationController controller;
  @override
  void initState() {
    super.initState();
    controller = AnimationController(duration: Duration(milliseconds: 900), vsync: this);
  }
  @override
  Widget build(BuildContext context) {
    return RadialAnimation(controller: controller);
  }
}

然后我创建了一个无状态小部件，其中包含动画等。

class SpinnerAnimation extends StatelessWidget {
  SpinnerAnimation({Key key, this.controller})
  : rotation = Tween<double>(
      begin: 0.0,
      end: 180.0,
    ).animate(
      CurvedAnimation(
        parent: controller,
        curve: Interval(
          0.0,
          0.75,
          curve: Curves.linear,
        ),
      ),
    ),
    super(key: key);
  final AnimationController controller;
  final Animation<double> rotation;
  build(context) {
    return AnimatedBuilder(
    animation: controller,
    builder: (context, builder) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          FloatingActionButton(
              child: Icon(Icons.add),
              onPressed: _open,
              backgroundColor: Colors.green),
          FloatingActionButton(
              child: Icon(Icons.remove),
              onPressed: _close,
              backgroundColor: Colors.red),
          Transform.rotate(
              angle: radians(rotation.value),
              child: Column(
                children: [
                  Container(
                    width: 200,
                    height: 200,
                    decoration: new BoxDecoration(
                        image: DecorationImage(
                            image: AssetImage('images/CRLogo.png'))),
                  )
                ],
              ))
        ],
      );
    });
  }

  _open() {
    controller.forward(from: 0);
  }

  _close() {
    controller.reverse(from: 1);
  }
}

这至少为我解决了这个问题，希望以后对其他人有帮助。

AnimatedContainer旋转会产生不必要的旋转

1 个答案: