Flutter 中 Image 的 5 种加载方式详解

这是我参与更文挑战的第20天，活动详情查看：更文挑战

前言

图片是每个 App 中不可缺少的元素之一，今天我们就一起来聊聊在 Flutter 中这 5 种加载图片的方式以及一些加载图片的实用技巧。

1、Image.asset（资源包内加载）

配置图片资源位置

一般我们是把图片放在 assets 目录下，然后新建 2.0x和 3.0x 的文件夹，然后根据设备不同 Flutter 会帮我们处理加载不同分分辨率的图片。

但是这样时间下来，图片既占空间，更新替换也麻烦

所以我现在的做法是只放一套 3x 的图片即可，然后做好大体分类（上图左侧红框），接下来就是在加载图片前我们需要在 pubspec.yaml 文件中配置资源图片的位置（上图右侧红框）

这里只放 3 倍图时，一定要指定图片的宽高这里只放 3 倍图时，一定要指定图片的宽高这里只放 3 倍图时，一定要指定图片的宽高

显示图片

在使用的时候我们直接填写图片的全路径，这样图片就显示出来了

Image.asset(
  'assets/imgs/img_01.jpeg',
)

持续优化

关注我的朋友都知道我的《Flutter Widgets》专栏，不只聊如何简单的使用，还有很多实用的技巧融汇在其中，让你看了就可以在企业级实战项目中使用。

从上面可以看到，如果你的图片很多，但是每次写全路径就很麻烦了，那么这个我们怎么优化呢？我提供下面两种思路：

使用顶层方法或工具方法

/// 获取图片全路径
String getImg(String name) {
  return 'assets/images/$name';
}

/// 获取 icon 全路径
String getIcon(String name) {
  return 'assets/icons/$name';
}
///【 使用】
// 加载图片，以屏幕宽度限定，所以没指定宽高
Image.asset(
  // 直接写名字
  getImg('img_01.jpeg'),
),
// 加载 icon
Image.asset(
  // 直接些名字
  getIcon('icon_home.png'),
  // 指定图片宽高
  width: 24,
  height: 24,
)

使用扩展方法（进阶）

// 扩展 String 类型
extension ImageLoad on String {
  /// 获取图片全路径
  String get img => 'assets/images/$this';

  /// 获取 icon 全路径
  String get icon => 'assets/icons/$this';
}
///【 使用】
// 直接 . 即可
Image.asset(
  'img_01.jpeg'.img,
),
Image.asset(
  'icon_home.png'.icon,
  // 指定图片宽高
  width: 24,
  height: 24,
)

上面的技巧你 Get 到了吗？

2、Image.network（网络加载）

一般 App 除了固定图片外，比如用户头像、帖子图片、运营图片这些类型的图片都是通过接口下发的图片地址，然后 App 通过链接地址即可加载出图片，使用也比较简单。

Image.network(
  'https://images.pexels.com/photos/850359/pexels-photo-850359.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=375',
)

3、Image.file（文件加载）

比如我们让用户选取的本地图片后，先要加载出这张本地图片让用户预览，然后再进行剪裁或上传操作，这时就需要加载本地的文件图片了，还有就是已缓存到本地的图片也是如此。

Image.file(File('file://test.png'))

因为我这里写的不存在的文件地址，所以加载不出来

4、Image.memory（内存中加载）

有时我们图片已经加载过了，并且我们已经拿到数据信息，就没必要再加载一次了，直接加载现有的数据即可。或者是我们生成的一张图片，这时也直接加载即可。

// 内存中加载
Image.memory(memoryData)

// 定义图片数据
late Uint8List memoryData;

// 加载图片到内存中
loadAssetImage('img_02.jpeg'.img);
// 加载资源图片
Future<void> loadAssetImage(String path) async {
  var data = await rootBundle.load(path);
  memoryData = data.buffer.asUint8List();
  setState(() {});
}

5、依赖包中加载

所有的资源不一定都放在主项目资源包里，对于依赖包也有图片资源，我们也可以加载依赖包的图片资源
比如我得依赖包名称是 flutter_icons ,我加载图片的时候就需要指定 package

Image.asset('flutter_logo.png'.icon, package: 'flutter_icons')

源码仓库

基于 Flutter 🔥 最新版本

Flutter Widgets 仓库

参考链接

关注专栏

此文章已收录到下面👇 的专栏，可以直接关注
更多文章继续阅读｜系列文章持续更新

👏 欢迎点赞➕收藏➕关注，有任何问题随时在下面👇评论，我会第一时间回复哦

Flutter 中 Image 的 5 种加载方式详解 | Flutter Widgets

前言