一、图片
图片类似UIImageView，在Flutter中两种方式加载图片，本地与网络。
1. 从asset即本地加载图片
-
在工程根目录下创建一个images目录，并将所需要的图片xxx.png拷贝到该目录。
-
在pubspec.yaml中的flutter部分添加如下内容（默认此文件下面会有注释，只需要将图片相关的注释打开即可）如下：
assets:
- images/xxx.png
- images/xxxx.png
注意这里有个坑: 由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处assets前面应有两个空格。否则图片不能正常的显示
2.从网络加载图片
- 使用构造函数 Image.network 从网络加载、显示图片
相关图片的类官方简介
Image
Image widget有一个必选的image参数，它对应一个ImageProvider。
ImageProvider
ImageProvider 是一个抽象类，主要定义了图片数据获取的接口load()，从不同>的数据源获取图片需要实现不同的ImageProvider ，如AssetImage是实现了从>Asset中加载图片的ImageProvider，而NetworkImage实现了从网络加载图片的ImageProvider。
Image(
image: AssetImage('images/1.jpeg'),
width: 300.0,
height: 200.0,
),
Image(
image: NetworkImage(
'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2153937626,1074119156&fm=27&gp=0.jpg'),
width: 200.0,
height: 200.0,
),
运行效果
参数
Image的主要常用参数如下，可自行尝试：
const Image({
...
this.width, //图片的宽
this.height, //图片高度
this.color, //图片的混合色值
this.colorBlendMode, //混合模式
this.fit,//缩放模式
this.alignment = Alignment.center, //对齐方式
this.repeat = ImageRepeat.noRepeat, //重复方式
...
})
这里引用一张官方的关于fit的参数的图，比较直观
fit不同显示样式.png
二、ICON
Flutter中，icon是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。在字体文件中，每一个字符都对应一个位码，而每一个位码对应一个显示字形，不同的字体就是指字形不同，即字符对应的字形是不同的。
简单的说，将这些图标当做文字一样去使用。
在Flutter开发中，iconfont和图片相比有如下优势：
- 体积小：可以减小安装包大小。
- 矢量的：iconfont都是矢量图标，放大不会影响其清晰度。
- 可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。
- 可以通过TextSpan和文本混用。
使用Material Design字体图标
在pubspec.yaml文件中,Flutter默认包含了一套Material Design的字体图标，配置如下,Material Design所有图标可以在其官网查看：https://material.io/tools/icons/
flutter:
uses-material-design: true
我们看一个简单的例子：
String icons = "";
icons += "\uE914";
icons += " \uE000";
icons += " \uE90D";
Text(icons,
style: TextStyle(
fontFamily: "MaterialIcons",
fontSize: 24.0,
color: Colors.green
),
);
运行效果，跟文字没啥两样
上面的如\uE000一样的不知符号并不友好，所以，Flutter封装了一个IconData和Icon来专门显示字体图标,（在开发的时候会有提示），更改代码如下：
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.accessible,color: Colors.green,),
Icon(Icons.error,color: Colors.green,),
Icon(Icons.fingerprint,color: Colors.green,),
],
)
使用自定义字体图标
如果默认的不能满足，我们也可以使用自定义字体图标。iconfont.cn上有很多字体图标素材，步骤也很简单，这里不再重复，可参考https://book.flutterchina.club/chapter3/img_and_icon.html
网友评论