Flutter的圆形头像四种简单用法

文章目录

一、ClipOval
二、CircleAvatar
三、ClipRRect
四、Container+BoxDecoration

一、ClipOval

该方式属于绘图功能，只能简单的显示圆形头像

//圆角头像1
//如果做圆形头像的话，必须是正方形，长方形则是椭圆形
//是剪裁布局中的一种,详情可看:https://www.cnblogs.com/sundaysme/p/12579525.html
//ClipRect 将 child 剪裁为给定的矩形大小
// ClipRRect 将 child 剪裁为圆角矩形
// ClipOval 如果 child 为正方形时剪裁之后是圆形，如果 child 为矩形时，剪裁之后为椭圆形
// ClipPath 将 child 按照给定的路径进行裁剪
// CustomClipper 并不是一个widget，但是使用CustomClipper可以绘制出任何我们想要的形状
// ClipRect 将 child 剪裁为给定的矩形大小
_buildAvatar1(){return ClipOval(child: Image.network('http://pics5.baidu.com/feed/622762d0f703918f751ba5e950ce8d915beec4c1.jpeg?token=ed435fd18c71cf7ca7a011acb70460f7',width: 100,height: 100,),);
}

二、CircleAvatar

该组件是Flutter自己提供的圆角头像，可以在头像上面添加一个组件

//     圆角头像2,Flutter提供的圆角头像控件，可以定制一些属性,如下:
//     this.child,控件，可以放个用户名
//     this.backgroundColor,//背景颜色
//     this.backgroundImage,//背景图片，头像可以放在这里，默认值不为透明
//     this.onBackgroundImageError,//背景加载错误时候的图片
//     this.foregroundColor,//前景色
//     这个控件需要给个宽高
_buildAvatar2(){return Container(width: 100,height: 100,child: CircleAvatar(child: Text('名字',style: TextStyle(color: Colors.blue),),backgroundImage: NetworkImage('http://pics5.baidu.com/feed/622762d0f703918f751ba5e950ce8d915beec4c1.jpeg?token=ed435fd18c71cf7ca7a011acb70460f7'),),);
}

三、ClipRRect

该实现方式可以定制圆角弧度

///圆角头像3
_buildAvatar3(){return ClipRRect(child: Image.network('http://pics5.baidu.com/feed/622762d0f703918f751ba5e950ce8d915beec4c1.jpeg?token=ed435fd18c71cf7ca7a011acb70460f7',width: 100,height: 100,),borderRadius:BorderRadius.circular(20));
}

四、Container+BoxDecoration

该方式自定义程度最高

///圆角头像4
///难度最大，自由度最高，
///可以加边框，背景，渐变色
_buildAvatar4(){return Container(width: 100,height: 100,decoration: BoxDecoration(image: DecorationImage(image: NetworkImage('http://pics5.baidu.com/feed/622762d0f703918f751ba5e950ce8d915beec4c1.jpeg?token=ed435fd18c71cf7ca7a011acb70460f7'),),borderRadius: BorderRadius.circular(10),),);
}

Flutter的圆形头像四种简单用法相关推荐

python中的函数参数主要有四种_python3中函数参数的四种简单用法
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...
Flutter实现圆形头像的几种方法
Flutter的ClipRect的使用场景 ClipRect可以用来裁剪容器内部的子元素,以避免超出容器的范围而溢出.常见的应用场景有: 将一个图像裁剪成不同形状,如圆形.方形.椭圆等: 将一个复杂的 ...
css实现圆形的四种方法
CSS在网页上生成一个圆形的四种方法 border-radius SVG clip-path radial-gradient # border-radius 是最简单的应用,并且得到了广泛的支持.该b ...
php xml对象解析_php解析xml 的四种简单方法(附实例)
XML处理是开发过程中经常遇到的,PHP对其也有很丰富的支持,本文只是对其中某几种解析技术做简要说明,包括:Xml parser, SimpleXML, XMLReader, DOMDocument. ...
四种简单的图像显著性区域特征提取方法-----AC/HC/LC/FT。
四种简单的图像显著性区域特征提取方法-----> AC/HC/LC/FT. 分类: 图像处理 2014-08-03 12:40 4088人阅读评论(4) 收藏举报 salient regio ...
四种简单的图像显著性区域特征提取方法----- AC/HC/LC/FT。
四种简单的图像显著性区域特征提取方法-----> AC/HC/LC/FT. 分类: 图像处理 2014-08-03 12:40 4088人阅读评论(4) 收藏举报 salient regio ...
用python爬取基金网信息数据，保存到表格，并做成四种简单可视化。（爬虫之路，永无止境！）
用python爬取基金网信息数据,保存到表格,并做成四种简单可视化.(爬虫之路,永无止境!) 上次 2021-07-07写的用python爬取腾讯招聘网岗位信息保存到表格,并做成简单可视化. 有的人留 ...
java刷卡计时计次源码美萍_Java 定时调配 Timer 类和定任务 TimerTask 类（一篇详细且完整的源码分析以及四种简单的使用方法）...
前言在我们日常生活中,我们常常会遇到有关计时器的事情.如商城类项目会在某年某月某日某时某分某秒进行特价活动,那么当时间到达这个时间点上的时候该事件就会触发. 1.Timer 类构造函数摘要 1 Ti ...
C#开发技术点说明-四种简单的排序算法,AJAX,Http Module,Http 请求处理流
我觉得如果想成为一名优秀的开发者,不仅要积极学习时下流行的新技术,比如WCF.Asp.Net MVC.AJAX等,熟练应用一些已经比较成熟的技术,比如Asp.Net.WinForm.还应该有着牢固的计 ...

Flutter的圆形头像四种简单用法

文章目录

一、ClipOval

二、CircleAvatar

三、ClipRRect

四、Container+BoxDecoration

Flutter的圆形头像四种简单用法相关推荐

最新文章

热门文章