Flutter ClipRRect

ClipRRect是 Flutter 中用于将子组件裁剪为圆角矩形的核心 Widget常用于实现图片、容器、卡片的圆角效果。一、核心属性dartconst ClipRRect({ Key? key, BorderRadiusGeometry borderRadius BorderRadius.zero, // 圆角 CustomClipperRRect? 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. 简单圆角容器dartClipRRect( 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. 圆角图片最常用dartClipRRect( borderRadius: BorderRadius.circular(12), child: Image.network( https://picsum.photos/300/300, width: 150, height: 150, fit: BoxFit.cover, ), )3. 不对称圆角只裁顶部dartClipRRect( borderRadius: BorderRadius.vertical(top: Radius.circular(20)), child: Container( width: 250, height: 150, color: Colors.green[200], ), )三、进阶CustomClipper自定义圆角需要不规则 / 动态圆角时继承CustomClipperRRectdartclass MyRRectClipper extends CustomClipperRRect { 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 CustomClipperRRect oldClipper) false; } // 使用 ClipRRect( clipper: MyRRectClipper(), // 优先级高于 borderRadius child: Container(width: 200, height: 200, color: Colors.orange), )四、注意事项clipper存在时borderRadius会被忽略Flutter必须有确定尺寸ClipRRect 依赖子组件 / 父组件的宽高约束性能频繁重绘时尽量用hardEdge或减少裁剪层数替代方案简单圆角Container(decoration: BoxDecoration(borderRadius: ...))圆形ClipOval或CircleAvatar五、常见场景对比表格需求推荐 Widget统一圆角ClipRRect.circular单独某角圆角ClipRRect.only圆形图片ClipOval / CircleAvatar不规则圆角CustomClipperRRect性能优先Clip.hardEdge