Flutter ClipXxx 裁剪系列

Flutter剪辑控件详解

最新推荐文章于 2025-09-30 15:04:19 发布

原创最新推荐文章于 2025-09-30 15:04:19 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Flutter ClipXxx 裁剪系列 #borderRadius圆角矩形 #ClipOval圆形 #ClipPath路径 #ClipRect矩形

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文详细介绍了Flutter中四种剪辑控件：ClipOval、ClipPath、ClipRect和ClipRRect的功能与用法，包括它们的属性设置、剪辑行为控制及代码示例。

一、ClipOval 椭圆剪辑

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

属性	说明
clipper	如果为非null，则确定要使用的剪辑
clipBehavior	控制剪辑方式 Clip.none,没有剪辑最快 Clip.hardEdge,不抗锯齿快 Clip.antiAlias,抗锯齿慢 Clip.antiAliasWithSaveLayer, 抗锯齿和saveLayer 很慢默认 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,
  ),
),

效果图

完整代码

查看完整代码