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

Posted 2023-02-25

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