Flutter旋转小部件

Question

如何将以下图标旋转180度？（我之后想要对其进行动画处理，RotationTransition 不是我想要的选择）

Icon(Icons.keyboard_arrow_down)

- WebMaster

---

“我想稍后对其进行动画处理，而RotationTransition不适合我” - 那么为什么RotationTransition不好？它确实可以在转换期间对子元素进行动画处理。 - pskink

我认为AnimatedContainer对我来说更加简洁。 - WebMaster

它具有“转换”功能。 - WebMaster

但它在幕后使用了 Matrix4Tween（https://github.com/flutter/flutter/blob/2783f8e2e1/packages/flutter/lib/src/widgets/implicit_animations.dart#L772），而 Matrix4Tween 的官方文档指出：“目前此类仅适用于平移。” - pskink

但是我通过设置 Matrix4.identity()..rotateX(pi) 来旋转它，我的问题是旋转中心。 - WebMaster

Answer 1

你可以通过使用 Transform 小部件来轻松实现。

 Transform.rotate(
      angle: pi, // in radians
      child: Icon(Icons.keyboard_arrow_down),
  );

- Miguel Ruivo

---

我如何使用 AnimatedContainer 实现它呢？ - WebMaster

你是什么意思？完全一样的方式。Transform只是一个“普通”的小部件，你可以与任何你想要的东西一起使用。 :) - Miguel Ruivo

Answer 2

以下是如何制作旋转动画，您还可以使用animationController在180°处停止动画：

import 'package:flutter/material.dart';

void main() {
  runApp(new IconRotate());
}

class IconRotate extends StatefulWidget {
  @override
  _IconRotateState createState() => new _IconRotateState();
}

class _IconRotateState extends State<IconRotate>
    with SingleTickerProviderStateMixin {
  AnimationController animationController;

  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
      vsync: this, //for using only a single AnimationController
      duration: new Duration(seconds: 5),
    );

    animationController.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      alignment: Alignment.center,
      color: Colors.white,
      child: new AnimatedBuilder(
        animation: animationController,
        child: new Container(
          height: 150.0,
          width: 150.0,
          child: Icon(Icons.keyboard_arrow_down),
        ),
        builder: (BuildContext context, Widget _widget) {
          return new Transform.rotate(
            angle: animationController.value * 6.3,
            child: _widget,
          );
        },
      ),
    );
  }
}

- Nuqo