1.在项目根目录(lib,build的平级)下建一个文件夹名字叫assets(名字你随便取),然后在assets下建立 video , images, localData 等等本地资源文件夹(具体看你需要,如果只有images就建一个图片文件夹就行)
2.通常在真实开发中,不同模块的图片肯定会分文件夹,比如home,mine,所以在images下再细分文件夹就行.建个home和mine文件夹
3.在真实开发中肯定会有2x图3x图,如何设置呢,答:在mine下再设置2.0x和3.0x文件夹,把2x图和3x图放在对应文件夹中,把1x图直接放在mine下就行,这几个x图片名称要取成一样的,不要加@2x@3x.这样系统加载的时候会根据设备自动区分加载对应的图片
4.注册这些资源在pubspec.yaml中,把assets注释打开(这块地方尤其要注意空格缩进,这个文件对空格缩进及其敏感),然后写上路径,还是以mine为例,assets/images/mine/ 这样写就可以了,不用再继续写2.0x和3.0x文件夹名字,更不用再详细写出图片名了,是不是很省事,写完路径名字后,flutter packages get安装一下,或者点击vscode右上方,一个小盒子加一个蓝色下箭头那个图标,哈哈
5.使用图片,Image.asset('assets/images/mine/navBack.png',width: 16,height: 16),这样用就ok了.不用把2.0x和3.0x文件夹名字也写上去,系统会默认找到对应的图,还有就是不要忘记写.png或.jpeg等等后缀
6.其实目前客户端真实开发中,很少用到1x图,但是,你如果不放1x图,直接在文件夹里放2x3x图,是不行的会报错,但是123x都放的话,图片文件好大啊,我目前是,只放2x和3x,那怎么放呢,下面说.
7.把2.0x文件夹删了,3.0x留着继续放3x图,在1x图的位置,直接用2x图就行了,用的时候记得要设置图片大小,否则让他自适应的话他会按1x去自适应.
8.每次在文件夹增加完删除完图片或者移动过图片路径的话,要记得flutter packages get(其实大部分的时候他会自动执行),如果加载图片还报路径找不到的错误,别犹豫,关了vscode重新打开 flutter run 就行了.
网友评论