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.接下来一组完整代码可以参考
效果如下图：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！