愛伊米

QT5開發:Item的概念

QT5開發:Item的概念

Item在QT Quick中是一個重要的概念,理解它有助於我們理解QT圖形顯示的基本組成與結構。

Item在QT Quick中所有可視項的一個基本型別。從這個意義上來說,所有的可視項全繼承與Item。一個Item物件可能沒有所謂的視覺外觀,但Item卻定義了可視項常用的所有屬性,例如x, y座標,寬和高,定位(anchoring)和一些支援的關鍵控制代碼。

Item可以在一個單獨的根可視項(Item)下來組織一些可視項,例如:

QT5開發:Item的概念

這裡一份單獨的Item1。qml檔案中組織了兩個可視的矩形框,屬性一目瞭然,一個在左上綠色,一個在右下紅色。定位的parent就是指Item自己,這就在一個640*800的範圍內需要顯示的內容。

然後,我們直接從main。qml中呼叫顯示它:

QT5開發:Item的概念

為了更直觀的說明Item的用處,我這裡在Window下又畫了兩個矩形,它們的parent明顯可以想到指的是Window本身,而呼叫的Item1也同屬於Window並且偏移到了100,200位置。

顯然,Window是我們主顯示視窗,而其下同樣也是由Item來組織的,只是我們省略了Item而已。顯示內容:

QT5開發:Item的概念

這樣我們就知道Item的作用,就是組織一組視覺化的項,可以統一在主視窗中調配。

接下來,透過opacity(不透明性)和layer佈局特點,進一步瞭解Item所代表的含義,當然Item的屬性很多,這只是以此為例來了解Item本身,我們此後在不同的應用學習中去學習Item的屬性。

對比下面的程式碼,分別在Item1。qml和Item2。qml中

QT5開發:Item的概念

QT5開發:Item的概念

第二個程式碼實際上和下面這個是一樣的效果

QT5開發:Item的概念

也就是說如果要實現分層的效果,可以將layer。enabled設為true或者將opacity改為1

主呼叫如下:

QT5開發:Item的概念

顯示效果:

QT5開發:Item的概念

然而還有一種分層方法,就是在主可視項中用子可視項實現,例如下面兩個樣例

QT5開發:Item的概念

QT5開發:Item的概念

這兩個不同於上兩個,是在Rectangle下的顯示項中顯示另一個Rectangle,而且子Rectangle在父Rectangle上,顯示效果:

QT5開發:Item的概念

還有辦法麼?還有,例如下面:

QT5開發:Item的概念

這是透過z座標來控制

從不同畫布分層佈局的介紹中,我們又基本可以掌握QT QUICK的QML基礎語法結構,類似於:

QT5開發:Item的概念

可以看到,相比較用C++而言,這種指令碼格式讓我們對介面的佈局和設計大程度上方便了很多,同樣大量節省了我們的開發週期。

以上參考資料主要來自於Qt幫助文件中對Item的介紹,進一步的測試和了解大家可以自行參照,這裡不再做詳細闡述。這也是本學習資料歸檔的特點,不會從基礎開始從頭講到尾,而是用到什麼講什麼,從應用中去學習和掌握。