Flutter中如何绘制Container波浪效果

在Flutter中，我想实现一个Container的波浪效果，类似于液体流动的动画。目前尝试过使用CustomPainter绘制贝塞尔曲线，但动态效果不太流畅，而且波浪的起伏不够自然。请问有没有更高效的实现方式？或者是否有现成的库可以直接使用？最好能提供具体的代码示例或实现思路，谢谢！

2 回复

使用CustomPainter绘制波浪效果。创建自定义画布，通过Path绘制贝塞尔曲线模拟波浪，结合动画控制器实现动态效果。可调整曲线控制点改变波浪形状。

更多关于Flutter中如何绘制Container波浪效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中绘制Container波浪效果，可以通过CustomPaint绘制贝塞尔曲线来实现。以下是完整示例：

import 'package:flutter/material.dart';

class WaveContainer extends StatefulWidget {
  @override
  _WaveContainerState createState() => _WaveContainerState();
}

class _WaveContainerState extends State<WaveContainer>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      child: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return CustomPaint(
            painter: WavePainter(_controller.value),
            size: Size.infinite,
          );
        },
      ),
    );
  }

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

class WavePainter extends CustomPainter {
  final double value;

  WavePainter(this.value);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.fill;

    final path = Path();
    path.moveTo(0, size.height * 0.5);

    // 绘制波浪曲线
    for (double i = 0; i < size.width; i++) {
      final x = i;
      final y = size.height * 0.5 + 
                sin((i / size.width * 4 * pi) + value * 2 * pi) * 20;
      path.lineTo(x, y);
    }

    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}

// 使用方式
WaveContainer()

关键点说明：

  1. 使用CustomPaint自定义绘制
  2. 通过贝塞尔曲线创建波浪路径
  3. 使用AnimationController实现动画循环
  4. 通过正弦函数计算波浪曲线坐标
  5. 可以调整sin函数的参数来改变波浪幅度和频率

自定义选项：

  • 修改Colors.blue改变波浪颜色
  • 调整sin函数中的乘数改变波浪幅度
  • 修改duration调整动画速度
  • 改变size.height * 0.5调整波浪基准线位置

这种方法可以创建流畅的波浪动画效果，且性能较好。

回到顶部