Flutter 图片、圆形头像、圆角图片....各种形状
图片
1. 本地图片
Image.asset 加载项目资源包的图片

//先将图片拷贝到项目 images 目录中,然后在 pubspec.yaml文件配置文件相对路径到 assets
Image.asset(
'images/cat.jpg',
width: 200,
height: 200,
)

Image.file 加载手机内置或外置存储的图片

//加载Android平台的外置存储图片需要AndroidManifest.xml配置android.permission.READ_EXTERNAL_STORAGE权限
Image.file(
File('/0/images/cat.jpg'),
width: 200,
height: 200,
)

2. 网络图片
Image.network 无本地缓存
Image.network(
'https://pic4.zhimg.com/v2-19dced236bdff0c47a6b7ac23ad1fbc3.jpg',
width: 200,
height: 200,
)
FadeInImage.assetNetwork 淡入效果,无本地缓存

FadeInImage.assetNetwork(
placeholder: 'images/avatar.png',
image: 'https://pic1.zhimg.com/v2-7fab628481a26f025188b095b5cfafbc.jpg',
width: 200,
height: 200
)

CachedNetworkImage 第三方控件,有本地缓存和淡入效果

//1、将依赖框架配置到pubspec.yaml文件
dependencies:
cached_network_image: ^0.7.0 //2、引入相关类
import 'package:cached_network_image/cached_network_image.dart'; //3、使用控件,默认自带图片淡入效果
CachedNetworkImage(
imageUrl: 'https://pic4.zhimg.com/v2-19dced236bdff0c47a6b7ac23ad1fbc3.jpg',
width: 200,
height: 200,
)

圆形头像
方式1: CircleAvatar

CircleAvatar(
//头像半径
radius: 60,
//头像图片 -> NetworkImage网络图片,AssetImage项目资源包图片, FileImage本地存储图片
backgroundImage: NetworkImage(
'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'
),
)

方式2: ClipOval

ClipOval(
child: Image.network(
'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
width: 120,
height: 120,
fit: BoxFit.cover,
),
)

方式3: Container + BoxDecoration

Container(
width: 120,
height: 120,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'),
fit: BoxFit.cover
)
)
)

圆角图片
方式1: ClipRRect

ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
width: 120,
height: 120
)
)

方式2: Container + BoxDecoration

Container(
width: 120,
height: 120,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
image: DecorationImage(
image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
)
)
)

各种形状
使用ShapeDecoration可以做出各种形状
- 斜切角: BeveledRectangleBorder
- 圆角: RoundedRectangleBorder
- 超椭圆: SuperellipseShape
- 体育场: StadiumBorder
- 圆形: CircleBorder

//斜切角形状示例
Container(
width: 120,
height: 120,
decoration: ShapeDecoration(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular(16)
),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
)
)
)

