天天看點

QML中Text、Image适配

QML中Text适配

Qt幫助文檔中對行高度的設定這樣寫:

QML中Text、Image适配

于是我們用這兩個屬性來改變行的間距

QML中Text、Image适配

這裡的行間距預設是parent.height/16.0,這樣顯示效果是沒有間距的。

如果我們改成parent.height/10.0的話,我們就改變了行間距的大小,顯示效果看到了行間距。

自動換行非常簡單,隻需設定Text.WordWrap就OK了

QML中Text、Image适配

設定屬性為換行的文字文本項的寬度。如果一個指定的寬度已設定則文本會收縮。

Text.NoWrap (default) - 沒有設定換行。如果文本中包含換行符不足,則contentWidth将超過設定寬度。

Text.WordWrap - 僅在字邊界收縮。如果一個單詞太長,contentWidth将超過一組寬度。

Text.WrapAnywhere - 在行上的任何一點都有可能換行,即使它發生在中間的一個文字。

Text.Wrap -  如果可能的話,在單詞邊界換行,否則在适當的點,即使是在中間的一個字。

字的大小,QML提供了兩個接口可用。他們的使用和QtWidget用法一樣

QML中Text、Image适配

除了自動換行,Text用的比較多的是縮寫

elide屬性。一般習慣用Text.ElideRight(在右邊縮進),縮進主要和Text的width有關

QML中Image适配

看Qt的幫助文檔檢視Image的基本資訊:

QML中Text、Image适配

如果想要Image中插入一個資源圖檔:

QML中Text、Image适配

如果想要插入一個非資源圖檔别忘了用“file:///+路徑”。

QML中Text、Image适配