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.画外框圆形, ...
随机推荐
- HP DL388 Gen9 Raid P440ar 工具
HP DL388 Gen9 服务器raid升级P440ar,原先的hpacucli 不能使用,新的工具为hpssacl hpssacli-2.10-14.0.x86_64.rpm 下载地址:wget ...
- 关于 or 判断都是Ture的问题
问题: 1. ret1 = [1, 2, 3, 4] if 11 or 33 in ret1: print("ok") else: print("no") 2. ...
- HiveQL 数据装在与导出
一.向管理表中装载数据 1.向表中装载数据load 1)load语法 2)LOCAL 指的是操作系统的文件路径,否则默认为HDFS的文件路径 3)overwrite关键字 如果用户指定了overwr ...
- 初识QuartusII 9.0(破解,半加器的仿真,综合:下)
完成波形的随机设置(A,B任意给定高低电平即可,只是当作测试信号),选择任务栏Assignments[Setings],设置Simulation mode为functional,其余保持不变点击ok. ...
- Angular动态组件
一.主页面: app.component.html: <button (click)="load();">动态</button> 2<div #dom ...
- 《挑战30天C++入门极限》C/C++中字符串常量的不相等性及字符串的Copy
C/C++中字符串常量的不相等性及字符串的Copy #include <iostream> void main(void) { if("test&quo ...
- golang-切片copy
package main import ( "fmt" ) func main() { fmt.Println("-------------") data := ...
- 贪心算法训练(九)——Best Cow Line(字典序最小问题)
原题链接:Best Cow Line 1. 问题描述 2. 输入 6 A C D B C B 3. 输出 ABCBCD 4.思路分析 不断地取原字符串 S 中开头和末尾比较小的字符串放到 T 的末尾 ...
- 《自制编程语言--基于C语言 郑钢》学习笔记
<自制编程语言>学习笔记 本仓库内容 <自制编程语言>源码 src/sparrow.tgz <自制编程语言>读书笔记 docs/* <自制编程语言>样章 ...
- CF1213F Unstable String Sort(差分)
其实全部可以为同一种字符串,但题目要求\(k\)种,我们考虑开始尽可能不同,最后再取\(min\) 考虑\(A\),全部不同:再做\(B\),\(S[b_{i-1}]\le S[b_{i}]\)如果开 ...