Flutter本地图片实践 2022-10-29 周六

简介

在iOS中，本地图片可以放在Assets.xcassets中进行管理。这个做得非常好，可以简单理解为一个文件夹，放哪里都可以，非常方便。
但是，在Flutter中，本地图片的管理要麻烦很多。

集中式管理

• Flutter中本地图片需要集中在一个地方，统一管理。所以，在工程根目录下新建一个asset目录，统一存放资源。文件也跟图片一样，是一种资源。

• 由于屏幕适应，分为1x，2x，3x图，所以添加两个子文件夹，放2倍，3倍图。文件夹的名称固定为2.0x，3.0x

蓝湖下载设置

• 选择Android平台，选中mdpi（1x）, xhdpi（2x）, xxhdpi（3x）三种规格，下载图片

企业微信截图_a09062f8-6fa5-4f39-8181-a1a33d3126d4.png

• 下载完之后，图片名字改成一样的

企业微信截图_d84583d0-4729-4abf-a392-f91045c490d7.png

放置图片

将对应倍数的图片放入对应的文件夹中。由于名字一样，所以要注意放置的位置，不要出错。

企业微信截图_136a7568-8ec6-43b1-b346-a95ee12cd2a2.png

pubspec.yaml声明

• 可以手动添加，集中式的也可以，比如像这样

assets:
- assets/images/

• 也可以用插件flutter-img-sync（推荐）

企业微信截图_6412509f-960e-4421-9c59-08407b80a3e4.png

• 资源文件r.dart
  这个是插件flutter-img-sync自动生成的，不需要管，在lib根目录下
  将字符串转换为类的静态变量，用起来比较方便

企业微信截图_b3220807-3745-4bb6-b0e4-efb1aaf4d53f.png

// ignore_for_file: prefer_const_declarations

class R {
  /// ![](http://127.0.0.1:9527/assets/images/star_off.png)
  static final String assetsImagesStarOff = 'assets/images/star_off.png';
}

使用

按照安卓的习惯就可以了。图片资源不用划分模块，不用分级，全部放在一个级别，通过全局变量访问就好了。

Image.asset(R.assetsImagesStarOff),

企业微信截图_b40b7486-9152-4110-a1dc-a549992537b0.png

可选

插件：“Flutter GetX Generator - 猫哥”
可以有3x图生成1x和2x图，作用有点，但是感觉不是很大。所有图片都是可以从蓝湖下载的，不需要多此一举。
将字符串转化为全局变量的事情也做了，只不过是txt文件，不能直接用，有点遗憾。
不过无论怎么说，也算有特色，有兴趣的话可以尝试一下。