Flutter圖片解析度適配

ljcoder發表於2019-07-19

為了達到最佳顯示,我們在開發過程中一般會在不同解析度的螢幕上顯示不同尺寸的圖片。

圖片資源存放

在專案中建立一個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檔案中宣告這個圖片資源。

-w548

清除註釋,注意assets前面有一個空格,要整體左移,不然會報Error on line 49, column 4 of pubspec.yaml: Expected a key while parsing a block mapping.的錯誤。

-w638

使用方法

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

Image.asset("assets/images/list.png");
複製程式碼

相關文章