Flutter组件学习（二）—— Image
序言
上一节中，咱们讲了 Flutter 中 Text 组件的一些用法以及 API，本节咱们继续学习 Flutter 中的 Image 组件，一样先上图：html
Image组件的构造方法
在 Android 中，咱们都知道，图片的显示方式有不少，资源图片、网络图片、文件图片等等，在 Flutter 中也有多种方式，用来加载不一样形式的图片：前端
- Image：经过ImageProvider来加载图片
- Image.asset：用来加载本地资源图片
- Image.file：用来加载本地（File文件）图片
- Image.network：用来加载网络图片
- Image.memory：用来加载Uint8List资源（byte数组）图片
一、Image
Image 的一个参数是 ImageProvider，基本上全部形式的图片加载都是依赖它，这个类里面就是实现图片加载的原理。用法以下：git
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'))
二、Image.asset
加载一个本地资源图片，和 Android 同样，有多种分辨率的图片可供选择，可是沿袭的是 iOS 的图片风格，分为 1x，2x，3x，具体作法是在项目的根目录下建立两个文件夹，以下图所示：github
而后须要在 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: true
assets:
- images/logo.png
- images/2.0x/logo.png
- images/3.0x/logo.png
用法以下：缓存
new Image.asset('images/logo.png')
三、Image.file
加载一个本地 File 图片，好比相册中的图片，用法以下网络
new Image.file(new File('/storage/xxx/xxx/test.jpg'))
四、Image.network
加载一个网络图片，用法以下：app
new Image.network('http://n.sinaimg.cn/sports/2_img/upload/cf0d0fdd/107/w1024h683/20181128/pKtl-hphsupx4744393.jpg')
有的时候咱们须要像Android那样使用一个占位图或者图片加载出错时显示某张特定的图片，这时候须要用到 FadeInImage 这个组件：less
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 组件：ide
new CachedNetworkImage( width: 120, fit: BoxFit.fitWidth, placeholder: new CircularProgressIndicator(), imageUrl: imageUrl, errorWidget: new Icon(Icons.error), )
CachedNetworkImage 组件中的占位图是一个 Widget，这样的话就能够自定义了，你想使用什么样的组件进行占位都行，一样加载出错的占位图也是一个组件，也能够本身定义；该组件也是经过缓存来加载图片的。
五、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 | 当图片发生改变以后，从新加载图片过程当中的样式（一、原图片保留） |
fit 属性中有不少值能够设置：
| 属性名称 | 样式 |
|---|---|
| BoxFit.contain | 全图居中显示但不充满，显示原比例 |
| BoxFit.cover | 图片可能拉伸，也可能裁剪，可是充满容器 |
| BoxFit.fill | 全图显示且填充满，图片可能会拉伸 |
| BoxFit.fitHeight | 图片可能拉伸，可能裁剪，高度充满 |
| BoxFit.fitWidth | 图片可能拉伸，可能裁剪，宽度充满 |
| BoxFit.scaleDown | 效果和contain差很少， 可是只能缩小图片，不能放大图片 |
colorBlendMode 属性中有不少值能够设置，因为可选值太多，这里就不一一介绍了，有兴趣的能够去官网colorBlendMode属性介绍看看
实现圆角/圆形图片
一、圆角
不少时候咱们须要给图片设置圆角，那么在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 组件来实现，这个你们能够本身去尝试。
二、圆形
圆形图片用得最多的应该是头像之类的，这种一样有多种方式能够实现，下面我也举两个例子：
使用裁剪实现圆形图片：
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";
@override
Widget 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等技术；在这里你能获得的不止是技术上的提高，还有一些学习经验以及志同道合的朋友，赶快加入咱们，一块儿学习，一块儿进化吧！！！
相关文章
- 1. Flutter组件学习（二）—— Image
- 2. flutter学习--Image组件
- 3. Flutter组件—— Image
- 4. flutter学习一之抽离自定义组件,Text,Image组件
- 5. Flutter学习(四)之Flutter基础组件
- 6. Flutter组件学习（一）—— Text组件
- 7. 【Flutter 学习笔记】Flutter组件库
- 8. flutter学习日记（二）————flutter的布局和页面组件
- 9. Flutter学习（二）
- 10. flutter中Image图片组件的使用
- 更多相关文章...
- • ASP.NET Image 控件 - ASP.NET 教程
- • 您已经学习了 XML Schema，下一步学习什么呢？ - XML Schema 教程
- • Kotlin学习（二）基本类型
- • Tomcat学习笔记（史上最全tomcat学习笔记）
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Window下Ribbit MQ安装
- 2. Linux下Redis安装及集群搭建
- 3. shiny搭建网站填坑战略
- 4. Mysql8.0.22安装与配置详细教程
- 5. Hadoop安装及配置
- 6. Python爬虫初学笔记
- 7. 部署LVS-Keepalived高可用集群
- 8. keepalived+mysql高可用集群
- 9. jenkins 公钥配置
- 10. HA实用详解
欢迎关注本站公众号,获取更多信息
