Question

我正在使用如下的微调器图标，但我不知道为什么它没有旋转。它就像普通图标一样工作。

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return new IconButton(
      // Use the FontAwesomeIcons class for the IconData
      icon: new Icon(FontAwesomeIcons.spinner), 
      onPressed: () { print("Pressed"); }
     );
  }
}

Answer 1

此刻，此程序包仅提供图标，但这些图标本身不会旋转或动画。使用flutter的动画功能旋转它。这是Brian Egan中的示例窗口小部件。

class Spinner extends StatefulWidget {
  final IconData icon;
  final Duration duration;

  const Spinner({
    Key key,
    @required this.icon,
    this.duration = const Duration(milliseconds: 1800),
  }) : super(key: key);

  @override
  _SpinnerState createState() => _SpinnerState();
}

class _SpinnerState extends State<Spinner> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Widget _child;

  @override
  void initState() {
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 2000),
    )..repeat();
    _child = Icon(widget.icon);

    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: _controller,
      child: _child,
    );
  }
}

用法

Spinner(
  icon: FontAwesomeIcons.spinner,
)

与github相关的问题

Answer 2

目前，font_awesome_flutter包仅提供图标，而这些图标本身不会旋转或动画。
这就是为什么我使用材料设计圆形进度指示器来显示沿圆的进度

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  Widget build(BuildContext context) {
    return new CircularProgressIndicator();
  }
}

https://docs.flutter.io/flutter/material/CircularProgressIndicator/CircularProgressIndicator.html

字体真棒微调图标不会旋转

2 个答案: