Flutter 圆形/圆角头像图片
图片显示
1、本地图片
Image.asset
加载项目资源包的图片
//先将图片拷贝到项目 images 目录中,然后在 pubspec.yaml文件配置文件相对路径到 assets Image.asset('images/pic1.jpg'),
Image.file
加载手机内置或外置存储的图片
//加载Android平台的外置存储图片需要AndroidManifest.xml配置android.permission.READ_EXTERNAL_STORAGE权限 Image.file(
File('/0/images/cat.jpg'),
width: ,
height: ,
)
2、网络图片
Image.network
无本地缓存
Image.network(
'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
width: ,
height:
),
FadeInImage.assetNetwork
淡入效果,无本地缓存
FadeInImage.assetNetwork(
placeholder: 'images/avatar.png',
image: 'https://pic1.zhimg.com/v2-7fab628481a26f025188b095b5cfafbc.jpg',
width: ,
height:
)
CachedNetworkImage
第三方控件,有本地缓存和淡入效果
//1、将依赖框架配置到pubspec.yaml文件
dependencies:
cached_network_image: ^0.7. //2、引入相关类
import 'package:cached_network_image/cached_network_image.dart'; //3、使用控件,默认自带图片淡入效果
CachedNetworkImage(
imageUrl: 'https://pic4.zhimg.com/v2-19dced236bdff0c47a6b7ac23ad1fbc3.jpg',
width: ,
height: ,
)
圆形头像
1、CircleAvatar
CircleAvatar(
//头像半径
radius: ,
//头像图片
backgroundImage: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg'),
),
2、ClipOval
ClipOval( //圆形头像
child: new Image.network(
'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
width: 200.0,
),
),
3、Container + BoxDecoration
Container(
width: ,
height: ,
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(),
child: Image.network(
'https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg',
width: ,
height:
),
),
2、Container + BoxDecoration
Container(
width: ,
height: ,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(),
image: DecorationImage(
image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
)
)
)
其他各种形状
使用ShapeDecoration可以做出各种形状
- 斜切角:
BeveledRectangleBorder
- 圆角:
RoundedRectangleBorder
- 超椭圆:
SuperellipseShape
- 体育场:
StadiumBorder
- 圆形:
CircleBorder
//斜切角形状示例
Container(
width: ,
height: ,
decoration: ShapeDecoration(
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.circular()
),
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage('https://pic2.zhimg.com/v2-639b49f2f6578eabddc458b84eb3c6a1.jpg')
)
)
)
Flutter 圆形/圆角头像图片的更多相关文章
- [Android] 给图像加入相框、圆形圆角显示图片、图像合成知识
前一篇文章讲述了Android触屏setOnTouchListener实现突破缩放.移动.绘制和加入水印,继续我的"随手拍"项目完毕给图片加入相框.圆形圆角显示图片和图像合 ...
- flutter 实现圆角头像的2种方法
圆角头像在开发中应用太普遍了,我总结了2种实现方法,分享给大家 方法一: 使用Container组件的decoration可以实现 Container( width: 40, height: 40, ...
- Android 圆形/圆角图片的方法
Android 圆形/圆角图片的方法 眼下网上有非常多圆角图片的实例,Github上也有一些成熟的项目.之前做项目,为了稳定高效都是选用Github上的项目直接用.但这样的结束也是Android开发必 ...
- 安卓图片载入之使用universalimageloader载入圆形圆角图片
前言 话说这universalimageloader载入图片对搞过2年安卓程序都是用烂了再熟悉只是了.就是安卓新手也是百度就会有一大堆东西出来,今天为什么这里还要讲使用universalimagelo ...
- 自定义控件之 圆形 / 圆角 ImageView
一.问题在哪里? 问题来源于app开发中一个很常见的场景——用户头像要展示成圆的: 二.怎么搞? 机智的我,第一想法就是,切一张中间圆形透明.四周与底色相同.尺寸与头像相同的蒙板图片,盖在 ...
- Android 正 N 边形圆角头像的实现
卖一下广告,欢迎大家关注我的微信公众号,扫一扫下方二维码或搜索微信号 stormjun94(徐公码字),即可关注. 目前专注于 Android 开发,主要分享 Android开发相关知识和一些相关的优 ...
- Android开发之自定义圆角矩形图片ImageView的实现
android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆角矩形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap ...
- Unity用户自定义圆角头像
前天朋友遇到一个这样的需求,而且比较棘手让我帮忙解决.需求就是棋牌类的游戏,玩家的个人资料中包括自己的头像而且可以浏览相册中的图片或者使用相机拍照设置.关于这个问题我也查阅一些资料,由于涉及安卓部分知 ...
- Android开发之自定义圆角矩形图片ImageView的实现 - Jamy Cai
android中的ImageView只能显示矩形的图片,这样一来不能满足我们其他的需求,比如要显示圆角矩形的图片,这个时候,我们就需要自定义ImageView了,其原理就是首先获取到图片的Bitmap ...
随机推荐
- Vue-cli中的proxyTable解决开发环境的跨域问题
https://blog.csdn.net/u012149969/article/details/80288126 https://vuejs-templates.github.io/webpack/ ...
- Spring Bean装配(上)
Bean:在spring的IOC里面,把配置到IOC容器里面的实体或者是对象都称为Bean Bean配置项 Bean的作用域 Bean的生命周期 Bean的自动装配 Resources&Res ...
- tarjan等
有向图注意v在栈中时,才用dfn更新low.无向图不用判断这个. SCC和边双,都是在返回时判断low==dfn. 点双就是找割点,low(v)>=dfn(u)时,把tarjan(v)过程中放入 ...
- SIGAI机器学习第五集 贝叶斯分类器
讲授贝叶斯公式.朴素贝叶斯分类器.正态贝叶斯分类器的原理.实现以及实际应用 大纲: 贝叶斯公式(直接用贝叶斯公式完成分类,计算一个样本的特征向量X属于每个类c的概率,这个计算是通过贝叶斯公式来完成的. ...
- 【极大化剪枝】Power Hungry Cows-C++【没有用A*!】【超级简单!】
Description小KITTY想要快速计算整数P的幂 (1 <= P <=10,000),它们需要你的帮助.因为计算极大数的幂,所以它们同一时间仅能使用2个存储器,每个存储器可记录某个 ...
- 041_查找 Linux 系统中的僵尸进程
#!/bin/bash#awk 判断 ps 命令输出的第 8 列为 Z 是僵尸进程,显示该进程的 PID 和进程命令 ps aux |awk '{if($8 == "Z"){pri ...
- P1594 护卫队
题目描述 护卫车队在一条单行的街道前排成一队,前面河上是一座单行的桥.因为街道是一条单行道,所以任何车辆都不能超车.桥能承受一个给定的最大承载量.为了控制桥上的交通,桥两边各站一个指挥员.护卫车队被分 ...
- Integer int auto-boxing auto-unboxing ==
Auto-boxing 自动装箱 Auto-unboxing 自动拆箱 == 相等 1.new出来的对象,除非遇到了拆箱的情况,肯定不相等. 因为new对象之前需要在JVM堆中提供空间,所以new出来 ...
- c++ 判断是元音还是辅音
#include <iostream> using namespace std; int main() { char c; int isLowercaseVowel, isUppercas ...
- Django基础之中间件
1. 引入 在之前学习的过程中,已经学会了给视图函数加装饰器来判断用户是否登录,把没有登录的用户请求跳转到登录页面. 我们通过给几个特定视图函数加装饰器实现了这个需求. 但是以后添加的视图函数可能也需 ...