Flutter加载本地2x,3x图片

1,731 阅读1分钟

重要的事情先说:

  • pubspec.yaml文件里面的路径不要加2.0x,3.0x
  • 没有1x图片的时候,不要创建2.0x目录,直接2.0x的图片放在最外层就行

Flutter加载本地2.0x,3.0x图片

1.在和ios、android同级目录中,创建一个images文件夹

image.png

2.在pubspec.yaml文件中声明图片资源文件夹的路径(注意前面的空格,很重要)

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true
  assets:
    - images/

3.将2.0x图片直接丢到images文件下,将3.0x图片丢到images/3.0x文件夹下

如果你还需要兼容1x图片,那么就创建2.0x文件夹,把2.0x图片丢到2.0x文件夹下,把1.0x图片放到images目录下

image.png

4.使用

Image.asset(
  'images/vehicle_battery_icon.png',
  width: 24,
  height: 12,
),

这样就可以根据不同的机型分辨率,适配不同尺寸的图片了。

重要的事情再说一遍:

  • pubspec.yaml里面不需要写2.0x,3.0x目录
  • 没有1x图片的时候,不要创建2.0x目录,直接2.0x的图片放在最外层就行

当然我的项目中,我对images目录没有按照业务再细分了,而是把所有的本地资源图片一股脑丢进去的。如果你要分级的话,比如目录是这样 images/home images/mine,那么就按照上面的方法,把3.0x的文件夹放到对应的业务文件夹下。

pubspec.yaml也跟着改动一下即可,类似这样

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true
  assets:
    - images/home/
    - images/mine/