Flutter组件学习(二)—— Image
序言
上一节中,我们讲了 Flutter
中 Text
组件的一些用法以及 API
,本节我们继续学习 Flutter
中的 Image
组件,同样先上图:
Image组件的构造方法
在 Android
中,我们都知道,图片的显示方式有很多,资源图片、网络图片、文件图片等等,在 Flutter
中也有多种方式,用来加载不同形式的图片:
- Image:通过ImageProvider来加载图片
- Image.asset:用来加载本地资源图片
- Image.file:用来加载本地(File文件)图片
- Image.network:用来加载网络图片
- Image.memory:用来加载Uint8List资源(byte数组)图片
1、Image
Image
的一个参数是 ImageProvider
,基本上所有形式的图片加载都是依赖它,这个类里面就是实现图片加载的原理。用法如下:
new Image(image: new AssetImage('images/logo.png'));new Image(image: new NetworkImage('http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg'))
2、Image.asset
加载一个本地资源图片,和 Android
一样,有多种分辨率的图片可供选择,但是沿袭的是 iOS
的图片风格,分为 1x
,2x
,3x
,具体做法是在项目的根目录下创建两个文件夹,如下图所示:
然后需要在 pubspec.yaml
文件中声明一下:
flutter:# The following line ensures that the Material Icons font is# included with your application, so that you can use the icons in# the material Icons class.uses-material-design: trueassets:- images/logo.png- images/2.0x/logo.png- images/3.0x/logo.png
用法如下:
new Image.asset('images/logo.png')
3、Image.file
加载一个本地 File
图片,比如相册中的图片,用法如下
new Image.file(new File('/storage/xxx/xxx/test.jpg'))
4、Image.network
加载一个网络图片,用法如下:
new Image.network('http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg')
有的时候我们需要像Android那样使用一个占位图或者图片加载出错时显示某张特定的图片,这时候需要用到 FadeInImage
这个组件:
new FadeInImage.assetNetwork(placeholder: 'images/logo.png',image: imageUrl,width: 120,fit: BoxFit.fitWidth,
)new FadeInImage.memoryNetwork(placeholder: kTransparentImage,image: imageUrl,width: 120,fit: BoxFit.fitWidth,
)
第一种方法是加载一个本地的占位图,第二种是加载一个透明的占位图,但是需要注意的是,这个组件是不可以设置加载出错显示的图片的;这里有另一种方法可以使用第三方 package
的 CachedNetworkImage
组件:
new CachedNetworkImage(width: 120,fit: BoxFit.fitWidth,placeholder: new CircularProgressIndicator(),imageUrl: imageUrl,errorWidget: new Icon(Icons.error),
)
CachedNetworkImage
组件中的占位图是一个 Widget
,这样的话就可以自定义了,你想使用什么样的组件进行占位都行,同样加载出错的占位图也是一个组件,也可以自己定义;该组件也是通过缓存来加载图片的。
5、Image.memory
用来将一个 byte
数组加载成图片,用法如下:
new Image.memory(bytes)
Text组件的API
API名称 | 功能 |
---|---|
width & height | 用来指定显示图片区域的宽高(并非图片的宽高) |
fit | 设置图片填充,类似于Android中的ScaleType |
color & colorBlendMode | 这两个属性需要配合使用,就是颜色和图片混合,就类似于Android中的Xfermode |
alignment | 用来控制图片摆放的位置 |
repeat | 用来设置图片重复显示(repeat-x水平重复,repeat-y垂直重复,repeat两个方向都重复,no-repeat默认情况不重复) |
centerSlice | 设置图片内部拉伸,相当于在图片内部设置了一个.9图,但是需要注意的是,要在显示图片的大小大于原图的情况下才可以使用这个属性,要不然会报错 |
matchTextDirection | 这个需要配合Directionality进行使用 |
gaplessPlayback | 当图片发生改变之后,重新加载图片过程中的样式(1、原图片保留) |
fit
属性中有很多值可以设置:
属性名称 | 样式 |
---|---|
BoxFit.contain | 全图居中显示但不充满,显示原比例 |
BoxFit.cover | 图片可能拉伸,也可能裁剪,但是充满容器 |
BoxFit.fill | 全图显示且填充满,图片可能会拉伸 |
BoxFit.fitHeight | 图片可能拉伸,可能裁剪,高度充满 |
BoxFit.fitWidth | 图片可能拉伸,可能裁剪,宽度充满 |
BoxFit.scaleDown | 效果和contain差不多, 但是只能缩小图片,不能放大图片 |
colorBlendMode
属性中有很多值可以设置,由于可选值太多,这里就不一一介绍了,有兴趣的可以去官网colorBlendMode属性介绍看看
实现圆角/圆形图片
1、圆角
很多时候我们需要给图片设置圆角,那么在flutter中是怎么实现的呢?有很多种方法可以实现,下面我举两个例子:
使用裁剪来实现图片圆角:new ClipRRect(child: Image.network(imageUrl,scale: 8.5,fit: BoxFit.cover,),borderRadius: BorderRadius.only(topLeft: Radius.circular(20),topRight: Radius.circular(20),),
)使用边框来实现图片圆角:new Container(width: 120,height: 60,decoration: BoxDecoration(shape: BoxShape.rectangle,borderRadius: BorderRadius.circular(10.0),image: DecorationImage(image: NetworkImage(imageUrl),fit: BoxFit.cover),),
)
需要注意的是,使用边框实现的时候要注意设置 fit
属性,不然效果也是有问题的,当然了你还可以使用 Material
组件来实现,这个大家可以自己去尝试。
2、圆形
圆形图片用得最多的应该是头像之类的,这种同样有多种方式可以实现,下面我也举两个例子:
使用裁剪实现圆形图片:new ClipOval(child: Image.network(imageUrl,scale: 8.5,),
)使用CircleAvatar来实现圆形图片:new CircleAvatar(backgroundImage: NetworkImage(imageUrl),radius: 50.0,
)
当然了,你还可以使用边框 BoxDecoration
来实现,效果也是一样的。
下面来看一下详细的代码实现:
class _ImageViewWidget extends State<ImageViewWidget> {var imageUrl ="http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg";var imageUrl2 ="http://n.sinaimg.cn/sports/2_img/upload/4f160954/107/w1024h683/20181128/Yrxn-hpinrya6814381.jpg";@overrideWidget build(BuildContext context) {return new Align(child: ListView(children: <Widget>[new Text('资源图片:'),new Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[new Padding(padding: const EdgeInsets.all(10.0),child: Image.asset('images/logo.png',),),
// new Image.file(
// File('/storage/emulated/0/Download/test.jpg'),
// width: 120,
// //fill(全图显示且填充满,图片可能会拉伸),contain(全图显示但不充满,显示原比例),cover(显示可能拉伸,也可能裁剪,充满)
// //fitWidth(显示可能拉伸,可能裁剪,宽度充满),fitHeight显示可能拉伸,可能裁剪,高度充满),scaleDown(效果和contain差不多,但是)
// ),],),new Text('网络占位图片CachedNetworkImage:'),new Padding(padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Image.network(imageUrl,scale: 8.5,),new Padding(padding: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),child: CachedNetworkImage(width: 120,fit: BoxFit.fitWidth,placeholder: Image(image: AssetImage('images/logo.png')),imageUrl: imageUrl,errorWidget: new Icon(Icons.error),),),new CachedNetworkImage(imageUrl: imageUrl,width: 120,fit: BoxFit.fitWidth,placeholder: CircularProgressIndicator(),errorWidget: new Icon(Icons.error),)],),),new Text('网络占位图片FadeInImage:'),new Padding(padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: new Row(children: <Widget>[new FadeInImage.memoryNetwork(placeholder: kTransparentImage,image: imageUrl,width: 120,fit: BoxFit.fitWidth,),new Padding(padding: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),child: new FadeInImage.assetNetwork(placeholder: 'images/logo.png',image: imageUrl,width: 120,fit: BoxFit.fitWidth,),),],mainAxisAlignment: MainAxisAlignment.center,),),new Text('圆形圆角图片:'),new Padding(padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[new ClipOval(child: Image.network(imageUrl,width: 100,height: 100,fit: BoxFit.fitHeight,),),new Padding(padding: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),child: ClipOval(child: Image.asset('images/logo.png',width: 100,height: 100,fit: BoxFit.fitHeight,),),),new ClipRRect(child: Image.network(imageUrl,scale: 8.5,fit: BoxFit.cover,),borderRadius: BorderRadius.only(topLeft: Radius.circular(20),topRight: Radius.circular(20),),)],),),new Text('颜色混合图片:'),new Padding(padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[new Image.asset('images/logo.png',color: Colors.red,colorBlendMode: BlendMode.darken,),new Padding(padding: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),child: Image.network(imageUrl,scale: 8.5,colorBlendMode: BlendMode.colorDodge,color: Colors.blue,),),],),),new Text('centerSlice图片内部拉伸:'),new Padding(padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: new Image.asset('images/logo.png',width: 250,height: 250,fit: BoxFit.contain,centerSlice:new Rect.fromCircle(center: const Offset(20, 20), radius: 1),),),new Text('matchTextDirection图片内部方向'),new Padding(padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[new Directionality(textDirection: TextDirection.ltr,child: Image.network(imageUrl,height: 100,matchTextDirection: true,fit: BoxFit.fitHeight,),),new Padding(padding: const EdgeInsets.fromLTRB(10.0, 0.0, 10.0, 0.0),child: Directionality(textDirection: TextDirection.rtl,child: Image.network(imageUrl,height: 100,matchTextDirection: true,fit: BoxFit.fitHeight,),),),],),),new Text('点击替换图片'),new Padding(padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 10.0),child: Row(children: <Widget>[new RaisedButton(onPressed: () {setState(() {widget.networkImage =new NetworkImage(imageUrl2, scale: 8.5);});},child: Text('点击更换图片'),),new Image(gaplessPlayback: false,fit: BoxFit.contain,image: widget.networkImage,),],),)],),);}
}
代码已上传至Github
公众号
欢迎关注我的个人公众号【IT先森养成记】,专注大前端技术分享,包含Android,Java,Kotlin,Flutter,HTML,CSS,JS等技术;在这里你能得到的不止是技术上的提升,还有一些学习经验以及志同道合的朋友,赶快加入我们,一起学习,一起进化吧!!!
Flutter组件学习(二)—— Image相关推荐
- Flutter组件学习(13)层叠布局Stack、Positioned
介绍 层叠布局和Web中的绝对定位.Android中的Frame布局是相似的,子组件可以根据距父容器四个角的位置来确定自身的位置.绝对定位允许子组件堆叠起来(按照代码中声明的顺序) Stack ali ...
- Flutter组件学习(19)GridView
介绍 GridView和ListView的大多数参数都是相同的,它们的含义也都相同, 唯一需要关注的是gridDelegate参数,类型是SliverGridDelegate,它的作用是控制GridV ...
- Flutter组件学习(7)输入框TextField
目录 常用属性介绍 TextFild应用 TextEditingController 光标位置 常用属性介绍 decoration 设置输入框的外观 InputDecoration,decor ...
- Flutter组件学习之自定义画板绘制圆形——筑梦之路
import 'package:flutter/material.dart';/*** 自定义画板* 绘制圆形*/ void main() => runApp(new MyApp());clas ...
- 【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
文章目录 一.Flutter 组件简介 二.Flutter 自定义 StatelessWidget 组件流程 1.导入父类包 2.选择继承的父类 3.设置成员变量及构造函数 4.重写 build 方法 ...
- Python tkinter 学习笔记(2)-- 控件、组件(二)
Python tkinter 学习笔记(1)-- 第一个窗口之HelloWorld 教程 Python tkinter 学习笔记(2)-- 控件.组件(一) > 续上一章节 Python tki ...
- 第三课 k8s源码学习和二次开发-缓存机制Informers和Reflector组件学习
第三课 k8s源码学习和二次开发-缓存机制Informers和Reflector组件学习 tags: k8s 源码学习 categories: 源码学习 二次开发 文章目录 第三课 k8s源码学习和二 ...
- VUE学习(二十一)、Vuex(getters、mapState与mapGetters、mapMutations与mapActions、多组件共享数据、模块化编码)
VUE学习(二十一).Vuex(getters.mapState与mapGetters.mapMutations与mapActions.多组件共享数据.模块化编码) 一.Vuex普通实现求和案例 演示 ...
- 通过自定义组件学习Vue系列(二)【时间轴】(附源码)
需求: 用于升级日志的显示 效果图: 实现原理: 主要区域分为两块,时间区和内容区,时间区是画一个圆点和显示一个时间,内容区左边一个竖线和文字显示 然后做一下循环,将每个日期的数据显示出来 布局采用f ...
最新文章
- 黄聪:说说JSON和JSONP,也许你会豁然开朗(转)
- Nginx和Tengine
- UVA11889(给出lcm(A,B)=C中的AC求最小的B)
- Hadoop SequnceFile.Writer 压缩模式及压缩库浅析
- 【机器学习基础】5种数据同分布的检测方法!
- Python打牢基础,从12个语法开始!
- 在非主线程中创建窗口
- 计算机发展史的十大成就,2019中国十大科技成就:数个“第一”创造历史
- 计算机系统基础:计算机可靠性知识笔记
- 【转】ubuntu16.04安装配置tftp服务
- 对一道基础string题及其变式题的思考与解析
- Android平台Camera2数据如何对接RTMP推流到服务器
- 【Java】计算1+3+5+7+9和100以内的素数
- 12 大热门事件背后,藏着你的 2020 年
- 人生理解---2、看《程序员年龄增大后的职业出路是什么》有感
- 智能优化算法:果蝇优化算法-附代码
- 开源云真机平台-Sonic应用实践
- PeopleSoft概述及开发工具(application desinger)介绍
- lae界面开发工具入门之介绍十一--安卓系统如何编译打包?
- PAT(甲)1124 Raffle for Weibo Followers——未完成
热门文章
- 获取数组中连续相同的元素
- java面试的题积累【持续更新中......】
- SpringDataJpa报错: Table 'XX.hibernate_sequence' doesn't exist
- 音乐、视频播放模式切换实现方案及原理解析(基于vue、vuex、h5 audio)
- PCL:python pcl解码RGB- point_cloud2.read_points rgb
- PCL:PCL1.9.0更新
- ubuntu16.04安装KDE
- 使用Visio—UML画类图
- DP:***24种设计模式--转自刘伟
- PyDev的使用-高效Py编程