Flutter ClipRRect

ClipRRect是 Flutter 中用于将子组件裁剪为圆角矩形的核心 Widget，常用于实现图片、容器、卡片的圆角效果。

一、核心属性

dart

const ClipRRect({ Key? key, BorderRadiusGeometry borderRadius = BorderRadius.zero, // 圆角 CustomClipper<RRect>? clipper, // 自定义裁剪（优先级更高） Clip clipBehavior = Clip.antiAlias, // 裁剪模式 Widget? child, // 子组件 }) ```{insert\_element\_0\_} - **`borderRadius`**：控制圆角大小，常用： - `BorderRadius.circular(12)`：**4角同圆**（最常用） - `BorderRadius.only(...)`：**单独指定**某几角 ```dart BorderRadius.only( topLeft: Radius.circular(16), topRight: Radius.circular(16), )

• BorderRadius.vertical(...)/BorderRadius.horizontal(...)

• clipBehavior（裁剪质量 / 性能）：

  • Clip.hardEdge：无抗锯齿、最快（边角略锯齿）
  • Clip.antiAlias（默认）：抗锯齿、平滑（推荐）
  • Clip.antiAliasWithSaveLayer：极高质量、耗性能（少用）

• clipper：自定义裁剪规则（复杂形状时用）

二、基础用法（圆角图片 / 容器）

1. 简单圆角容器

dart

ClipRRect( borderRadius: BorderRadius.circular(16), clipBehavior: Clip.antiAlias, child: Container( width: 200, height: 200, color: Colors.blue[300], alignment: Alignment.center, child: Text("ClipRRect", style: TextStyle(color: Colors.white, fontSize: 18)), ), )

2. 圆角图片（最常用）

dart

ClipRRect( borderRadius: BorderRadius.circular(12), child: Image.network( "https://picsum.photos/300/300", width: 150, height: 150, fit: BoxFit.cover, ), )

3. 不对称圆角（只裁顶部）

dart

ClipRRect( borderRadius: BorderRadius.vertical(top: Radius.circular(20)), child: Container( width: 250, height: 150, color: Colors.green[200], ), )

三、进阶：CustomClipper（自定义圆角）

需要不规则 / 动态圆角时，继承CustomClipper<RRect>：

dart

class MyRRectClipper extends CustomClipper<RRect> { @override RRect getClip(Size size) { // 定义裁剪区域：居中、缩小、大圆角 final rect = Rect.fromLTWH(20, 20, size.width-40, size.height-40); return RRect.fromRectAndRadius(rect, Radius.circular(30)); } @override bool shouldReclip(covariant CustomClipper<RRect> oldClipper) => false; } // 使用 ClipRRect( clipper: MyRRectClipper(), // 优先级高于 borderRadius child: Container(width: 200, height: 200, color: Colors.orange), )

四、注意事项

1. clipper存在时，borderRadius会被忽略Flutter
2. 必须有确定尺寸：ClipRRect 依赖子组件 / 父组件的宽高约束
3. 性能：频繁重绘时尽量用hardEdge或减少裁剪层数
4. 替代方案：
   • 简单圆角：Container(decoration: BoxDecoration(borderRadius: ...))
   • 圆形：ClipOval或CircleAvatar

五、常见场景对比

表格