Flutter的ClipRect的使用场景
ClipRect可以用来裁剪容器内部的子元素,以避免超出容器的范围而溢出。常见的应用场景有:
- 将一个图像裁剪成不同形状,如圆形、方形、椭圆等;
- 将一个复杂的控件裁剪成更容易理解的形状;
- 裁剪过大的图片或元素,以避免溢出;
- 使用ClipPath和ClipRect两个Widget结合,以创建更复杂的裁剪形状;
- 使用ClipRRect裁剪控件成圆角矩形等等。
Flutter实现圆形头像的几种方法
使用ClipRRect实现
child: ClipRRect( child: Image( image: AssetImage('images/edge.png'), fit: BoxFit.cover, width: 100, height: 100, ), borderRadius: BorderRadius.circular(50), ),
使用CircleAvatar实现
child: CircleAvatar( backgroundColor: Colors.white, backgroundImage: AssetImage('images/edge.png'), //半径越大,图片越大 radius: 50, ),
使用Container、BoxDecoration来实现
Container( width: 100, height: 100, decoration: BoxDecoration( color: Colors.white, image: DecorationImage( image: AssetImage('images/edge.png'), fit: BoxFit.cover), shape: BoxShape.circle), ),