Flutter图片分辨率适配

2019/7/18 posted in  Flutter

为了达到最佳显示,我们在开发过程中一般会在不同分辨率的屏幕上显示不同尺寸的图片。

图片资源存放

在项目中创建一个assets文件夹用来存放资源文件,资源文件夹里面可以放任意类型的文件,为了区分,我们再创建一个images的子文件夹用来存放图片。为了处理分辨率的问题,我们还需要在images文件夹下创建2.0x3.0x两个子文件夹,用来存放2倍和3倍的图。
图片资源管理

要把list.png放入Flutter工程里面,你要把1倍图放到images下面,其它倍数的放到对应的子文件夹下面。

assets/images/list.png       // 1倍图
assets/images/2.0x/list.png  // 2倍图
assets/images/3.0x/list.png  // 3倍图

声明图片资源

pubspec.yaml文件中声明这个图片资源。

清除注释,注意assets前面有一个空格,要整体左移,不然会报Error on line 49, column 4 of pubspec.yaml: Expected a key while parsing a block mapping.的错误。

使用方法

在你需要使用的地方调用即可。

Image.asset("assets/images/list.png");