Flutter中如何创建上下两个波浪形容器？

要实现图中上下容器波浪边缘互为翻转、完美贴合的效果，你可以基于原问题的思路，通过自定义裁剪器（CustomClipper）+ 翻转参数控制来实现，具体步骤如下：

• 定义通用波浪裁剪器
  写一个带翻转参数的WaveClipper，通过isReversed参数控制波浪的方向，不用写两个裁剪器，通过参数就能切换正常/翻转状态：

  class WaveClipper extends CustomClipper<Path> {
    final bool isReversed;
  
    WaveClipper({this.isReversed = false});
  
    @override
    Path getClip(Size size) {
      final path = Path();
      // 起点：根据翻转状态调整Y轴位置
      path.lineTo(0, isReversed ? size.height * 0.2 : size.height * 0.8);
      
      // 第一段贝塞尔曲线
      var firstControl = Offset(size.width / 4, isReversed ? size.height * 0.05 : size.height);
      var firstEnd = Offset(size.width / 2, isReversed ? size.height * 0.2 : size.height * 0.8);
      path.quadraticBezierTo(firstControl.dx, firstControl.dy, firstEnd.dx, firstEnd.dy);
      
      // 第二段贝塞尔曲线
      var secondControl = Offset(size.width * 3 / 4, isReversed ? size.height * 0.35 : size.height * 0.6);
      var secondEnd = Offset(size.width, isReversed ? size.height * 0.2 : size.height * 0.8);
      path.quadraticBezierTo(secondControl.dx, secondControl.dy, secondEnd.dx, secondEnd.dy);
      
      // 闭合路径
      path.lineTo(size.width, isReversed ? 0 : size.height);
      path.lineTo(0, isReversed ? 0 : size.height);
      path.close();
      return path;
    }
  
    @override
    bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
  }
  

• 用Stack堆叠容器并应用裁剪器
  用Stack组件把两个容器叠起来，底部容器用翻转的波浪裁剪器做顶部边缘，顶部容器用正常的波浪裁剪器做底部边缘，这样两者的波浪就能精准贴合：

  Stack(
    children: [
      // 底部容器：顶部是翻转的波浪
      ClipPath(
        clipper: WaveClipper(isReversed: true),
        child: Container(
          height: 200,
          color: Colors.blueAccent,
        ),
      ),
      // 顶部容器：底部是正常波浪
      Positioned(
        top: 0,
        left: 0,
        right: 0,
        child: ClipPath(
          clipper: WaveClipper(),
          child: Container(
            height: 200,
            color: Colors.orange,
          ),
        ),
      ),
    ],
  )
  

• 细节调整（可选）

  • 修改裁剪器里的比例值（比如size.height * 0.2这类参数），可以调整波浪的高度和弧度，适配你的设计需求；
  • 如果需要支持不同屏幕尺寸，建议用MediaQuery获取屏幕宽高，动态计算控制点坐标；
  • 要是想让波浪动画更生动，可以结合AnimationController动态改变裁剪器的参数，实现波浪动效。

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