ug环球:【Flutter实战】图片组件及四大案例

admin/2020-06-17/ 分类:科技/阅读:

老孟导读:大家好,这是【Flutter实战】系列文章的第三篇,这一篇解说图片组件,Image有许多高级用法,希望对您有所辅助。

图片组件是Flutter基础组件之一,和文本组件一样必不可少。图片组件包罗Image和Icon两个组件,本质上Icon不属于图片组件,但其形状效果上类似于图片。

在项目中建议优先使用Icon组件,Icon本质上是一种字体,只不外显示的不是文字,而是图标,而Image组件先通过图片解码器将图片解码,以是Icon有如下优点:

  • 通常情况下,图标比图片体积更小,显著的削减App包体积。
  • 图标不会泛起失真或者模糊的征象,例如将20x20的图片,渲染在200x200的屏幕上,图片会失真或模糊,而图标是矢量图,不会失真,就像字体一样。
  • 多个图标可以存放在一个文件中,利便治理。
  • 全平台通用。

Image

Image组件用于显示图片,图片的泉源可以是网络、项目中图片或者装备上的图片。

加载网络图片:

Image.network( 'http://pic1.win4000.com/pic/c/cf/cdc983699c.jpg', ) 

加载项目中图片:

首先将图片拷贝到项目中,通常情况下,拷贝到assets/images/目录下,assets/images/目录为手动建立,新建的项目默认是没有此目录的。

设置pubspec.yaml设置文件:

assets: - assets/images/ 

或者指定详细图片的名称:

assets: - assets/images/aa.jpg 

通常情况下,使用第一种方式,由于图片会有许多张,增添一张就这里设置一个太贫苦。

注重:assets前面的空格问题,极容易引发编译异常,准确花样如下:

加载图片:

Image.asset('assets/images/aa.jpg') 

加载装备上的图片:

要加载装备(手机)上的图片首先需要获取装备图片的路径,由于差别平台的路径差别,因此路径的获取必须依赖原生支持,若是领会原生(Android和iOS)开发,可以直接使用MethodChannel获取路径,若是不懂原生(Android和iOS)开发,可以使用第三方插件获取路径,这里推荐官方的path_provider

加载装备上的图片:

Image.file(File('path')) 

设置图片的巨细:

Image.asset('assets/images/aa.jpg',width: 100,height: 200,), 

当Image的巨细和图片巨细不匹配时,需要设置填充模式fit,设置组件巨细为150x150,

Container( color: Colors.red.withOpacity(.3), child: Image.asset('assets/images/aa.jpg',width: 150,height: 150), ) 

看到,图片左右双方有空缺区域(浅红色填充的区域),若是想要图片充满整个区域,设置如下:

Container( color: Colors.red.withOpacity(.3), child: Image.asset('assets/images/aa.jpg',width: 150,height: 150,fit: BoxFit.fill,), ) 

虽然图片充满整个区域,但图片变形了,使图片等比拉伸,直到双方都充满区域:

Container( color: Colors.red.withOpacity(.3), child: Image.asset('assets/images/aa.jpg',width: 150,height: 150,fit: BoxFit.cover,), ) 

此时,图片未变形且双方都充满区域,不外图片被淘汰了一部分。

fit参数就是设置填充方式,其值先容如下:

  • fill:完全填充,宽高比可能会变。
  • contain:等比拉伸,直到一边填充满。
  • cover:等比拉伸,直到2边都填充满,此时一边可能超出范围。
  • fitWidth:等比拉伸,宽填充满。
  • fitHeight:等比拉伸,高填充满。
  • none:当组件比图片小时,不拉伸,超出范围截取。
  • scaleDown:当组件比图片小时,图片等比缩小,效果和contain一样。

BoxFit.none的淘汰和alignment相关,默认居中,

Image.asset( 'assets/images/aa.jpg', width: 150, height: 150, fit: BoxFit.none, alignment: Alignment.centerRight, ), 

左边为原图。

设置对齐方式:

Container( color: Colors.red.withOpacity(.3), child: Image.asset( 'assets/images/aa.jpg', width: 150, height: 150, alignment: Alignment.centerLeft, ), ), 

