Flutter 基础篇（七）—— Image与Icon组件

• images/space.jpg

需要注意的是 yaml 的语法，空格以及缩进不能错，修改配置后热重载不会生效，需要重新启动项目。

步骤三：加载图片

Image(

image: AssetImage(“images/space.jpg”),

width: 100,

)

从网络中加载图片

---

Image(

image: NetworkImage(“https://avatars2.githubusercontent.com/u/20411648?s=460&v=4”),

width: 100,

)

通过 NetworkImage 组件就可以直接获取到互联网上的资源了，相比静态资源简单多了。

Image 的参数

---

Image 在现实图片时定义了一系列的参数，通过这些参数可以设置外观、大小等效果。常用的参数如下：

• width —— 宽度

• height —— 高度

width、height 用于设
置图片组件的宽度和高度，当不指定宽高时，图片会根据当前父容器的限制，尽可能的显示原始大小，如果只设置 宽或高的其中一个，那么另一个属性默认会按比例缩放，但可以通过 fit 属性来指定这个适应的规则。

• fit —— 图片的缩放模式

该属性用于在图片的显示空间和图片本身大小不同时指定图片的适应模式。适应模式在 BoxFit 中定义，它是一个枚举类型，可选值如下：

1. fill —— 拉伸填充满显示空间，图片本身长宽比会发生变化，图片会变形。

2. cover —— 按图片的长宽比放大后居中填满显示空间，图片不会变形，超出显示空间部分会被剪裁。

3. contain —— 这是图片的默认适应规则，图片会在保证图片本身长宽比不变的情况下缩放以适应当前显示空间，图片不会变形。

4. fitWidth —— 图片的宽度会缩放到显示空间的宽度，高度会按比例缩放，然后居中显示，图片不会变形，超出显示空间部分会被剪裁。

5. fitHeight —— 与上面的属性类似

6. none —— 没有适应策略

• repeat —— 重复显示图片

Icon

---

在 Flutter 中，可以使用 iconfont 字体图标。Flutter 默认包含了一套 Material Design 的字体图标，在 pubspec.yaml 配置文件中进行如下配置：

flutter:

uses-material-design: true

接着，就可以在应用中通过字体文本的方式引用字体图标，具体的字体图标库：https://material.io/tools/icons/

除此以外，还可以通过 Icons 组件引用 Icon 图片。

最后

小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

如果你需要这些资料， ⬅ 专栏获取
实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

如果你需要这些资料， ⬅ 专栏获取