Flutter用ClipPath创建一个带有圆弧形标题的页面

Flutter中的ClipPath小部件可以剪切其子部件的形状，它使用一个自定义的CustomClipper对象来指定要使用的形状。 ClipPath小部件的优点在于它可以轻松地创建不同形状的视觉效果，例如圆形、梯形、波浪形等。

CustomClipper是一个抽象类，可以通过继承它来创建一个自定义的裁剪形状。需要实现getClip方法，该方法返回一个Path对象，它描述了要裁剪的形状。当形状发生变化时，还可以实现shouldReclip方法来决定是否重新裁剪子部件。

以下是一个简单的示例，演示如何使用ClipPath来裁剪一个矩形，以使其具有圆角：

class RoundedClipper extends CustomClipper {
  @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 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 {
  @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 oldClipper) => false;
}

在这个示例中，ArcClipper 类定义了自定义剪辑器，用于创建标题的弧形形状。 ClipPath 小部件用于将剪辑器应用于充当标题背景的 Container。

标题由具有裁剪的 Container 和作为标题和页面正文之间分隔符的白色 Container 组成。

页面的正文只是一个具有白色背景的 Expanded Container，可以将其替换为想要在标题下方显示的任何小部件。