flutter - 如何使用 ContinuousRectangleBorder 的 getOuterPath 使其看起来像倒圆形边框？

Question

我有一个 SliverAppBar，我试图为其提供自定义形状:

return SliverAppBar(
   shape: MyShapeBorder(10),

我一直在尝试 ContinuousRectableBorder:

class MyShapeBorder extends ContinuousRectangleBorder {
  const MyShapeBorder(this.curveHeight);
  final double curveHeight;

  @override
  Path getOuterPath(Rect rect, {TextDirection textDirection}) => Path()
    ..lineTo(0, rect.size.height)
    //Don't know what to put here, quadraticBezierTo? conicTo? ArcTo? and what would be the values?
    )
    //And then I assume a Line to and then another function?
    ..close();
}

但我似乎无法弄清楚。这就是我想要的样子:

与我这里的类似:

但是我可以使用以下方法更轻松地创建它:

decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(topLeft: Radius.circular(10), topRight: Radius.circular(10));
        ),

但我现在不能这样做，因为我不想将白色位包裹在容器中，而是想为绿色位(SliverAppBar)提供自定义形状

Answer 1

代码:

    class _BottomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path()
      ..lineTo(size.width, 0.0)
      ..lineTo(size.width, size.height)
      ..quadraticBezierTo(
          size.width - 5, size.height - 20, size.width - 25, size.height - 20)
      ..lineTo(25, size.height - 20)
      ..quadraticBezierTo(5, size.height - 20, 0, size.height)
      ..close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

Usgae 示例:

class Curved extends StatelessWidget {
  final Widget child;//pass any of ur widget here, it will be clipped
  const Curved({Key key, @required this.child}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ClipPath(clipper: _BottomClipper(), child: child);
  }
}