上篇文章中介绍了Flutter的项目创建、Text Widget组件的属性详解，包括了TextStyle等认识，并且给出了一个小知识点，如何设置状态栏一体化和右上角不显示DEBUG字样，有兴趣的同学可以先读一读上篇文章。
Image属性介绍
这篇文章我将介绍Flutter中图片组件 Image Widget的使用，首先来看下Image 有哪些属性，如下：
Flutter Image支持JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP格式图片。
- image：设置一张图片，该属性通过@required 进行注解。表示必须传。
image其实质是一个ImageProvider抽象类，该抽象类包含如下子类：
-
AssetImage: 访问images目录下的图片文件。
1、首先在项目中新建一个文件夹叫做images，向其添加一张图片timor.png。如下：
QQ截图20190105180745.png
然后打开pubspec.yaml文件，在flutter: 下面添加如下代码：
assets:
- images/timor.png
如下：
之后再dart代码中使用AssetImage进行图片的展示，代码如下：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, //右上角不显示DEBUG字样
title: "Study Image Widget",
theme: ThemeData(primaryColor: Colors.red),
home: Scaffold(
appBar: AppBar(
title: Text("Study Image Widget"),
),
body: Center(
child: Image(
image: AssetImage("images/timor.png"),
),
),
),
);
}
}
效果如图：
- NetworkImage
从名字可以看出。这是加载一张网络图片。修改代码如下：
child: Image(
image: NetworkImage("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg"),
),
效果如图：
- FileImage
image: FileImage(File("/sdcard/Flutter/timor.png")),
需要我们在我们的手机存储上有个Flutter目录，该目录下有一个timor.png图片。
由于在Android中读取文件是需要权限的，因此我们还需要对设备进行权限申请。
在pubspec.yaml，中添加如下:
permission: ^0.1.0
import 'package:permission/permission.dart';
requestPermissions() async {
final res = await Permission.requestPermissions([
PermissionName.Storage,
]);
res.forEach((permission) {
});
}
效果和上面类似！
- width、height
设置图像的宽高。
- color、colorBlendMode
设置图像的颜色，设置颜色模式。两者一般搭配使用：
child: Image(
//image: NetworkImage("https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3633976638,143512992&fm=200&gp=0.jpg"),
image: FileImage(File("/sdcard/Flutter/timor.png")),
width: 220.0,
height: 220.0,
color: Colors.red,
colorBlendMode:BlendMode.color ,
),
效果如下：
- fit 图像填充模式
一张图片如何在Image Widget中填充模式，如：
child: Container(
color: Colors.lightBlue,
width: 500.0,
height: 600.0,
child: Image(
image: NetworkImage(
"https://avatars3.githubusercontent.com/u/7410469?s=460&v=4",
),
fit: BoxFit.fitWidth,
),
),
这儿使用了一个Container Widget容器组件，后面会详解这个。暂时作为了解。我给容器设置了宽高和颜色。然后给里面的Image设置了fit模式为BoxFit.fitWidth，表示尽量填充满Container的宽度。效果如下：
- alignment如何使图像在其容器边界内对齐
如下，左下对齐。
child: Container(
color: Colors.lightBlue,
width: 500.0,
height: 600.0,
child: Image(
image: NetworkImage(
"https://avatars3.githubusercontent.com/u/7410469?s=460&v=4",
),
alignment: Alignment.bottomLeft,
),
),
- repeat 如何绘制在其容器内，其他未绘制区域图像的显示。
当我们想用图片，将蓝色区域用该图像显示完，则可以如下：
child: Container(
color: Colors.lightBlue,
width: 500.0,
height: 600.0,
child: Image(
image: NetworkImage(
"https://avatars3.githubusercontent.com/u/7410469?s=460&v=4",
),
repeat: ImageRepeat.repeat,
),
),
-
centerSlice 拉伸图像，类似.9.png
当我们需要图像在某个区域 或点进行拉伸时，使用如下：
child: Container(
color: Colors.lightBlue,
width: 500.0,
height: 600.0,
child: Image(
image: NetworkImage(
"https://avatars3.githubusercontent.com/u/7410469?s=460&v=4",
),
centerSlice: Rect.fromLTWH(10.0,10.0, 10.0, 10.0)),
),
-
matchTextDirection
是否和按照TextDirection方向绘制图像，默认false。需要配合FilterQuality使用。如下
body: ListView(
children: <Widget>[
Directionality(
textDirection: TextDirection.ltr,
child: Image(
image: NetworkImage(
"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1546847255&di=dda206d274515c51d712b66ca9b8b1d5&src=http://imgsrc.baidu.com/imgad/pic/item/0b55b319ebc4b7454d716709c5fc1e178b8215c3.jpg",
),
matchTextDirection: true,
),
),
Directionality(
textDirection: TextDirection.rtl,
child: Image(
image: NetworkImage(
"https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1546847255&di=dda206d274515c51d712b66ca9b8b1d5&src=http://imgsrc.baidu.com/imgad/pic/item/0b55b319ebc4b7454d716709c5fc1e178b8215c3.jpg",
),
matchTextDirection: true,
),
),
],
),
gaplessPlayback
当ImageProvider发生变化后，重新加载图片的过程中，原图片的展示是否保留。若值为true，保留，若为false，不保留，直接空白等待。默认falsefilterQuality
图像过滤质量，默认low
