圆角头像在开发中应用太普遍了，我总结了2种实现方法，分享给大家

方法一：

使用Container组件的decoration可以实现

Container(

  width: 40,

  height: 40,

  decoration: BoxDecoration(

    borderRadius: BorderRadius.circular(20),

    image: DecorationImage(

      image: NetworkImage("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561011314262&di=29253749380f34583bbcae1a614d6f6e&imgtype=0&src=http%3A%2F%2Fimg3.mukewang.com%2F5c18cf540001ac8206000338.jpg",)

    )

  ),

),

其中borderRadius的值设为宽或高的一半

方法二：使用ClipRRect组件

ClipRRect(

  borderRadius: BorderRadius.circular(20),

  child: Image.network(

    "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561011314262&di=29253749380f34583bbcae1a614d6f6e&imgtype=0&src=http%3A%2F%2Fimg3.mukewang.com%2F5c18cf540001ac8206000338.jpg",

    width: 40,

    height: 40,

  ),

),

flutter 实现圆角头像的2种方法的更多相关文章

  1. IOS_视图实现圆角效果的三种方法及比较

    通过代码,至少有三种方法可以为视图加上圆角效果.附例子:https://github.com/weipin/RoundedCorner 方法一.layer.cornerRadius 第一种方法最简单, ...

  2. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

  3. Flutter 圆形/圆角头像图片

    图片显示 1.本地图片 Image.asset加载项目资源包的图片 //先将图片拷贝到项目 images 目录中,然后在 pubspec.yaml文件配置文件相对路径到 assets Image.as ...

  4. iOS常见用户头像的圆形图片裁剪常见的几种方法

    在开发中,基本上APP的用户头像的处理都需要把用户所上传的方形图片,处理为圆形图片.在这里就总结三种常见的处理圆形图片的方法. 1.使用位图上下文 2.使用UIView的layer进行处理 3.使用r ...

  5. Quartz2D之生成圆形头像、打水印、截图三种方法的封装

    我给UIImage类添加了一个类目,用于封装三个方法,每个方法都没有难度,做这个主要为了练习一下封装: 首先在类目.h文件中声明三个方法:以及创建了一个枚举.用于水印方法中设定水印位置:方法说明和参数 ...

  6. Qt 之 设置窗口边框的圆角（使用QSS和PaintEvent两种方法）

    Qt在设置窗口边框圆角时有两种方式,一种是设置样式,另一种是在paintEvent事件中绘制窗口.下面分别叙述用这两种方式来实现窗口边框圆角的效果. 一.使用setStyleSheet方法 this- ...

  7. iOS设置圆角的四种方法

    小小圆角问题,正常情况下,我们不需要过多关心,但当屏幕内比较多的时候,还是有必要了解下性能问题的 一.设置CALayer的cornerRadius 这是最常用的,也是最简单的. cornerRadiu ...

  8. 09 Flutter底部Tab切换保持页面状态的几种方法

    IndexedStack:保此所有页面的状态: AutomaticKeepAliveClientMixin:保此部分页面的状态: 修改的页面代码: 页面效果: Tabs.dart import 'pa ...

  9. 为了弄懂Flutter的状态管理, 我用10种方法改造了counter app

    为了弄懂Flutter的状态管理, 我用10种方法改造了counter app 本文通过改造flutter的counter app, 展示不同的状态管理方法的用法. 可以直接去demo地址看代码: h ...

随机推荐

  1. javascript正则找script标签, link标签里面的src或者 href属性

    1. [代码]javascript 简单的search    <script(?:(?:\s|.)+?)src=[\"\'](.+?)[\"\'](?!\<)(?:(? ...

  2. 三角函数补充（反三角函数与 sec）

    1. sec=1cos Secant (sec) - Trigonometry function secx=HA

  3. 初探js闭包

    1.变量的作用域:全局变量.局部变量 函数内部可以直接读取局部变量 js代码 var n=2; function fun(){ alert(n); } fun();  //2 函数外部不能读取函数内部 ...

  4. 476. Number Complement（补数）

    Given a positive integer, output its complement number. The complement strategy is to flip the bits ...

  5. javascript判断页面是否在移动设备上打开

    var ua = navigator.userAgent; var ipad = ua.match(/(iPad).*OS\s([\d_]+)/), isIphone =!ipad && ...

  6. PHP tripos()函数使用需要注意的问题

    tripos() 函数返回字符串在另一个字符串中第一次出现的位置.这在PHP字符串匹配与替换的时候常用到,但是很多时候我们总感觉当查找的字符串在源字符串的开头的时候总会不好使. 原来stripos() ...

  7. null、undefined和NaN的简洁比较

    Null 类型也只有一个值,即null.null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象.Undefined 类型只有一个值,即undefined.当声明的变量还未被初始化时,变 ...

  8. 洛谷P3287 [SCOI2014]方伯伯的玉米田（树状数组）

    传送门 首先要发现,每一次选择拔高的区间都必须包含最右边的端点 为什么呢?因为如果拔高了一段区间,那么这段区间对于它的左边是更优的,对它的右边会更劣,所以我们每一次选的区间都得包含最右边的端点 我们枚 ...

  9. （11）用css设计电子相册 {上}

    本篇学习资料讲解:       通过css对电子相册进行排版 和 侧面强调“盒子模型.标准流.浮动和定位”的重要性. 先来看看"双向联动模式"的电子相册图: {鼠标指针经过某张图片 ...

  10. 初学Linux应该注意的事项

    相比于windows linux严格区分大小写 linux所有内容都是以文件形式保存 linux不靠扩展名区分文件类型(靠权限),linux下文件扩展名主要是方便管理员分类 linux所有的存储设备都 ...