Flutter - 向下画圆弧

Question

我需要画这样的东西:

我尝试通过创建 CustomClipper<Path> 来做到这一点并在 ClipPath() 中使用它

这是我的代码:

class ArcBackground extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      child: Container(
        width: double.infinity,
        height: 400.0,
        color: Colors.orange,
      ),
      clipper: RoundedClipper(),
    );
  }
}

class RoundedClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height);
    path.quadraticBezierTo(
      size.width / 2, 
      size.height - 100, 
      size.width, 
      size.height
    );
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

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

此代码为我提供了以下输出:

如您所见，弧线向上，因为我设置了 quadraticaBezierTo() y1属性(property)size.height - 100 ，我希望通过 y1 可以使弧线指向下方属性为size.height + 100但它没有用。

如何实现指向下方的弧度？

Answer 1

这对你有用吗？

@override
Path getClip(Size size) {
  var path = Path();
  path.lineTo(0.0, size.height-100);
  path.quadraticBezierTo(
    size.width / 2, 
    size.height,
    size.width,
    size.height - 100
  );
  path.lineTo(size.width, 0.0);
  path.close();
  return path;
}