Image
Image组件用于显示图片，而图片的来源大概可分为以下：
- 项目的资源图片
- 系统的图片
- 加载网络图片
加载项目的资源图片
- 在工程根目录下创建一个
images目录，并将图片p3.png拷贝到该目录。
- 在
pubspec.yaml中的flutter部分添加如下内容：
第一种方式：加载单个文件
assets:
- images/p3.png
第二种方式：加载整个文件夹
assets:
- assets/app.db
- assets/images/
- assets/fonts/
- 加载该图片
Image.asset("images/p3.png",
width: 100.0,
)
加载系统的图片
指定系统路径下的图片
Image.file(new File(’/storage/xxx/xxx/test.jpg’))；
加载网络图片
指定图片链接
图片宽度（可选）
Image.network(
"https://www.wanandroid.com/blogimgs/9fc6e10c-b3e8-46bb-928b-05ccd2147335.png",
width: 100.0,
)
FadeInImage 使用
FadeInImage 控件提供了图片占位的功能，并且支持在图片加载完成时淡入淡出的视觉效果。
FadeInImage.assetNetwork(
placeholder: 'https://pcdn.flutterchina.club/imgs/3-19.png', // 可放 gif 占位
image: 'https://pcdn.flutterchina.club/imgs/3-19.png',
fit: BoxFit.cover, //图片拉伸模式
width: 200, height: 200,
)
Image 填充模式
参考：3.5 图片及ICON
在Android开发时图片还有裁剪的模式，Flutter 的 Image这里也提供了
-
填充模式 fit：
fill会拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形cover会按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。contain图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。fitWidth图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。fitHeight图片的高度会缩放到显示空间的高度，宽度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。none图片没有适应策略，会在显示空间内显示图片，如果图片比显示空间大，则显示空间只会显示图片中间部分。
-
重复模式 repeat 等属性：当图片本身大小小于显示空间时，指定图片的重复规则
repeatYrepeatX
拉伸模式及重复模式：
第三方库推荐
-
CachedNetworkImage
支持占位符和错误显示，并用sqflite管理图片缓存。 -
extended_image
支持加载以及失败显示，缓存网络图片，缩放拖拽图片，图片浏览(微信掘金效果)，滑动退出页面(微信掘金效果)，编辑图片(裁剪旋转翻转)，保存，绘制自定义效果等功能
Icon
在 Flutter 可以像Web开发一样使用iconfont即“字体图标”，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。如：退出登录的图标可以使用\0xe879字符表示
Icon 的优势
- 体积小：可以减小安装包大小。
- 矢量的：
iconfont都是矢量图标，放大不会影响其清晰度。 - 可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。
- 可以通过
TextSpan和文本混用。
Icon 使用例子
Flutter默认包含了一套Material Design的字体图标，在pubspec.yaml文件中的配置如下：
flutter:
uses-material-design: true
使用
String icons = "";
// accessible:  or 0xE914 or E914
icons += "\uE914";
// error:  or 0xE000 or E000
icons += " \uE000";
// fingerprint:  or 0xE90D or E90D
icons += " \uE90D";
// 应用文本样式
Text(icons,
style: TextStyle(
fontFamily: "MaterialIcons",
fontSize: 24.0,
color: Colors.green
),
);
// 使用 Icons 调用的方式
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.accessible,color: Colors.green,),
Icon(Icons.error,color: Colors.green,),
Icon(Icons.fingerprint,color: Colors.green,),
],
)
TextSpan和文本混用
第三方库推荐
具体使用可查看源码或者 Flutter-WanAndroid
groovin_material_icons: ^1.1.5
定义
List _loginMethod = [
{
"title": "微信",
"icon": GroovinMaterialIcons.wechat,
},
{
"title": "QQ",
"icon": GroovinMaterialIcons.qqchat,
}
];
使用：
IconButton(
icon: Icon(item['icon'],
color: Theme.of(context).iconTheme.color),
完~
