在 flutter 中将图标旋转 180 度并带有动画

Question

我有一个IconButton，通常情况下，它的图标是Icons.expand_more，但是当我按下它的图标时，它的图标应该是Icons.expand_less。我想对其进行动画处理，这样如果我按下该按钮，它就会旋转并从上行词指向下行词。当我按下expand_less时，它应该变成expand_more旋转动画。我怎样才能做到这一点？下面是我的代码：

    IconButton(
      icon:  _expanded ? Icon(Icons.expand_less) : Icon(Icons.expand_more),
      onPressed: () {
        setState(() {
           _expanded = !_expanded;
        });
      },
   )

我尝试使用animatedContainer，但它不起作用，因为我使用两个不同的图标，而且我无法用它实现旋转效果。我也尝试用下面的方法旋转图标，但当它从0度旋转到180度时，它无法显示动画。

IconButton(
              icon: AnimatedContainer(
                  duration: Duration(seconds: 3),
                  child: Transform.rotate(
                      angle: _expanded ? 0 : 180 * math.pi / 180,
                      child: Icon(Icons.expand_less))),
              // icon:
              //     _expanded ? Icon(Icons.expand_less) : Icon(Icons.expand_more),
              onPressed: () {
                setState(() {
                  _expanded = !_expanded;
                });
              },
            )

这是扩展之前的：

这是扩展后的：

我想要点击按钮时的旋转动画。

Answer 1

感谢@krumpli。

1. 定义AnimationController _controller。

2. init将方法定义为：

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 300),
      upperBound: 0.5,
    );
  }

3. dispose将方法定义为：

@override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

4. 使用小部件RotationTransition：

RotationTransition(
              turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
              child: IconButton(
                icon: Icon(Icons.expand_less),
                onPressed: () {
                  setState(() {
                    if (_expanded) {
                      _controller..reverse(from: 0.5);
                    } else {
                      _controller..forward(from: 0.0);
                    }
                    _expanded = !_expanded;
                  });
                },
              ),
            )

不要忘记添加 with SingleTickerProviderStateMixin 类定义。