Flutter ClipXxx 裁剪系列

最新推荐文章于 2025-02-28 08:34:02 发布

马志武

最新推荐文章于 2025-02-28 08:34:02 发布

阅读量1.9k

点赞数 2

分类专栏： Flutter 基础文章标签： Flutter ClipXxx 裁剪系列 borderRadius圆角矩形 ClipOval圆形 ClipPath路径 ClipRect矩形

本文链接：https://blog.youkuaiyun.com/ruoshui_t/article/details/100621793

版权

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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,
  ),
),

效果图

完整代码

查看完整代码