flutter - ClipPath完全圆角

我想创建一个像这样的路径:



但是实际结果边框不好:



现在我想知道如何与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;
  }
}

最佳答案

看一下这个..

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

关于flutter - ClipPath完全圆角，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61630501/