在 flutter 中制作自定义弯曲应用栏的更好方法

Question

我正在尝试制作一个自定义的弧形应用栏，如下例所示

经过多次尝试，这是我的镜头

源代码：

class CustomShapeBorder extends ContinuousRectangleBorder {
  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) {
    final double innerCircleRadius = 150.0;

    Path path = Path();
    path.lineTo(0, rect.height);
    path.cubicTo(rect.width / 1.5 - 40, rect.height + innerCircleRadius - 40, rect.width / 1.5 + 40,
        rect.height + innerCircleRadius - 40, rect.width / 1.5 + 75, rect.height + 50);
    path.quadraticBezierTo(
        rect.width / 1.5 + (innerCircleRadius / 2) + 30, rect.height + 35, rect.width, rect.height);
    path.lineTo(rect.width, 0.0);
    path.close();

    return path;
  }
}

有没有简单的方法来制作它，例如 SVG。

Answer 1

我可以得出这样的结果：

这是Path:

double x = 150, y = 45, r = 0.5;
Path path = Path()
  ..addRRect(RRect.fromRectAndCorners(rect))
  ..moveTo(rect.bottomRight.dx - 30, rect.bottomCenter.dy)
  ..relativeQuadraticBezierTo(((-x / 2)+(x/6)) * (1 - r), 0, -x / 2 * r, y * r)
  ..relativeQuadraticBezierTo(-x / 6 * r, y * (1 - r), -x / 2 * (1 - r), y * (1 - r))
  ..relativeQuadraticBezierTo(((-x / 2)+(x/6)) * (1 - r), 0, -x / 2 * (1 - r), -y * (1 - r))
  ..relativeQuadraticBezierTo(-x/6*r , -y * r, -x / 2 * r, -y * r);

这是一篇很好的文章，可以了解制作形状的基础知识：Paths in Flutter: A Visual Guide

在 flutter 中制作自定义弯曲应用栏的更好方法

A better way to make a custom curved app bar in flutter

dart

flutter

flutter-appbar