ClipPath 的子元素是一个Container组件,自定义裁剪的对象,对该对象进行切割路径。贝塞尔曲线路径就写在getClip方法里,返回一段路径。
二维贝塞尔曲线是需要控制点和终点,控制点会将直线拉过去,形成一个流畅的弧度,这个弧度就是贝塞尔曲线。
实现代码如下:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
ClipPath(
clipper: BottomClipperTest(),
child: Container(
color:Colors.deepPurpleAccent,
height: 200.0,
),
),
],
),
);
}
}
class BottomClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.lineTo(0,0);
path.lineTo(0, size.height-60);
var firstControlPoint = Offset(size.width/2, size.height);
var firstEndPpint = Offset(size.width, size.height-60);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstEndPpint.dx, firstEndPpint.dy);
path.lineTo(size.width, size.height-6);
path.lineTo(size.width, 0);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
class BottomClipperTest extends CustomClipper<Path> {
@override
Path getClip(Size size) {
var path = Path();
path.lineTo(0, 0);
path.lineTo(0, size.height-40);
var firstControlPoint = Offset(size.width/4, size.height);
var firstEndPoint = Offset(size.width/2.25, size.height-30);
path.quadraticBezierTo(firstControlPoint.dx,
firstControlPoint.dy,
firstEndPoint.dx, firstEndPoint.dy);
var secondControlPoint = Offset(size.width/4*3, size.height-90);
var secindEndPoint = Offset(size.width, size.height-40);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secindEndPoint.dx, secindEndPoint.dy);
path.lineTo(size.width, size.height-40);
path.lineTo(size.width, 0);
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}