在按钮按下时颤动旋转图标并带有动画

Posted 2023-02-23

【中文标题】在按钮按下时颤动旋转图标并带有动画

【英文标题】：Flutter rotate icon on button press with animation

【发布时间】：2021-07-10 08:18:50

【问题描述】：

我有一个button，里面有一个icon。现在我正在使用两个不同的icons 并更改它们onTap：

Widget build(BuildContext context) 
return GestureDetector(
  onTap: () 
    setState(() 
        _isDropdownOpened = !_isDropdownOpened;
      
  ...
  ,
  child: 
        _isDropdownOpened
            ? SvgPicture.asset(
                'images/icons/arrow_down_primary.svg',
                width: scaleWidth(12),
              )
            : SvgPicture.asset(
                'images/icons/arrow_up_primary.svg',
                width: scaleWidth(12),
              ),
  ),
);

这是有效的，但我想要一个RotationTransition。如何旋转我的 icon onTap 动画，这样我就不需要两个不同的 SVG？

【参考方案1】：

使用RotatedBox 小部件并在您的setState 中更改其旋转

你可以这样做

 child: RotatedBox(
  quarterTurns: _isDropdownOpened? 2:0,
  child: SvgPicture.asset(
            'images/icons/arrow_down_primary.svg',
            width: scaleWidth(12),
          ),
) 

如果您也想将动画应用于旋转，请考虑查看this

【讨论】：

谢谢！我想我不是很清楚。我想为它制作动画

您是否检查过提供的链接.. 如果有帮助，请投票；)