我正在学习Flutter的例子,并在这里看到一些已回答的问题。我想实现下面的屏幕。我正在学习这个问题的答案在这里How to create stacked wave containers我需要做什么,使屏幕看起来像下面所示?
wgeznvg71#
下面的CustomPainter将在图像上绘制第一个容器。您可以更改x,y坐标并获得第二个容器。
CustomPainter
class WavePainter extends CustomPainter { WavePainter({ required this.radius, }); final double radius; @override void paint(Canvas canvas, Size size) { final paint = Paint() ..shader = const LinearGradient(colors: [ Colors.lightGreenAccent, Colors.green, ]).createShader(Offset.zero & size); final path = Path() ..moveTo(0, 0) ..lineTo(0, size.height - 2 * radius) ..arcToPoint( Offset(radius, size.height - radius), radius: Radius.circular(radius), clockwise: false, ) ..lineTo(size.width - radius, size.height - radius) ..arcToPoint( Offset(size.width, size.height), radius: Radius.circular(radius), ) ..lineTo(size.width, 0) ..lineTo(0, 0) ..close(); canvas.drawPath(path, paint); } @override bool shouldRepaint(covariant CustomPainter oldDelegate) => false; }
在小部件内部使用它,如下所示:
class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: CustomPaint( painter: WavePainter(radius: 40), size: Size(200, 200), ), ), ); } }
1条答案
按热度按时间wgeznvg71#
下面的
CustomPainter
将在图像上绘制第一个容器。您可以更改x,y坐标并获得第二个容器。在小部件内部使用它,如下所示: