如何实现下图效果
我有一个矩形容器(宽:400,高:100),我想剪切矩形的蓝色区域,这样我就可以得到橙子区域。注意,橙子弧线与底线相切。你能给予我详细的代码吗?
cwtwac6a1#
你可以使用一个自定义裁剪器类,以获得这种类型的形状,我将分享一个示例代码,你可以根据自己的需要改变值
class ClipPathClass extends CustomClipper<Path> { @override Path getClip(Size size) { double radius = 50; var path = Path(); path.lineTo(0.0, size.height - 30); var firstControlPoint = Offset(size.width / 4, size.height); var firstPoint = Offset(size.width / 2, size.height); path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstPoint.dx, firstPoint.dy); var secondControlPoint = Offset(size.width - (size.width / 4), size.height); var secondPoint = Offset(size.width, size.height - 30); path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secondPoint.dx, secondPoint.dy); path.lineTo(size.width, 0.0); path.lineTo(size.width - radius, 0); path.close(); return path; } @override bool shouldReclip(CustomClipper<Path> oldClipper) => false; }
然后使用这个ClipPathClass(),比如
ClipPath( clipper: ClipPathClass(), child: Container(width:400,height: 100,color:Colors.grey) )
1条答案
按热度按时间cwtwac6a1#
你可以使用一个自定义裁剪器类,以获得这种类型的形状,我将分享一个示例代码,你可以根据自己的需要改变值
然后使用这个ClipPathClass(),比如