Flutter如何实现圆形头像框_flutter 头像组件

首先，一般来说，从服务器读取的图片一般都是矩形，如果页面需要一个圆形图片，那么这个时候都是前端自己来处理。在Flutter中自带了两个组件来帮助我们实现圆形头像框的开发，也可以使用普通的Container组件进行自定义一个圆。

1. CircleAvatar 组件

一般常用该组件的2个属性就能实现我们想要的结果，一是 backgroundImage ，二是radius

注意：radius 是代表的半径

CircleAvatar(
    radius: 40.0,   // 尺寸， 宽高一样， 代表的是半径，如果需要一个80x80尺寸的元素，那么配置为40即可
    backgroundImage: NetworkImage("https://www.itying.com/images/flutter/1.png"),   // 从接口中获取的图片的URL地址
),

2. ClipOval 组件

同理，想要一个圆形头像，那么还是要设定这个元素的宽高，以及图片的URL地址，但是相对于CircleAvatar组件，使用ClipOval组件，需要我们自己定义图片的平铺方式，就需要加上fit属性

ClipOval(
    child: Image.network(
        width: 80,   // 宽
        height: 80,   // 高
        "https://www.itying.com/images/flutter/1.png",  // 图片的地址
        fit: BoxFit.cover,    // fit代表该元素图片的平铺方式，一般采用cover，这个可以通过BoxFit自己点击进入BoxFit属性源码中给的值，包括：fill，contain等尝试各个值不同的效果，按需赋值即可
    ),
),

3. 也可以通过自定义一个Container容器组件来实现，主要就是给Container的decoration属性赋值一个圆角borderRadius 和 一个 Decoration属性

SizedBox(
    child: Container(
        width: 80,
        height: 80,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(40),   // 圆角设置为宽高的一半，那么这个容器就是一个圆了
            image: const DecorationImage(     // DecorationImage 是指给这个Container组件设置一个背景图，因为原图不是我们所需要的形状，那么我们就通过设置背景图来进行裁剪
                image:NetworkImage("https://www.itying.com/images/flutter/1.png"),
                fit: BoxFit.cover
            )
        ),
    ),
)

4.接下来一组完整代码可以参考

效果如下图：