Question

我有一个 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？

Answer 1

使用 RotatedBox 小部件并在您的 setState

中更改其旋转

你可以这样做

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

如果您还想对旋转应用动画，请考虑this

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

1 个答案: