Flutter：创造出美观的波浪形进度条

2023-09-25 18:55:18

在Flutter中创建波浪形进度条是一种有趣而富有创造性的挑战。我们将通过添加动画效果和调整进度条的外观来实现这一目标。

创建波浪形进度条的步骤

导入必要的库。

import 'package:flutter/material.dart';

定义一个自定义的画布类。

这个类将负责绘制波浪形进度条。

class WaveProgressPainter extends CustomPainter {
  // 画笔
  Paint _paint;

  // 波浪的偏移值
  double _waveOffset = 0.0;

  // 构造函数
  WaveProgressPainter() {
    _paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 5.0
      ..style = PaintingStyle.stroke;
  }

  // 绘制方法
  @override
  void paint(Canvas canvas, Size size) {
    // 计算波浪的路径
    Path path = Path();
    path.moveTo(0.0, size.height / 2);
    for (double i = 0.0; i < size.width; i += 10.0) {
      path.lineTo(i, size.height / 2 + sin(_waveOffset + i / 100.0) * 20.0);
    }
    path.lineTo(size.width, size.height / 2);

    // 绘制波浪
    canvas.drawPath(path, _paint);

    // 更新波浪的偏移值
    _waveOffset += 0.01;
  }

  // 确定是否需要重绘
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

创建一个自定义的进度条类。

这个类将使用WaveProgressPainter类来绘制波浪形进度条。

class WaveProgressBar extends StatefulWidget {
  // 进度条的进度值
  final double progress;

  // 构造函数
  const WaveProgressBar({Key? key, required this.progress}) : super(key: key);

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

class _WaveProgressBarState extends State<WaveProgressBar> with SingleTickerProviderStateMixin {
  // 动画控制器
  late AnimationController _controller;

  // 动画
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();

    // 创建动画控制器
    _controller = AnimationController(
      duration: Duration(milliseconds: 1000),
      vsync: this,
    );

    // 创建动画
    _animation = Tween<double>(begin: 0.0, end: widget.progress).animate(_controller);

    // 启动动画
    _controller.forward();
  }

  @override
  void dispose() {
    // 销毁动画控制器
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (context, child) {
        return CustomPaint(
          painter: WaveProgressPainter(progress: _animation.value),
          size: Size(double.infinity, 50.0),
        );
      },
    );
  }
}

在你的Flutter应用程序中使用进度条。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: WaveProgressBar(progress: 0.5),
        ),
      ),
    );
  }
}