圆角头像在开发中应用太普遍了，我总结了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. linux环境下oracle静默安装

    一.安装环境 1.linux版本:redhat6.3_x86_64 2.oracle版本:Oracle Database 11g Enterprise Edition Release 11.2.0.3 ...

  2. 给Xcode增加复制行、删除行快捷键的方法

    运行: sudo chmod 666 /Applications/Xcode.app/Contents/Frameworks/IDEKit.framework/Resources/IDETextKey ...

  3. NSString字符串截取方法

    1.字符串 1> 字符串比较 NSString *a = @“hello”; NSString *b = [NSString stringWithFormat:@hello”]; if (a = ...

  4. 三.OC基础--1.NSString的创建和使用,2多文件开发,3类方法,4封装

    三:OC--1.NSString的创建和使用, 1,创建常量字符串,注意使用“@“符号. NSString *astring = @"This is a String!"; //后 ...

  5. 【HNOI2004】 打鼹鼠

    [题目链接] 点击打开链接 [算法] 动态规划 f[i]表示上一次打了第i只鼹鼠,所能打死的最多的鼹鼠数量 [代码] #include<bits/stdc++.h> using names ...

  6. RDA 常用API

    FAC: app_factory_data_new.h app_guiobj_cul_fm_factorySetting_new.c _APP_Update_Layer() //刷新节点 密码文件: ...

  7. npm i macaca-android -g 无法安装成功、安装成功后运行脚本提示app-debug.apk不存在的问题

    转自https://testerhome.com/topics/8618Android 近期,macaca团队升级了macaca-android2.0.2和app-inspector1.2.28 ,导 ...

  8. MFC绘图

    //20171/121 两点一线 比如鼠标左击和鼠标弹起的两个消息 然后响应从而获取一条线2 添加响应函数方法 类图->右击->addwindowsmessage3 Dview和main中 ...

  9. Day.js 是一个仅 2kb 大小的轻量级 JavaScript 时间日期处理库，和 Moment.js 的 API 设计保持完全一样，dayjs

    https://gitee.com/mirrors/Day.js api: https://gitee.com/mirrors/Day.js/blob/master/docs/zh-cn/API-re ...

  10. webpack 4.0 相关

    Webpack 4.0发布了!! https://www.jianshu.com/p/3a13f1b37300 webpack详解 https://juejin.im/post/5aa3d2056fb ...