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.画外框圆形, ...
随机推荐
- CF553E Kyoya and Train
Kyoya and Train 一个有\(n\)个节点\(m\)条边的有向图,每条边连接了\(a_i\)和\(b_i\),花费为\(c_i\). 每次经过某一条边就要花费该边的\(c_i\). 第\( ...
- 「TJOI2018」str
碱基序列 题目描述 小豆参加了生物实验室.在实验室里,他主要研究蛋白质.他现在研究的蛋白质是由$k$个氨基酸按一定顺序构成的.每一个氨基酸都可能有$a$种碱基序列$s_{i,j}$构成. 现在小豆有一 ...
- .net框架 - Enum枚举
概要 在C#或C++,java等一些计算机编程语言中,枚举类型是一种基本数据类型而不是构造数据类型. 在C语言等计算机编程语言中,它是一种构造数据类型. 它用于声明一组命名的常数,当一个变量有几种可能 ...
- GITHUB下载源码
从昨天开始就想着从GitHub上下载一个开源的Vue的实战项目,希望能从中学习更多的Vue的实用内容,结果搞了半天好不容易下载了,不知道怎么弄.然而,今天终于成功了,激动地我赶紧来记录一下. 如何从G ...
- .net大文件分块上传断点续传demo
IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头. 一. 两个必要响应头Accept-Ranges.ETag 客户端每次提交下载请求时,服务 ...
- bzoj 5299: [Cqoi2018]解锁屏幕 状压dp+二进制
比较简单的状压 dp,令 $f[S][i]$ 表示已经经过的点集为 $S$,且最后一个访问的位置为 $i$ 的方案数. 然后随便转移一下就可以了,可以用 $lowbit$ 来优化一下枚举. code: ...
- input重复上传图片失效的问题
使用input的file来上传图片 如果是重复选择相同的图片就会失效 解决的办法就是当每次上传完图片后让input的值为空就可以解决了 附上代码 只需在末尾添加这句就行$(this).val(&quo ...
- 《挑战30天C++入门极限》C++面向对象编程入门:构造函数与析构函数
C++面向对象编程入门:构造函数与析构函数 请注意,这一节内容是c++的重点,要特别注意! 我们先说一下什么是构造函数. 上一个教程我们简单说了关于类的一些基本内容,对于类对象成员的初始化我们 ...
- YII框架的依赖注入容器
依赖注入(Dependency Injection,DI)容器就是一个对象,它知道怎样初始化并配置对象及其依赖的所有对象. 所谓的依赖就是,一个对象,要使用另外一个对象才能完成某些功能.那么这个对象就 ...
- 在Typora中使用Latex
https://blog.csdn.net/happyday_d/article/details/83715440 今后可能更多在本地编辑出Markdown之后复制上博客或者上传到GitHub.