Flutter中Font Awesome加载图标不旋转问题求助

嘿，我太懂你遇到的这个小坑了！FontAwesome提供的spinner图标本身只是个静态矢量图，默认完全不会自带旋转动画——你得给它加上Flutter的动画逻辑，才能让它转起来～下面给你两种实用方案：

方案一：用AnimatedRotation快速实现（Flutter 2.10+） #

这个是Flutter后来新增的组件，用法超简洁，适合快速搞定旋转效果：

import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool _isSpinning = false;

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: AnimatedRotation(
        duration: const Duration(seconds: 1), // 旋转一圈的时长
        turns: _isSpinning ? 1 : 0, // 1代表转一圈，0代表静止
        curve: Curves.linear, // 匀速旋转，避免卡顿
        child: const Icon(FontAwesomeIcons.spinner),
      ),
      onPressed: () {
        setState(() {
          _isSpinning = !_isSpinning; // 点击切换旋转状态
        });
        print("Pressed");
      },
    );
  }
}

小提示： #

• 因为要动态切换状态，得把原来的StatelessWidget改成StatefulWidget
• 要是想让它按下后一直转，直接把_isSpinning设为true就行，不用切换状态
• 调整turns参数可以改旋转圈数，比如设为2就是转两圈

方案二：用RotationTransition+AnimationController（更灵活） #

如果需要精细控制动画（比如循环旋转、调速、暂停/继续），这个方案更合适：

import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  late AnimationController _rotationController;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，设置旋转时长
    _rotationController = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this, // 借助SingleTickerProviderStateMixin提供帧回调
    );
  }

  @override
  void dispose() {
    _rotationController.dispose(); // 一定要释放资源，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: RotationTransition(
        turns: _rotationController, // 绑定动画控制器
        child: const Icon(FontAwesomeIcons.spinner),
      ),
      onPressed: () {
        if (_rotationController.isAnimating) {
          _rotationController.stop(); // 正在转就停止
        } else {
          _rotationController.repeat(); // 没转就开始无限循环旋转
        }
        print("Pressed");
      },
    );
  }
}

小提示： #

• 只想让图标转一次的话，把repeat()换成forward()就行
• 调小duration值可以加快旋转速度，比如改成Duration(milliseconds: 500)就是半秒转一圈
• 记得在dispose()里释放控制器，这是Flutter动画的最佳实践哦

内容的提问来源于stack exchange，提问作者Ishwar