Flutter：带有 ClipPath 的向下弯曲的自定义应用栏

Question

嘿，我有一个自定义 Appbar，我希望它看起来像这样：

到目前为止，我已经成功创建了一个自定义应用栏，并使用 ClipPath 对其进行剪辑以获得特殊形式：

return ClipPath(
  clipper: WaveClip(),
  child: PreferredSize(
    preferredSize: preferredSize,
    child: Container(
      color: getAppBarColor(),
      child: Column(
        ...
      ),
    ),
  ),
);

但是我未能创建这个确切的应用栏。我的剪辑形式如下所示：

class WaveClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double height = size.height;
    double width = size.width;
    double curveHeight = size.height / 2;
    var p = Path();
    p.lineTo(0, height - curveHeight);
    p.quadraticBezierTo(width / 4, height, width/2, height - curveHeight);
    p.lineTo(width, 0);
    p.close();
    return p;
  }
...

这会导致像 appbar 这样的丑陋波浪。有没有可以为我创建 ClipPaths 的在线工具？我真的不想费心用数学函数来创建自定义形状如果没有，谁能帮我解决这个问题？谢谢。

Answer 1

您可以使用带有圆角边框的容器创建此效果，而不是剪切路径

Container(
      height: 32,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        color: Colors.black,
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(32),
          topRight: Radius.circular(32),
        ),

然后，如果您愿意，您可以使用带有 SliverAppBar 的 CustomScrollView 创建漂亮的滚动动画。

Answer 2

在使用CustomClipper的时候，可以按照这个

class WaveClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double curveHeight = size.height / 2;
    var p = Path()
      ..lineTo(0, size.height)
      ..quadraticBezierTo(0, curveHeight, curveHeight, curveHeight)
      ..lineTo(size.width - curveHeight, curveHeight)
      ..quadraticBezierTo(size.width, curveHeight, size.width, size.height)
      ..lineTo(size.width, 0);

    return p;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

并使用

ClipPath(
  clipper: WaveClip(),
  child: Container(
    height: 200,
    padding: EdgeInsets.all(24),
    alignment: Alignment(0, -.5),
    color: Colors.amber,
    child: Text("sdsdsd"),
  ),
),

您可以查看有关 cubic-bezier-curves-with-svg-paths and also check bezier.method.ac 网站的更多信息。

Flutter：带有 ClipPath 的向下弯曲的自定义应用栏

Flutter: Downwards curved custom appbar with ClipPath

dart

flutter

flutter-layout