colorcolorBlendMode用于将颜色和图片举行颜色夹杂,colorBlendMode示意夹杂模式,下面先容的夹杂模式比较多,浏览一遍即可,此属性可以用于简朴的滤镜效果。

  • clear:清晰源图像和目的图像。
  • color:获取源图像的色相和饱和度以及目的图像的光度。
  • colorBurn:将目的的倒数除以源,然后将效果倒数。
  • colorDodge:将目的除以源的倒数。
  • darken:通过从每个颜色通道中选择最小值来合成源图像和目的图像。
  • difference:从每个通道的较大值中减去较小的值。合成玄色没有效果。合成白色会使另一张图像的颜色反转。
  • dst:仅绘制目的图像。
  • dstATop:将目的图像合成到源图像上,但仅在与源图像重叠的位置合成。
  • dstIn:显示目的图像,但仅显示两个图像重叠的位置。不渲染源图像,仅将其视为蒙版。源的颜色通道将被忽略,只有不透明度才起作用。
  • dstOut:显示目的图像,但仅显示两个图像不重叠的位置。不渲染源图像,仅将其视为蒙版。源的颜色通道将被忽略,只有不透明度才起作用。
  • dstOver:将源图像合成到目的图像下。
  • exclusion:从两个图像的总和中减去两个图像的乘积的两倍。
  • hardLight:调整源图像和目的图像的身分以使其适合源图像之后,将它们相乘。
  • hue:获取源图像的色相,以及目的图像的饱和度和光度。
  • lighten:通过从每个颜色通道中选择最大值来合成源图像和目的图像。
  • luminosity:获取源图像的亮度,以及目的图像的色相和饱和度。
  • modulate:将源图像和目的图像的颜色分量相乘。
  • multiply:将源图像和目的图像的分量相乘,包罗alpha通道。
  • overlay:调整源图像和目的图像的分量以使其适合目的后,将它们相乘。
  • plus:对源图像和目的图像的组成部分求和。
  • saturation:获取源图像的饱和度以及目的图像的色相和亮度。
  • screen:将源图像和目的图像的分量的逆值相乘,然后对效果求逆。
  • softLight:对于低于0.5的源值使用colorDodge,对于高于0.5的源值使用colorBurn。
  • src:放置目的图像,仅绘制源图像。
  • srcATop:将源图像合成到目的图像上,但仅在与目的图像重叠的位置合成。
  • srcIn:显示源图像,但仅显示两个图像重叠的位置。目的图像未渲染,仅被视为蒙版。目的的颜色通道将被忽略,只有不透明度才起作用。
  • srcOut:显示源图像,但仅显示两个图像不重叠的位置。
  • srcOver:将源图像合成到目的图像上。
  • xor:将按位异或运算符应用于源图像和目的图像。

是不是感受看了和没看差不多,看了也看不懂。正常,估量只有学过视觉算法的才气看懂吧,直接看下各个属性的效果吧:

repeat示意当组件有空余位置时,将会重复显示图片

Image.asset( 'assets/images/aa.jpg', width: double.infinity, height: 150, repeat: ImageRepeat.repeatX, ) 

重复的模式有:

  • repeat:x,y偏向都充满。
  • repeatX:x偏向充满。
  • repeatY:y偏向充满。
  • noRepeat:不重复。

matchTextDirection设置为true时,图片的绘制偏向为TextDirection设置的偏向,其父组件必须为Directionality

Directionality( textDirection: TextDirection.rtl, child: Image.asset( 'assets/images/logo.png', height: 150, matchTextDirection: true, )), 

左边为原图,效果是左右镜像。

filterQuality示意绘制图像的质量,从高到低为:high->medium->low->none。越高效果越好,越平滑,固然性能消耗越大,默认是low,若是发现图片有锯齿,可以设置此参数。

当加载图片的时刻回调frameBuilder,当此参数为null时,此控件将会在图片加载完成后显示,未加载完成时显示空缺,尤其在加载网络图片时会更显著。因此此参数可以用于处置图片加载时显示占位图片和加载图片的过渡效果,好比淡入淡出效果。

下面的案例是淡入淡出效果:

Image.network( 'https://flutter.github.io/assets-for-api-docs/assets/widgets/puffin.jpg', frameBuilder: (BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded) { if (wasSynchronouslyLoaded) { return child; } return AnimatedOpacity( child: child, opacity: frame == null ? 0 : 1, duration: const Duration(seconds: 2), curve: Curves.easeOut, ); }, ) 

loadingBuilder参数比frameBuilder控制的力度更细,可以获取图片加载的进度,下面的案例显示了加载进度条:

Image.network( 'https://flutter.github.io/assets-for-api-docs/assets/widgets/puffin.jpg', loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) { if (loadingProgress == null) { return child; } return Center( child: CircularProgressIndicator( value: loadingProgress.expectedTotalBytes != null ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes : null, ), ); }) 