Flutter 图片、圆形头像、圆角图片....各种形状的更多相关文章
- Android Xfermode 实战 实现圆形、圆角图片
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/42094215,本文出自:[张鸿洋的博客] 1.概述 其实这篇本来准备Androi ...
- Android BitmapShader 实战 实现圆形、圆角图片
转载自:http://blog.csdn.net/lmj623565791/article/details/41967509 1.概述 记得初学那会写过一篇博客Android 完美实现图片圆角和圆形( ...
- Android_BitmapShader实现圆形、圆角图片
转:http://blog.csdn.net/lmj623565791/article/details/41967509,本文出自:[张鸿洋的博客] 1.概述 记得初学那会写过一篇博客Android ...
- 【转】Android BitmapShader 实战 实现圆形、圆角图片
转载自:http://blog.csdn.net/lmj623565791/article/details/41967509 1.概述 记得初学那会写过一篇博客Android 完美实现图片圆角和圆形( ...
- android 拍照,裁切,上传圆形头像, 图片等比缩放
最近太忙了,没有空更新博客,其它部分以后再更新: 今天给大家分享的是解决解析图片的出现oom的问题,我们可以用BitmapFactory这里的各种Decode方法,如果图片很小的话,不会出现oom,但 ...
- HTML+CSS:圆形和圆角图片格式
效果展示 实现代码 <!DOCTYPE html> <html> <head> <title>JcMan</title> <style ...
- Android实现圆形圆角图片
本文主要使用两种方法实现图形圆角图片 自定View加上使用Xfermode实现 Shader实现 自定View加上使用Xfermode实现 /** * 根据原图和变长绘制圆形图片 * * @param ...
- Android Xfermode 真实 实现全面、圆角图片
转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/42094215.本文出自:[张鸿洋的博客] 1.概述 事实上这篇本来准备Andro ...
- php 圆角图片处理
/** * 把图片转换成圆角 * @param string $imgpath * @param int $radius * @return resource */ public function r ...
- Android 圆形头像 自己动手
圆形头像DIY 现在大部分app使用的都是圆形头像,网上开源的也很多,但是有没有考虑过DIY圆形头像呢?下面就自己实现一个,先看下demo展示 第一步:原理解释(图片很丑,原理很真) 1.画外框圆形, ...
随机推荐
- javaWeb的HttpServletRequest和HttpServletResponse
HttpServletRequest HttpServletRequest对象是封装了用户的请求信息,包括请求参数去,请求头等信息,service()f方法中的两个HttpServletRequest ...
- c++的动态绑定和静态绑定及多态的实现原理(摘)
C++多态的实现原理 为了支持c++的多态性,才用了动态绑定和静态绑定.理解它们的区别有助于更好的理解多态性,以及在编程的过程中避免犯错误. 需要理解四个名词:对象的静态类型:对象在声明时采用的类型. ...
- stm32自带的flash分布图
缘由是要用到flash来保存数据,因此查阅了数据手册与参考手册,一般情况下,将要保存的数据存放到比较靠后的地方,page254,page255,4k字节,已经相当多的了,
- 数据库访问优化之四:减少数据库服务器CPU运算
1.使用绑定变量 绑定变量是指SQL中对变化的值采用变量参数的形式提交,而不是在SQL中直接拼写对应的值. 非绑定变量写法:Select * from employee where id=123456 ...
- mysqli类的对象和其属性方法;mysqli类面向过程的属性和方法
mysqli 方法的概述 mysqli 类 面向对象接口 面向过程接口 描述 属性 $mysqli::affected_rows mysqli_affected_rows() 获取上次 Mysql ...
- 影像优化 OptimizeRaster工具包介绍
Esri OptimizeRasters是一个高效.可配置的开源工具包. OptimizeRasters提供了以下功能: 影像格式转换和压缩.支持输出优化栅格格式:MRF.分块TIFF.云存储优化Ge ...
- 洛谷P3522 TEM-temperature
题目 单调队列+阅读理解 简化题意. 找到一个最长的区间使得区间每个点的r要大于该点之前的点的l. 然后可以用单调队列维护单调递减的l.最后尺取法O(n)枚举所有区间并取最大值. 单调队列可以快速找某 ...
- content="IE=Edge"是什么意思?
永远以最新的IE版本模式来显示网页 <meta http-equiv="X-UA-Compatible" content="IE=7">#以上代码告 ...
- [luogu 4719][模板]动态dp
传送门 Solution \(f_{i,0}\) 表示以i节点为根的子树内,不选i号节点的最大独立集 \(f_{i,1}\)表示以i节点为根的子树内,选i号节点的最大独立集 \(g_{i,0}\) 表 ...
- QuartzNet 远程管理持久化job 项目, 源码在Github..希望对大家有所帮助
文章目录 为了方便大家去学习 QuartzNet 与 CrystalQuartz 更多信息请点击链接查看 简介 结构图 为了方便大家去学习 QuartzNet 与 CrystalQuartz 更多信息 ...