关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

Flutter实现圆形头像的几种方法

发布时间:2023-06-26 17:00:32

Flutter的ClipRect的使用场景

ClipRect可以用来裁剪容器内部的子元素,以避免超出容器的范围而溢出。常见的应用场景有:

  1. 将一个图像裁剪成不同形状,如圆形、方形、椭圆等;
  2. 将一个复杂的控件裁剪成更容易理解的形状;
  3. 裁剪过大的图片或元素,以避免溢出;
  4. 使用ClipPath和ClipRect两个Widget结合,以创建更复杂的裁剪形状;
  5. 使用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), ),

/template/Home/leiyu/PC/Static