Flutter-如何剪辑一个弧形容器?

cmssoen2  于 2023-02-13  发布在  Flutter
关注(0)|答案(1)|浏览(127)

如何实现下图效果

我有一个矩形容器(宽:400,高:100),我想剪切矩形的蓝色区域,这样我就可以得到橙子区域。
注意,橙子弧线与底线相切。
你能给予我详细的代码吗?

cwtwac6a

cwtwac6a1#

你可以使用一个自定义裁剪器类,以获得这种类型的形状,我将分享一个示例代码,你可以根据自己的需要改变值

class ClipPathClass extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double radius = 50;
    var path = Path();

    path.lineTo(0.0, size.height - 30);

    var firstControlPoint = Offset(size.width / 4, size.height);
    var firstPoint = Offset(size.width / 2, size.height);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstPoint.dx, firstPoint.dy);

    var secondControlPoint = Offset(size.width - (size.width / 4), size.height);
    var secondPoint = Offset(size.width, size.height - 30);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondPoint.dx, secondPoint.dy);

    path.lineTo(size.width, 0.0);
    path.lineTo(size.width - radius, 0);

    path.close();

    return path;
  }

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

然后使用这个ClipPathClass(),比如

ClipPath(
  clipper: ClipPathClass(),
child: Container(width:400,height: 100,color:Colors.grey)
)

相关问题