Flutter ClipXxx 裁剪系列

目录

一、ClipOval 椭圆剪辑

二、ClipPath 路径剪辑

三、ClipRect 矩形剪辑

四、ClipRRect 圆角矩形

效果图

完整代码

---

一、ClipOval 椭圆剪辑

使用椭圆剪辑其子项的小部件。

属性	说明
clipper	如果为非null，则确定要使用的剪辑
clipBehavior	控制剪辑方式 Clip.none,没有剪辑                                                  最快 Clip.hardEdge,不抗锯齿                                          快 Clip.antiAlias,抗锯齿                                                慢 Clip.antiAliasWithSaveLayer, 抗锯齿和saveLayer   很慢 扫描二维码关注公众号，回复： 8853688 查看本文章 默认 Clip.antiAlias
child	子控件

 代码示例

ClipOval(
  child: Container(
    height: 150,
    width: 150,
    color: Colors.red,
  ),
),

二、ClipPath 路径剪辑

使用路径剪辑其子项的窗口小部件。

属性	说明
clipper	如果为非null，则确定要使用的剪辑
clipBehavior	默认Clip.antiAlias
child	子控件

代码示例

ClipPath(
  clipper: MyCustomClipperPath(),
  child: Container(
    height: 150,
    width: 150,
    color: Colors.red,
  ),
),



class MyCustomClipperPath extends CustomClipper<Path> {
  //获取裁剪范围
  @override
  Path getClip(Size size) {
    //左上角为(0,0)
    var path = Path();
    // 画一个小方块
    path.moveTo(8.0, 8.0);//起始点
    path.lineTo(8.0, 17.0);
    path.lineTo(17.0, 17.0);
    path.lineTo(17.0, 8.0);

    path.close();//
    return path;
  }

  //是否重新裁剪
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }

}

三、ClipRect 矩形剪辑

使用矩形剪辑其子项的小部件。

属性	说明
clipper	如果为非null，则确定要使用的剪辑
clipBehavior	默认Clip.hardEdge
child	子控件

 代码示例

ClipRect(
  child: Container(
    height: 150,
    width: 150,
    color: Colors.red,
  ),
),

四、ClipRRect 圆角矩形

使用圆角矩形剪辑其子项的小部件。

属性	说明
clipper	如果为非null，则确定要使用的剪辑
clipBehavior	默认Clip.antiAlias
child	子控件
borderRadius	圆角半径

代码示例

ClipRRect(
  borderRadius: BorderRadius.all(Radius.circular(20)),
  child: Container(
    height: 150,
    width: 150,
    color: Colors.red,
  ),
),

效果图

完整代码

查看完整代码