| Flutter 圆形（头像）图片的 4种实现 | 您所在的位置：网站首页 › 军婚照片头像图片 › Flutter 圆形（头像）图片的 4种实现 |
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, ), ),效果图
和 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)), ), 效果如下：
|
【本文地址】
公司简介
联系我们