Flutter中的ClipPath小部件可以剪切其子部件的形状，它使用一个自定义的CustomClipper<Path>对象来指定要使用的形状。 ClipPath小部件的优点在于它可以轻松地创建不同形状的视觉效果，例如圆形、梯形、波浪形等。
CustomClipper是一个抽象类，可以通过继承它来创建一个自定义的裁剪形状。需要实现getClip方法，该方法返回一个Path对象，它描述了要裁剪的形状。当形状发生变化时，还可以实现shouldReclip方法来决定是否重新裁剪子部件。
以下是一个简单的示例，演示如何使用ClipPath来裁剪一个矩形，以使其具有圆角：
class RoundedClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path()
..addRRect(RRect.fromRectAndRadius(
Rect.fromLTWH(0, 0, size.width, size.height), Radius.circular(20)));
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ClipPath Example'),
),
body: Center(
child: ClipPath(
clipper: RoundedClipper(),
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
),
),
);
}
}
下面代码使用 ClipPath 小部件以及自定义的 CustomClipper 来创建一个带有弧形标题的页面。
import 'package:flutter/material.dart';
class ArcHeaderPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Container(
height: 250,
child: Stack(
children: [
ClipPath(
clipper: ArcClipper(),
child: Container(
height: 200,
color: Colors.blue,
),
),
Positioned(
bottom: 0,
left: 0,
right: 0,
child: Container(
height: 50,
color: Colors.white,
),
),
],
),
),
Expanded(
child: Container(
color: Colors.white,
),
),
],
),
);
}
}
class ArcClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final path = Path();
path.lineTo(0, size.height - 50);
final firstControlPoint = Offset(size.width / 4, size.height);
final firstEndPoint = Offset(size.width / 2, size.height - 50);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstEndPoint.dx, firstEndPoint.dy);
final secondControlPoint = Offset(size.width * 3 / 4, size.height - 100);
final secondEndPoint = Offset(size.width, size.height - 50);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy, secondEndPoint.dx, secondEndPoint.dy);
path.lineTo(size.width, 0);
path.close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}
在这个示例中，ArcClipper 类定义了自定义剪辑器，用于创建标题的弧形形状。 ClipPath 小部件用于将剪辑器应用于充当标题背景的 Container。
标题由具有裁剪的 Container 和作为标题和页面正文之间分隔符的白色 Container 组成。
页面的正文只是一个具有白色背景的 Expanded Container，可以将其替换为想要在标题下方显示的任何小部件。
