flutter - 颤振 - 朝下画弧

Question

我需要画这样的东西：

我尝试通过创建 aCustomClipper<Path>并在 a 中使用它来做到这一点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属性设置为 ，所以圆弧指向上方size.height - 100，我原以为我可以通过设置y1属性来让圆弧指向下方，size.height + 100但它不起作用。

如何实现向下指向的弧？

标签： flutter

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;
}