带 ClipPath 的全圆角

Question

我想创建一条类似的路径：

但实际结果边框并不好：

现在我想知道如何使用 ClipPath 实现完全圆角。

代码是：

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(15, size.height);
    path.quadraticBezierTo(0, size.height / 2, 15, 0);
    path.lineTo(size.width, 0);
    return path;
  }

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

Answer 1

看一下这个..

class MyClipper extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    double factor = 20.0;
    var path = Path();
    path.lineTo(0, size.height - factor);
    path.quadraticBezierTo(0, size.height, factor, size.height);
    path.lineTo(size.width-factor, size.height);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.lineTo(factor, 0);
    path.quadraticBezierTo(0, 0, 0, factor);
    return path;
  }

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

}

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ClipPath(
          child: Container(color: Colors.blue, child: Text("Received"), padding: EdgeInsets.all(9),),
          clipper: MyClipper(),
        ),
      ),
    );
  }
}

输出：

另一种方法来实现它

class Page extends StatelessWidget {
  final radius = Radius.circular(30);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          child: Text("Received"),
          padding: EdgeInsets.all(9),
          decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.only(
              topLeft: radius,
              bottomLeft: radius
            )
          ),
        ),
      ),
    );
  }
}