Flutter 中，我们可以通过 Image 组件来加载并显示图片，Image 的数据源可以是 asset 、文件、内存以及网络。
Image 是一个用于展示图片的组件。支持 JPEG、PNG、GIF、Animated GIF、WebP、Animated WebP、BMP 和 WBMP 等格式。
| 方法 | 释义 |
|---|---|
| Image() | 从ImageProvider中获取图片，从本质上看，下面的几个方法都是他的具体实现。 |
| Image.asset(String name) | 从AssetBundler中获取图片 |
| Image.network(String src) | 显示网络图片 |
| Image.file(File file) | 从File中获取图片 |
| Image.memory(Uint8List bytes) | 从Uint8List中显示图片 |
1.alignment → AlignmentGeometry - 图像边界内对齐图像。
2.centerSlice → Rect - 九片图像的中心切片。
3.color → Color - 该颜色与每个图像像素混合 colorBlendMode。
4.colorBlendMode → BlendMode - 用于 color 与此图像结合使用。
5.fit → BoxFit - 图像在布局中分配的空间。
6.gaplessPlayback → bool - 当图像提供者发生变化时，是继续显示旧图像（true）还是暂时不显示（false）。
7.image → ImageProvider - 要显示的图像。
8.matchTextDirection → bool - 是否在图像的方向上绘制图像 TextDirection。
9.repeat → ImageRepeat - 未充分容器时，是否重复图片。
10.height → double - 图像的高度。
11.width → double - 图像的宽度。
ImageProvider 是一个抽象类，主要定义了图片数据获取的接口 load() ，从不同的数据源获取图片需要实现不同的 ImageProvider ，如 AssetImage 是实现了从 Asset 中加载图片的 ImageProvider，而 NetworkImage 实现了从网络加载图片的 ImageProvider。
ImageProvider 的实现类：
import 'package:flutter/material.dart';
void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("訾博的学习笔记")),body: const MyApp(),),));
}
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Container(alignment: Alignment.center,height: 200,width: 200,child: Center(child: Image(image: AssetImage('assets/images/zibo-logo.jpg')),),),);}
}
Row _localRow(){return Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Container(width: 30,height: 60,color: Colors.yellow,child: Image.asset('images/base_widgets/star_black.png', fit: BoxFit.none,),),Container(width: 30,height: 60,color: Colors.yellow,child: Image(image: AssetImage('images/base_widgets/star_black.png'),fit: BoxFit.fill,),),Container(width: 30,height: 60,color: Colors.yellow,child: Image(image: AssetImage('images/base_widgets/star_black.png'),fit: BoxFit.cover,),),Container(width: 30,height: 60,color: Colors.yellow,child: Image(image: AssetImage('images/base_widgets/star_black.png'),fit: BoxFit.contain,),),Container(width: 30,height: 60,color: Colors.yellow,child: Image(image: AssetImage('images/base_widgets/star_black.png'),fit: BoxFit.fitHeight,),),Container(width: 30,height: 60,color: Colors.yellow,child: Image(image: AssetImage('images/base_widgets/star_black.png'),fit: BoxFit.fitWidth,),),Container(width: 30,height: 60,color: Colors.yellow,child: Image(image: AssetImage('images/base_widgets/star_black.png'),fit: BoxFit.scaleDown,),),],);
https://himg.bdimg.com/sys/portraitn/item/public.1.a535a65d.tJe8MgWmP8zJ456B73Kzfg
import 'package:flutter/material.dart';
void main() {runApp(MaterialApp(home: Scaffold(appBar: AppBar(title: const Text("訾博的学习笔记")),body: const MyApp(),),));
}
class MyApp extends StatelessWidget {const MyApp({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Center(child: Container(alignment: Alignment.center,height: 200,width: 200,child: Center(child: Image(image: NetworkImage('https://himg.bdimg.com/sys/portraitn/item/public.1.a535a65d.tJe8MgWmP8zJ456B73Kzfg')),),),);}
}
ListView _listview(){return ListView(padding: const EdgeInsets.all(30),children: [Text("本地图片"),Container(height: 150,child: _localRow(),),Text("网络图片"),Image.network('http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg'),Text("带占位图的网络图片，成功加载"),FadeInImage.assetNetwork(placeholder: 'images/base_widgets/star_black.png',image: 'http://tiebapic.baidu.com/forum/w%3D580/sign=a96ca741eafaaf5184e381b7bc5594ed/7ea6a61ea8d3fd1f2643ad5d274e251f95ca5f38.jpg',fit: BoxFit.fill,),],);}
Flutter 框架对加载过的图片是有缓存的（内存），关于 Image 的详细内容及原理我们将会在后面进阶部分深入介绍。
Flutter 中，可以像Web开发一样使用 iconfont，iconfont 即“字体图标”，它是将图标做成字体文件，然后通过指定不同的字符而显示不同的图片。
在字体文件中，每一个字符都对应一个位码，而每一个位码对应一个显示字形，不同的字体就是指字形不同，即字符对应的字形是不同的。而在iconfont中，只是将位码对应的字形做成了图标，所以不同的字符最终就会渲染成不同的图标。
在Flutter开发中，iconfont和图片相比有如下优势：
1.体积小：可以减小安装包大小。
2.矢量的：iconfont都是矢量图标，放大不会影响其清晰度。
3.可以应用文本样式：可以像文本一样改变字体图标的颜色、大小对齐等。
4.可以通过TextSpan和文本混用。
Flutter 默认包含了一套 Material Design 的字体图标，在 pubspec.yaml 文件中的配置如下
flutter:uses-material-design: true
Material Design 所有图标可以在其官网查看：material.io/tools/icons…
我们看一个简单的例子：
String icons = "";
// accessible: 0xe03e
icons += "\uE03e";
// error:0xe237
icons += " \uE237";
// fingerprint: 0xe287
icons += " \uE287";
Text(icons,style: TextStyle(fontFamily: "MaterialIcons",fontSize: 24.0,color: Colors.green,),
);
运行效果如图3-15所示：
通过这个示例可以看到，使用图标就像使用文本一样，但是这种方式需要我们提供每个图标的码点，这并对开发者不友好，所以，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),],
)
Icons 类中包含了所有 Material Design 图标的 IconData 静态变量定义。
我们也可以使用自定义字体图标。iconfont.cn上有很多字体图标素材，我们可以选择自己需要的图标打包下载后，会生成一些不同格式的字体文件，在Flutter中，我们使用ttf格式即可。
假设我们项目中需要使用一个书籍图标和微信图标，我们打包下载后导入：
导入字体图标文件；这一步和导入字体文件相同，假设我们的字体图标文件保存在项目根目录下，路径为"fonts/iconfont.ttf"：
fonts:- family: myIcon#指定一个字体名fonts:- asset: fonts/iconfont.ttf
MyIcons类class MyIcons{// book 图标static const IconData book = const IconData(0xe614, fontFamily: 'myIcon', matchTextDirection: true);// 微信图标static const IconData wechat = const IconData(0xec7d,fontFamily: 'myIcon', matchTextDirection: true);
}
Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Icon(MyIcons.book,color: Colors.purple),Icon(MyIcons.wechat,color: Colors.green),],
)
整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享
部分文档展示：
文章篇幅有限，后面的内容就不一一展示了
有需要的小伙伴，可以点下方卡片免费领取