我有一个IconButton
,通常,它的图标是,Icons.expand_more
但是当我按下它的图标应该是Icons.expand_less
。我想对此进行动画处理,以便如果我按下该按钮,它将旋转并从 upwords 指向 downwords。当我按下它时,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;
});
},
)
这是在扩展之前:
这是扩展之后:
我想要按钮单击时的旋转动画。