问题

如何在Flutter中创建一个自定义的旋转器并使用缓入动画进行动画处理。
我需要一个具有渐变颜色和圆角的旋转器，如下所示。

渐变色的十六进制代码为：

#FF9702, #FE6F27, #FE395D, #FE0096

旋转器图片。

如何实现。

答案1

得分: 1

以下是您要翻译的代码部分：

class FourColorSpinner extends CustomPainter {
  final double rotation;
  final List<Color> colors;

  FourColorSpinner(this.rotation, this.colors);

  @override
  void paint(Canvas canvas, Size size) {
    double center = size.width / 2;
    double radius = size.width / 4;

    canvas.translate(center, center);
    canvas.rotate(rotation * 2 * pi);

    double colorStep = 1.0 / colors.length;
    double currentStep = 0.0;

    for (int i = 0; i < colors.length; i++) {
      Paint paint = Paint()
        ..color = colors[i % colors.length]
        ..style = PaintingStyle.stroke
        ..strokeWidth = 4.0;

      double startAngle = currentStep * 2 * pi;
      double sweepAngle = colorStep * 2 * pi;

      canvas.drawArc(
        Rect.fromCircle(center: Offset(0, 0), radius: radius),
        startAngle,
        sweepAngle,
        false,
        paint,
      );

      currentStep += colorStep;
    }
  }

  @override
  bool shouldRepaint(FourColorSpinner oldDelegate) {
    return oldDelegate.rotation != rotation;
  }
}



class FourSpinner extends StatefulWidget {
  @override
  _FourSpinnerState createState() => _FourSpinnerState();
}

class _FourSpinnerState extends State<FourSpinner>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  double _rotation = 0.0;
  List<Color> _spinnerColors = [Colors.blue, Colors.red, Colors.green, Colors.orange];

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    )..addListener(() {
        setState(() {
          _rotation = _controller.value;
        });
      });

    _controller.repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: FourColorSpinner(_rotation, _spinnerColors),
      child: Container(
        width: 100.0,
        height: 100.0,
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      body: SafeArea(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Center(child: FourSpinner()),
                ],
              ),
          ),
    );
  }
}

希望这对您有所帮助。

class FourColorSpinner extends CustomPainter {
final double rotation;
final List<Color> colors;
FourColorSpinner(this.rotation, this.colors);
@override
void paint(Canvas canvas, Size size) {
double center = size.width / 2;
double radius = size.width / 4;
canvas.translate(center, center);
canvas.rotate(rotation * 2 * pi);
double colorStep = 1.0 / colors.length;
double currentStep = 0.0;
for (int i = 0; i < colors.length; i++) {
Paint paint = Paint()
..color = colors[i % colors.length]
..style = PaintingStyle.stroke
..strokeWidth = 4.0;
double startAngle = currentStep * 2 * pi;
double sweepAngle = colorStep * 2 * pi;
canvas.drawArc(
Rect.fromCircle(center: Offset(0, 0), radius: radius),
startAngle,
sweepAngle,
false,
paint,
);
currentStep += colorStep;
}
}
@override
bool shouldRepaint(FourColorSpinner oldDelegate) {
return oldDelegate.rotation != rotation;
}
}
class FourSpinner extends StatefulWidget {
@override
_FourSpinnerState createState() => _FourSpinnerState();
}
class _FourSpinnerState extends State<FourSpinner>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
double _rotation = 0.0;
List<Color> _spinnerColors = [Colors.blue, Colors.red, Colors.green, Colors.orange];
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(seconds: 2),
)..addListener(() {
setState(() {
_rotation = _controller.value;
});
});
_controller.repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return CustomPaint(
painter: FourColorSpinner(_rotation, _spinnerColors),
child: Container(
width: 100.0,
height: 100.0,
),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return  Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(child: FourSpinner()),
],
),
),
);
}
}

答案2

得分: 0

你可以使用flutter_spinkit库包，并根据需要修改代码。