[Qt] 004 - QML語法介紹

QML Syntax

QML Object

下圖為一個簡單的QML文件，內容與前幾篇文章大同小異，該文件是由Qt Creator建立專案自動產生的，我加上了幾行程式碼來輔助接下來的說明。

QML文件中所看到的Rectangle、MouseArea、Text這些用大括號{ ... }所包起來的區塊，稱為QML Object (在Qt 4.x時代稱為QML element，參考此連結)，此篇文章開始我以Qt 5.x的統一用法，稱為QML Object。

每一個QML文件包括兩個部分，第一個部分是最上面的 import，表示該文件需要引用那些模組或命名空間(引用的對象可以是內建的模組，也可以是指定的客製化模組，或是指定資料夾的自創QML文件，甚至是JavaScript文件也可以，請參考此連結)。
第二個部份就是QML Object，每一個QML文件只會有一個 root QML object，意即文件的最外層只會有一個 QML Object，此連結所看到的有兩個 root QML Object是不被允許的，所有其他的QML Object都會被包覆在此root object中，這些被包覆的QML Object都是此root object的子物件。
一般來說，寫在同一層的物件，彼此就是兄弟(Sibling)物件，除非特別指定父(parent)物件；以上圖來說，最外層的Rectangle裡面有一個MouseArea跟一個Text，在這個MouseArea跟Text沒有特別指定父物件的情況下，其parent就是上一層的Rectangle。
而同一層物件若有多個，先被寫的會先被繪製(render)出來，物件會有類似圖層的概念，一個一個往上疊；你可以試著連續寫兩個Rectangle，兩個物件在同一層，大小位置都一樣但顏色不同，從結果可以發現，後寫的Rectangle會蓋在先寫的Rectangle上面。


Object Attributes

QML Object就和HTML或XML裡的Tag(標籤)一樣，具有多個attribute與對應的value，這些attribute區分為以下幾類(參考連結)

• id : 就是 id ( identifier )，以物件導向的程式語言來解釋，前面這些定義好的QML Object就是類別，而這些類別的實體就是物件，每個物件會有自己的名字(Object Name)，這個 id的角色就像是Object Name，是獨一無二的唯一識別碼，不過這個id值是可有可無的，如果我們沒有給一個id值，實際上會自動配給一個值，如果需要的話，通常我們會設定id值，方便我們在其他QML Object中需要存取該物件的內容(property或其他)。

• property : 屬性，每個QML Object都有特定的屬性，每個屬性都有對應的值，屬性都定義在QML Object的文件中，以Rectangle來說(線上文件)，width和height就是property，在線上文件中並看不到Rectangle有定義這兩個屬性，那是因為Rectangle繼承自Item這個QML Object(線上文件)，該屬性是來自其物件。除了物件本身定義的屬性之外，我們也可以自行定義屬性，上圖中第4行與第5行就是自定義的屬性，第5行是在Qt Creator編輯時打上property後可以自行產生的一行程式碼，type的地方要填上這個屬性的類型，像是bool、int之類的，name的地方填上該屬性的名稱，然後可以給該屬性assign一個初始值(value)。type的部分，可以參考此連結，看QML有定義哪些屬性值的類型。alias是一種特別的類型，以圖中的第4行為例，mouseArea是自定義的屬性名稱，該屬性的值為mouseArea，表示Rectangle在中，可以用mouseArea這個屬性來代表mouseArea這個id所對應的物件。這邊要特別注意的是，屬性名稱必須以小寫英文字母做為開頭，且名稱只能用英文字母、數字和底線。

• signal : 訊號，signal是用在物件中發生某些事件時通知使用的，一般會搭配該事件觸發時的後續動作(即下一個attribute : signal handler)，其實這就是一般的callback function，我們會透過事先註冊(register)某些事件，在該事件發生時觸發callback function的執行。在Qt裡面稱為signal and slot，我們會另開篇幅說明。以MouseArea這個QML Object來說明(線上文件)，具有一個signal稱為clicked，會在滑鼠被點擊時發出訊號讓對應的signal handler做後續處理。signal是可以帶參數的，有帶參數的signal在觸發時就會將參數傳給signal handler使用。

• signal handler : 通常是以method的型式存在，處理對應signal所觸發的行為，其名稱會跟以signal透過一定的規則來命名，以上面MouseArea提到的clicked這個signal來說，其signal handler的名稱會是onClicked，以此類推，<signalName>的signal Handler就會是on<SignalName>

• method : 方法，基本上就是一種函式(function)，在QML裡的function看起來就跟JavaScript function大同小異，寫法也差不多，除此之外，method也可以是C++的function，這部分牽涉到QML如何跟Qt C++做溝通，我們在之後的文章會介紹。

• attached properties and attached signal handler : 某一些特定的QML Object在執行時間，具有某些附加的屬性或signal handler讓物件存取，這樣的attribute從名稱也大概看得出來，參考此連結的說明，舉例來說，ListView.isCurrentItem是一種attached properties，用來判斷該Item是否為目前ListView列表中所在的Item；Component.onCompleted是一種attached signal handler，其method內容就是當QML Object實體產生或繪製完成時所需執行的function。這類型的attribute用法比較特別，注意到寫法不是使用Object Name(即前面提到的id)而是Object Type(即QML Object名稱，如ListView)。

QML語法大致介紹到這邊，各類型的attribute在之後文章或範例程式中也會陸續出現。