Question

我正在使用CicleAvatar显示我的头像，但未显示圆形。这是我的代码

  //Circle Image
  Widget circularImage(){
    return new CircleAvatar(
        radius: 45,
        child: CachedNetworkImage(
          imageUrl: this.strImageURL,
          placeholder: new CircularProgressIndicator(),
          errorWidget: new Icon(Icons.error),
        )
    );
  }

Answer 1

您可以将您的cachedNetworkImage包装在ClipRRect小部件中，如下所示：

Widget circularImage(){
    return CircleAvatar(
        radius: 45,
        child: ClipRRect(
            borderRadius: BorderRadius.circular(45),
            child: CachedNetworkImage(
              imageUrl: this.strImageURL,
              placeholder: new CircularProgressIndicator(),
              errorWidget: new Icon(Icons.error),
            ),
        ),
    );
  }

Answer 2

可以使用

ClipOval，这将创建一个椭圆形的剪辑。如果[clipper]为null，则椭圆形将被刻入版面尺寸和孩子的位置。

ClipOval(
  child: Image.asset(
    "image.png",
    fit: BoxFit.cover,
    width: 50.0,
    height: 50.0,
  )
),

CircleAvatar不显示圆形图像

2 个答案: