Flutter 加載圖片方法淺談


      寫文章的目的是記錄一下學習Flutter過程,二是解惑一下網上流傳的Flutter 加載圖片其實好多是有坑的,即無法加載圖片。畫重點了:目前Flutter 加載2倍圖,3倍圖是沒有好的方案的。要想加載痛快的玩只能加載單倍圖。

     Flutter 中圖片資源是放到assets 中的(參考pubspec.yaml),它支持圖標、圖片、配置文件和其他文本文件等。圖片它包含JPEG,GIF,PNG,BMP等等,這些assets中的資源可以在程序運行時被加載。

     Flutter 會根據當前設備的分辨率加載不同的圖片,定義如下: 

      在pubspec.yaml 里聲明相關分辨率圖片后,AssetImage類自動根據當前分辨率在配合當前配置文件的映射聲明可以取對應的圖片。使用方式如圖:,這樣使用就可以自動識別1倍、2倍還是3倍圖了。

     問題:但是這樣用真的好嗎?為了自適應圖片要在pubspec.yaml 文件里關聯映射,在demo中這樣寫沒有問題,如果在真實的工程中這樣寫還行嗎?pubspec.yaml 配置文件會龐大無比的很,真正關注有效的信息資源被大部分的圖片映射資源淹沒。惱火不?

 

 

     針對這個問題開發鐵定是無比的痛很,但是有沒有其他辦法呢?有可以減小這樣無意義的配置,pubspec.yaml 配置修改如下: 把圖片資源的路徑映射改為目錄映射。此時再用 Image(image: AssetImage("images/cartone_select_no.png")) 這種方式是不是就萬事無憂了?錯,那就要分場景考慮考慮了。場景如下:

     一、假設沒有單倍圖的情況下。這種方式就不能自適應2倍圖和3倍圖了,原因是:在pubspec.yaml文件中沒有配置相關映射,根據"images/cartone_select_no.png" 這個相對路徑去優先去assets的查找單倍圖,如果沒有就會終止查找,哪怕在工程目錄中有2倍圖和3倍圖也不會顯示圖片(在不知道這是不是Flutter的bug, 因為原文是這樣描述的,意思就是在 pubspec.yaml 中資源部分的每一項都應與實際文件相對應,當少某個主圖時,會按分辨率從低到高的順序去選擇,也就是說1倍圖中沒有的話會在2倍圖中找,2倍圖中還沒有的話就在3倍圖中找。但是一定要用具體的映射嗎?)。

    二、假設沒有單倍圖的情況下。如果把路徑改為"images/2.0x/cartone_select_no.png",即Image(image: AssetImage("images/2.0x/cartone_select_no.png")) 這時可以展示圖片,但是這個2倍圖確安1倍圖展示的,整整大了一倍,這樣的展示也是奇丑無比。不知道這是不是Flutter的bug,在當前分辨率已知的情況下,又能在指定的路徑中找到圖片為什么不能正常展示呢?原因沒有分析出來,如果有哪位大神知道的話,幫忙告知一聲。真對這個問題我的解決辦法是:

 

 

這樣就可以正常展示了,但是這樣也就意味着你無法再自適應X倍圖了。

     三、有單倍圖的情況下,有2倍圖和3倍圖時Image(image: AssetImage("images/cartone_select_no.png"))  它根據屏幕就可以自適應了。前提是有單倍圖。問題來了,你一個工程中會放那么多X倍圖嗎?

 

     總結,Flutter 加載圖片不像外界傳說的那樣方便,其實有很多的不足之處的,如果在真實的開發中使用X倍圖,就要忽略它的不足,按文中描述的方式進行方可,否則苦海無邊。

 

     現附上我當前配置供大家參考:

 

 

 

 工程中的測試圖片

 

 

 

 

   


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM