Flutter ClipPath路径剪切组件-趙哥博客-赵哥博客

ClipPath 介绍：

ClipPath可以根据给定的Path来裁剪widget，它的定义跟ClipRect基本一样，不一样的地方是ClipRect传递的参数是个Rect类型，而ClipPath需要传一个Path类型，它的定义如下：

ClipPath({Key key, 
        CustomClipper<Path> clipper, 
        Clip clipBehavior: Clip.antiAlias, 
        Widget child })

这些参数的含义在讲ClipRect的时候都已经介绍过了，这里就不在赘述了，需要注意的是clipper 这里传入的需要是个Path类型。
根据Path去裁剪widget是相当的耗性能的，如果是一些已知的具体形状的裁剪，考虑使用下面裁剪工具来提高性能

矩形的裁剪，考虑使用ClipRect
椭圆或者圆形裁剪，考虑使用ClipOval
圆角矩形裁剪，考虑使用ClipRRect

ClipPath 使用：

class HomeState extends State<HomeWidget> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('ClipDemo'),),
        body: Container(
            alignment: Alignment.center,
            child: clipPath()
        ));
  }

  Widget clipPath() {
    return  ClipPath(
          clipper: __MyPathClipper(),
          child: Align(
            alignment: Alignment.topCenter,
            heightFactor: 0.5,
            child: Image.network("http://img.redocn.com/sheying/20150213/mulanweichangcaoyuanfengjing_3951976.jpg",fit: BoxFit.fill),
          )
    );
  }
}

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

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

效果图：

THE END

Flutter
# flutter # Flutter组件