Flutter 圆形(头像)图片的 4种实现 |
您所在的位置:网站首页 › 818头像图片 › Flutter 圆形(头像)图片的 4种实现 |
测试图片:
var imgUrl =
"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1604650283&di=54b94bcbc1e70d6cbd16c65bbd563144&src=http://pic.51yuansu.com/pic/cover/00/23/77/57e1d8b92edba_610.jpg";
一、CircleAvatar
从widget名称也可以看出来是实现圆形头像的组件。 const CircleAvatar({ Key key, this.child, this.backgroundColor, this.backgroundImage, this.onBackgroundImageError, this.foregroundColor, this.radius, this.minRadius, this.maxRadius, }) backgroundImage 为 ImageProvider,通过 AssetImage(本地图片)或 NetworkImage(网络图片)获取图片之后在背景显示,从而形成圆形头像还有一个child,如果添加child 之后会覆盖显示到圆形图片之上。 CircleAvatar( backgroundImage: AssetImage("images/default_img43.webp",), ), Padding( padding: EdgeInsets.only(left: 55), child: SizedBox( child: CircleAvatar( radius: 15, backgroundColor: Colors.red, backgroundImage: AssetImage("images/default_img43.webp"), child: Text("Test", style: styleBlack54Size16), ), width: 50, height: 50, ), ), Padding( padding: EdgeInsets.only( left: 120, ), child: SizedBox( child: CircleAvatar( backgroundImage: NetworkImage(imgUrl), ), width: 55, height: 55, ), ),效果图 二、Container + 内部属性 DecorationImage和 CircleAvatar 类似,也是通过背景加载图片形式显示图片 Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(100), image: DecorationImage( fit: BoxFit.cover, image: NetworkImage(imgUrl), ), ), width: 40, height: 40, )注意:DecorationImage中 fit: BoxFit.cover 属性要设置,没有这个属性设置图片如果不是长款等比,就不完全是圆形展示 DecorationImage 中的image也为ImageProvider,ImageProvider获取通过AssetImage(本地图片)或 NetworkImage(网络图片)得到 三、ClipOval +Image Padding( padding: EdgeInsets.only( left: 180, ), child: ClipOval( child: Image.asset( "images/default_img43.webp", width: 55, height: 55, ), ), ), Padding( padding: EdgeInsets.only( left: 240, ), child: ClipOval( child: Image.network(imgUrl, width: 50, height: 50, fit: BoxFit.cover), ), ), ClipOval 属性child 通过 Image.asset 或者 Image.network添加圆形图片,fit 模式也要设置 为 fit: BoxFit.cover
四、ClipRRect 从单词意思是圆角矩形,可以通过计算圆角直径和宽度相同实现圆形展示,实际和方法二实现类似,都是通过控制圆角实现圆形效果 ClipRRect( borderRadius: BorderRadius.circular(30), child: Image.network(imgUrl, width: 60, height: 60, fit: BoxFit.cover))圆角图片方案 上面四种圆形图片显示实现中方法二和方法四是通过borderRadius 值 圆角大小实现圆形的,那么圆角可以根据UI大小去设定即实现所要效果 Padding( padding: EdgeInsets.only(left: 300, top: 10), child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(10), image: DecorationImage( fit: BoxFit.cover, image: NetworkImage(imgUrl), ), ), width: 50, height: 50, ), ), Padding( padding: EdgeInsets.only(left: 380, top: 10), child: ClipRRect( borderRadius: BorderRadius.circular(10), child: Image.network(imgUrl, width: 60, height: 60, fit: BoxFit.cover)), ), 效果如下:
|
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |