Flutter关于圆角头像的问题,如何做到在任何屏幕下的1/1等比例宽高

正常情况下,我们做头像的圆角的问题,常用的有两种方案ClipRRect以及设置Container的borderRadius属性,虽然这两种方法解决了很大一部分屏幕下的圆角图片问题,但是在遇到屏幕分辨率较小的手机时,这两个都会出现无法做到真正的1/1问题
Flutter关于圆角头像的问题,如何做到在任何屏幕下的1/1等比例宽高_第1张图片

在这里我们可以使用AspectRatio来达到真正的1/1的情况

Container(
	width:100.0,
	child:AspectRatio(
   aspectRatio: 1/1,
   child: ClipRRect(
       borderRadius: BorderRadius.circular(10),
       child: Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575630083668&di=c0f3960ed1bd04e778c4b31b115f642e&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F7373ffbb29801f21120e3f7665016bbfaced0a44.jpg', fit: BoxFit.cover)),
 )
)

你可能感兴趣的:(Flutter)