Flutter 怎么才能像这样在摆动着这些曲线呢

发布于11月23日

如何在这些弯曲的Flutter 中这样做

我是新手，我想学习如何做这样的事情，我试着用Stack来做，但它没有像图片那样显示出来！

我想学习如何在设计中做曲线！请帮帮我!

推荐答案

使用‘Flutter 形状生成器’创建自定义绘制形状(节省大量时间，但需要登录才能复制代码).使用堆栈将圆形图像放在上面.

使用自定义绘画小工具

    child: CustomPaint(
       size: Size(WIDTH,(WIDTH*0.625).toDouble()), //You can Replace [WIDTH] with your desired width for Custom Paint and height will be calculated automatically
       painter: RPSCustomPainter(),
    ),

自定义油漆代码

class RPSCustomPainter extends CustomPainter{
  
  @override
  void paint(Canvas canvas, Size size) {
    
    

  Paint paint_0 = new Paint()
      ..color = Color.fromARGB(255, 252, 107, 107)
      ..style = PaintingStyle.fill
      ..strokeWidth = 1.0;
     
         
    Path path_0 = Path();
    path_0.moveTo(0,size.height*0.5000000);
    path_0.quadraticBezierTo(size.width*0.0631250,size.height*0.5000000,size.width*0.0625000,size.height*0.4400000);
    path_0.cubicTo(size.width*0.0625000,size.height*0.1400000,size.width*0.3137500,size.height*0.1410000,size.width*0.3125000,size.height*0.4400000);
    path_0.quadraticBezierTo(size.width*0.3131250,size.height*0.5000000,size.width*0.3750000,size.height*0.5000000);
    path_0.lineTo(size.width,size.height*0.5000000);
    path_0.lineTo(size.width,size.height);
    path_0.lineTo(0,size.height);

    canvas.drawPath(path_0, paint_0);
  
    
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
  
}

根据您的需要调整值

Shape will look like this个