文档章节

Flutter 图片、圆形头像、圆角图片....各种形状

o
 osc_w9s1w4o0
发布于 2019/04/03 13:57
字数 432
阅读 102
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

图片

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')
    )
  )
)

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
【opencv】图形的绘制

1.矩形图像的绘制: 原函数:void cvRectangle(CvArr* img, CvPoint pt1, CvPoint pt2, CvScalar color, int thickness=1, int line_type=8,int shift=0) img就是需要绘制的图像 pt1 and pt......

其实我是兔子
2014/10/08
1.2K
1
桌面即时贴软件--GloboNote

GloboNote 是一个桌面记事软件,可帮你创建待办事宜、提醒和其他笔记信息。无限制即时贴的数量,可分组整理,支持搜索,可定制文本的显示格式(字体、颜色和大小),可将某个即时贴始终显示在...

匿名
2013/01/21
6.8K
1
Touch Visualizer

在界面上加上用户点击、划动屏幕时的轨迹。当用户的手指在屏幕上触摸或点击时(触发任意点击事件),会在手指点击的地方加上慢慢扩展消失的红色圆环,并且在手指触摸的地方加上半透明的圆形效...

匿名
2013/01/26
418
0
XLSX读写库--EPPlus

EPPlus 是使用Open Office XML格式(xlsx)读写Excel 2007 / 2010文件的.net开发库。 EPPlus 支持: 单元格范围 单元格样式(Border, Color, Fill, Font, Number, Alignments) Charts 图片 形状...

匿名
2013/02/01
1W
2
基于 ThinkPHP 的内容管理系统--歪酷CMS

歪酷网站管理系统(歪酷CMS)是一款基于THINKPHP框架开发的PHP+MYSQL网站建站程序,本程序实现了文章和栏目的批量动态管理,支持栏目无限分类,实现多管理员管理,程序辅助功能也基本实现了常见的文...

鲁大在线
2013/02/19
7K
2

没有更多内容

加载失败,请刷新页面

加载更多

CSS基本选择器

标签选择器 HTML标签作为标签选择器的名称<h1>…<h6>、<p>、<img/> 类选择器 一些特殊的实现效果,单纯使用标签选择器不能实现,从而引出类选择器 ID选择器 ID选择器的名称就是HTML中标签的...

hmyqwe
29分钟前
0
0
SpringCloudGateway+Consul集群部署笔记

spring cloud gateway已经使用了较长一段时间,一直有想法,整理整理一下,形成一个有效的记录,近期终于抽空写成笔记。 1、基本环境 版本:consul-1.7.2 服务:192.168.11.45(windows)、1...

不会飞的小龙人
29分钟前
17
0
搞工程和搞电子的人摆摊能做什么?

由于疫情的影响 国家开始鼓励地摊经济。 我们来看看,搞工程和搞电子的人摆摊能什么。 先看,搞工程的人是这样摆摊的! 而搞电子的人是这样摆摊的! PCB工程师 测试工程师 射频工程师 单片机...

IT技术分享社区
07/08
7
0
三年级小孩子的解题思路

专业术语这叫对称性残缺,对三年级小孩子讲,就叫镜子! 有时懂了并不一定能让别人也很好的懂得...... 做一个好老师,其实真的很难, 太难了! 无数伟大的科学家、艺术家都不是好的老师! 本...

mathwater
05/07
12
0
每日一讲11:兔子繁殖推算

题目:古 典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 程序分析:兔子的规律为数列1...

花儿开放
07/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部