centerSlice用于.9图,.9图用于拉伸图片的特定区域,centerSlice设置的区域(Rect)就是拉伸的区域。.9图通常用于控件巨细、宽高比不牢固的场景,好比谈天靠山图片等。

Container( width: 250, height: 300, decoration: BoxDecoration( image: DecorationImage( centerSlice: Rect.fromLTWH(20, 20, 10, 10), image: AssetImage( 'assets/images/abc.jpg', ), fit: BoxFit.fill))), 

上面为原图,下面为拉伸的图片。

在使用时大概率会泛起如下异常:

这是由于图片比组件的尺寸大,若是使用centerSlice属性,图片必须比组件的尺寸小,一样平常情况下,.9图的尺寸都异常小。

Icon

Icon是图标组件,Icon不具有交互属性,若是想要交互,可以使用IconButton。

Icon(Icons.add), 

设置图标的巨细和颜色:

Icon( Icons.add, size: 40, color: Colors.red, ) 

上面的玄色为默认巨细和颜色。

Icons.add是系统提供的图标,建立Flutter项目的时刻,pubspec.yaml中默认有如下设置:

所有的图标在Icons中已经界说,可以直接在源代码中查看,也可以到官网查看所有图标。

所有图标效果如下:

案例

谈天靠山(.9图实现)

Container( width: 200, padding: EdgeInsets.only(left: 8,top: 8,right: 20,bottom: 8), decoration: BoxDecoration( image: DecorationImage( centerSlice: Rect.fromLTWH(20, 20, 1, 1), image: AssetImage( 'assets/images/chat.png', ), fit: BoxFit.fill)), child: Text('老孟,专注分享Flutter手艺和应用实战。' '老孟,专注分享Flutter手艺和应用实战。' '老孟,专注分享Flutter手艺和应用实战。',), ) 

靠山图片巨细是57x80:

右侧三角已经不在中心了,若是想让其一直保持居中,修改拉伸区域:

centerSlice: Rect.fromLTWH(20, 10, 1, 60), 

圆形带边框的头像

Container( width: 100, height: 100, padding: EdgeInsets.all(3), decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue), child: Container( decoration: BoxDecoration( shape: BoxShape.circle, image: DecorationImage( image: AssetImage('assets/images/aa.jpg'), fit: BoxFit.cover)), ), ) 

图片占位符:

Image.network( 'https://flutter.github.io/assets-for-api-docs/assets/widgets/puffin.jpg', height: 150, width: 150, fit: BoxFit.cover, frameBuilder: ( BuildContext context, Widget child, int frame, bool wasSynchronouslyLoaded, ) { if (frame == null) { return Image.asset( 'assets/images/place.png', height: 150, width: 150, fit: BoxFit.cover, ); } return child; }, ) 

添加自己的图标库

若是系统提供的图标没有我们想要的图标,这时需要引入第三方库的图标,下面以阿里巴巴的图标库为例。

打开阿里巴巴的图标官网,找到自己想要的图标后,将鼠标放置到图标上,加入购物车:

点击右上角的购物车,然后点击添加至项目:

若是没有添加过项目,需要建立一个新项目:

建立好后加入此项目,跳转到我的项目页面,点击下载:

解压下载的文件,解压出来的文件有好几个,如下图:

选择iconfont.ttf文件拷贝到 Flutter 项目的assets/fonts目录下,assets/fonts目录默认是没有的,需要手动建立,在pubspec.yaml设置如下:

万万注重红框内开头的空格问题,否则编译不通过,family后面跟的字符串最好有意义,后面用图标的时刻需要用到。

用法如下:

Icon(IconData(0xe613,fontFamily: 'appIconFonts') 

0xe613在下载图标时已经标注,将&#替换为0,如下图:

fontFamily是在pubspec.yaml中设置的family属性,第三方的图标和系统图标一样,可以设置其颜色和巨细。

交流

老孟Flutter博客地址(330个控件用法):http://laomengit.com

迎接加入Flutter交流群(微信:laomengit)、关注民众号【老孟Flutter】:

,

Allbet代理

欢迎进入Allbet代理(Allbet Game):www.aLLbetgame.us,欧博官网是欧博集团的官方网站。欧博官网开放Allbet注册、Allbe代理、Allbet电脑客户端、Allbet手机版下载等业务。

TAG:
阅读:
广告 330*360
广告 330*360
Sunbet_进入申博sunbet官网
微信二维码扫一扫
关注微信公众号
新闻自媒体 Copyright © 2002-2019 Sunbet 版权所有
二维码
意见反馈 二维码