P08. Flutter Image图片组件的使用
目录
我们都希望自己写的程序赏心悦目,俗话说的好一图顶千言,所以图片的运用在程序制作里至关重要。本文我们就来看一下 flutter 图片组件的使用。
加入图片的几种方式
Image.asset
:加载资源图片,就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积,用的是相对路径。Image.network
:网络资源图片,意思就是你需要加入一段 http://xxxx.xxx 的这样的网络路径地址。Image.file
:加载本地图片,就是加载本地文件中的图片,这个是一个绝对路径,跟包体无关。Image.memory
: 加载 Uint8List 资源图片,这个我目前用的不是很多,所以没什么发言权。
我们现在就以加入网络图片为例子,在 Container 里加入一张图片,代码如下:
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Text widget', home: Scaffold( body: Center( child: Container( child: new Image.network( 'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png', scale: 1.0, ), width: 300.0, height: 200.0, color: Colors.lightBlue, ), ), ), ); } }
这时候就可以看到图片被加入进来了,当然我们还顺便设置了容器的宽和高。
fit 属性的设置
fit
属性可以控制图片的拉伸和挤压,这些都是根据图片的父级容器来的。
BoxFit.fill
:全图显示,图片会被拉伸,并充满父容器。
示例:
child: Image.network( 'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png', scale: 1.0, fit: BoxFit.fill, ),
BoxFit.contain
:全图显示,显示原比例,可能会有空隙。
示例:
child: Image.network( 'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png', scale: 1.0, fit: BoxFit.contain, ),
BoxFit.cover
:显示可能拉伸,可能裁切,充满(图片要充满整个容器,还不变形)。
示例:
child: Image.network( 'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png', scale: 1.0, fit: BoxFit.cover, ),
BoxFit.fitWidth
:宽度充满(横向充满),显示可能拉伸,可能裁切。
示例:
child: Image.network( 'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png', scale: 1.0, fit: BoxFit.fitWidth, ),
BoxFit.fitHeight
:高度充满(竖向充满),显示可能拉伸,可能裁切。
示例:
child: Image.network( 'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png', scale: 1.0, fit: BoxFit.fitHeight, ),
BoxFit.scaleDown
:效果和 contain 差不多,但是此属性不允许显示超过源图片大小,可小不可大。
图片的混合模式
图片混合模式(colorBlendMode)和color
属性配合使用,能让图片改变颜色,里边的模式非常的多,产生的效果也是非常丰富的。在这里作几个简单的例子,让大家看一下效果,剩下的留给小伙伴自己探索。
child: Image.network( 'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png', color: Colors.greenAccent, colorBlendMode: BlendMode.darken, ),
color
:是要混合的颜色,如果你只设置 color 是没有意义的。colorBlendMode
:是混合模式,相当于我们如何混合。
repeat 图片重复
ImageRepeat.repeat
: 横向和纵向都进行重复,直到铺满整个画布。ImageRepeat.repeatX
: 横向重复,纵向不重复。ImageRepeat.repeatY
:纵向重复,横向不重复。
来个全部重复的代码。
child:new Image.network( 'https://media.mybj123.com/wp-content/uploads/2020/04/1587112868-96d6f2e7e1f705a.png', repeat: ImageRepeat.repeat, ),
图片的使用在程序中个人觉的是非常有意思的,也能制作出很多酷炫的效果,这方面的相关属性希望大家下去多多练习。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P08. Flutter Image图片组件的使用
码云笔记 » P08. Flutter Image图片组件的使用