QML Image獲取資源路徑的細節
QML是門相當新的UI描述語言,因此在文檔上總難免有疏漏之處,如果因此產生了bug,則就需要花費大量的時間去排查。
本文引用地址:http://cqxgywz.com/article/201610/305535.htm在最近筆者使用QML的過程中,在Image獲取資源路徑的細節上就出現了這樣的情況。
Image 是qml中一個非常普通的元素,通常使用方法如下:
1 | Image { |
2 | width:120; height:120 |
3 | fillMode: Image.TileHorizontally |
4 | smooth:true |
5 | source:qtlogo.png |
6 | } |
其中,source指的Image元素獲取資源的url路徑,這個url可以是本地的絕對路徑或者相對路徑,也可以是qt資源系統的路徑,甚至是網絡資源的路徑。
正是這個看起來不起眼的路徑,卻會帶來跟預期想之外的結果,并且,僅僅從代碼上來看,沒有半點錯誤的地方。
要了解這種情況的出現,應該要知道qml的兩種使用方式:
1.暴露QML源碼的使用方法,即不對QML文件進行處理,存放在可執行文件的目錄下,使用QtDeclarative模塊動態載入,一般適合以開源程序;
2.混淆QML源碼的使用方法,即將QML文件加入到qt資源系統,編譯成二進制文件供QtDeclarative模塊使用,這樣的好處,是可以隱藏代碼,供商業項目使用。
在前種的使用方式中,Image元素對于讀取資源路徑正確無誤,在Mac.OS.X,Ubuntu和windows平臺上表示一致,但是后者,卻出現了不同。
假設Image以如下代碼使用:
QML是門相當新的UI描述語言,因此在文檔上總難免有疏漏之處,如果因此產生了bug,則就需要花費大量的時間去排查。
在最近筆者使用QML的過程中,在Image獲取資源路徑的細節上就出現了這樣的情況。
Image 是qml中一個非常普通的元素,通常使用方法如下:
1 | property url imageUrl: |
2 | Image { |
3 | width:120; height:120 |
4 | fillMode: Image.TileHorizontally |
5 | smooth:true |
6 | source: imageUrl ==:xx/me/My Data/picture.jpg?resource/qtlogo.png |
7 | } |
QML代碼段所在的QML文件和qtlogo都處在qt資源系統中,xx/me/My Data/picture.jpg則值的是三個系統下實際的絕對路徑,這是很異常的情況發生了。
在windows下Image的表現很正常,但是在Ubuntu下,卻無法正常顯示系統路徑中的圖片picure.jpg,一個代碼顯示出不同的結果來是相當費解的事,但是事實確很簡單,這個source提供Url的寫法是錯誤的,一個錯誤的代碼自然會出現異常情況。
當QML處在qt 資源系統中,它獲取圖片的路徑自然也是去qt資源系統中獲得了,也就是說上述的兩個路徑變成了qrc:xx/me/My Data/picture.jpg和qrc:resource/qtlogo.png,前者根本不在資源系統內,自然就不會顯示了。
當然,對這樣的情況自然有正確的解決辦法,那就是對前者路徑的使用應該使用file:///xx/me/My Data/picture.jpg,這樣QML才會正常解析為本地文件的路徑。
至此,對于Image 資源路徑可以總結出三個規律:
1.在沒用使用qt資源系統時,Image的路徑可以是絕對或者相對,并不需要特殊的表示;
2.當使用qt資源系統時,如果要特定知指向本地路徑中的圖片資源,那就要使用file://標示;
3.當獲取網絡圖片資源并使用使用qt資源系統,由于有http表示存在,QML會自然去除qrc:標示。
其中第三點文中并沒有說明,但是有興趣的同學可以去試試。












評論