翻譯參照原文:QML Syntax Basics
QML是一種多范式語言姻僧,可以根據(jù)對象的屬性以及它們?nèi)绾侮P(guān)聯(lián)和響應(yīng)在其他對象中的變化來定義對象沦疾。在純粹的命令式代碼中赦肋,屬性和動作的變化通過一系列逐步處理的語句來表達(dá)纯赎,與之不同的是谦疾,QML的聲明式語法將屬性和行為的變化直接整合入單個(gè)對象中。在需要復(fù)雜復(fù)雜的定制應(yīng)用行為的情況下犬金,這些屬性定義可以包括命令式代碼念恍。
QML源碼通常由引擎通過QML文檔加載六剥,QML文檔是QML代碼的獨(dú)立文檔。這些可以用來定義在應(yīng)用中復(fù)用的QML對象類型峰伙。注意類型名稱必須以大寫字母開始疗疟,才能在QML文件中聲明為QML對象類型。
導(dǎo)入語句
一個(gè)QML文檔可以在文件頭部有一個(gè)或者多個(gè)導(dǎo)入瞳氓。一個(gè)導(dǎo)入可以是以下任一一種:
? ? * 已注冊類型的版本化命名空間
? ? * 包含類型定義的QML文檔的相對路徑????
? ? * 一個(gè)JavaScript文件
JavaScript文件導(dǎo)入在導(dǎo)入后必須是可用的策彤,這樣才能訪問它們提供的屬性和方法。
各種導(dǎo)入的通用形式如下:
import Namespace VersionMajor.VersionMinor
import Namespace VersionMajor.VersionMinor as SingletonTypeIdentifier
import "directory"
import "file.js" as ScriptIdentifier
示例:
import?QtQuick?2.0
import?QtQuick.LocalStorage 2.0 as Database
import "../privateComponents"
import "somefile.js" as Script
對象聲明
語法上匣摘,QML代碼塊定義了要創(chuàng)建的對象樹店诗。對象使用對象聲明來定義,對象聲明描述了要創(chuàng)建的對象的類型以及該對象的屬性音榜。每個(gè)對象都可以使用嵌套對象聲明來聲明子對象庞瘸。
對象聲明包括其對象類型的名稱,后跟一組大括號赠叼。所有的屬性和子對象都在大括號中聲明擦囊。
這是一個(gè)簡單的對象聲明:
Rectangle {
????width: 100
????height: 100
????color: "red"
}
這個(gè)示例定義了一個(gè)Rectangle類型的對象,后面跟著一對大括號嘴办,括號里封裝了定義給對象的屬性瞬场。Rectangle類型是由QtQuick提供的類型,此處定義的屬性是矩形的width涧郊、height和color屬性的值泌类。(這些屬性由Rectangle類型提供,在Rectangle文檔中有所描述)
以上對象若是一個(gè)QML文檔中一部分就可以由引擎加載底燎。也就是說刃榨,如果源代碼中包含了導(dǎo)入QtQuick模塊的import語句(使Rectangle類型可用),如下所示:
import QtQuick 2.0
Rectangle {
????width: 100
????height: 100
????color: "red"
}
當(dāng)被放置到.qml文件中双仍,并被QML引擎加載枢希,以上代碼便會使用QtQuick模塊提供的Rectangle類型創(chuàng)建一個(gè)Rectangle對象:
注意:如果一個(gè)對象定義只是有少數(shù)屬性,可以像這樣寫在單行里朱沃,使用分號分隔屬性:
Rectangle { width: 100; height: 100; color: "red" }
很明顯苞轿,示例中聲明的Rectangle對象實(shí)際上很簡單,只定義了幾個(gè)屬性逗物。為了創(chuàng)建更有用的對象搬卒,對象聲明可以定義很多其他類型:這些會在QML對象屬性文檔中論述。另外翎卓,對象聲明可以定義子對象契邀,接下來會有論述。
子對象
任何對象聲明都可以通過嵌套對象聲明來定義子對象失暴。這樣坯门,任何對象聲明都隱式聲明了一個(gè)可以包含任意數(shù)量子對象的對象樹微饥。
比如下例中,Rectangle對象聲明下包含Gradient對象聲明古戴,Gradient對象聲明中又包含兩個(gè)GrandientStop聲明:
import QtQuick 2.0
????width: 100
????height: 100
????gradient: Gradient {?
?? ? ? GradientStop { position: 0.0; color: "yellow" }? ? ? ? ?
????? ?GradientStop { position: 1.0; color: "green" }
? ? ?}
}
當(dāng)這段代碼被引擎加載時(shí)欠橘,會創(chuàng)建一個(gè)根節(jié)點(diǎn)是Rectangle對象的對象樹;Rectangle對象有一個(gè)Gradient的子對象现恼,該子對象中又有兩個(gè)GradientStop子對象肃续。
注意,然而叉袍,這個(gè)是在QML對象樹上下文中的父-子關(guān)系痹升,不是在視圖上下文中的父-子關(guān)系。在視圖中的父-子關(guān)系概念是QtQuick模塊中的Item類型提供的畦韭,Item類型是大多數(shù)QML類型的基本類型疼蛾,因?yàn)榇蠖鄶?shù)QML對象都要進(jìn)行視覺渲染。比如艺配,Rectangle和Text都是基于Item的類型察郁,而下例中,一個(gè)Text對象被聲明為一個(gè)Rectangle對象的可視子對象转唉。
import QtQuick 2.0
Rectangle {?
?width: 200?
?height: 200?
?color: "red"?
? Text {?
?????anchors.centerIn: parent?
?????text: "Hello, QML!"?
? ?}
}
在上述代碼中皮钠,當(dāng)Text對象引用其父值時(shí),它引用的是自己的視圖父對象赠法,不是對象樹中的父對象麦轰。在這種情況下,它們是同一個(gè):Rectangle對象在QML對象樹中和視圖中都是Text對象的父對象砖织。然而款侵,雖然可以更改父屬性來改變視圖父級,但無法從QML中改變對象樹上下文中的父級侧纯。
(另外新锈,注意Text對象在聲明時(shí)沒有被賦值給Rectangle的一個(gè)屬性,不像之前的例子眶熬,把Gradient對象賦值給了矩形的gradient屬性妹笆。這是因?yàn)镮temd的children屬性已經(jīng)被設(shè)置為這個(gè)類型的默認(rèn)屬性,以便來使用這種更方便的語法娜氏。)
注釋
QML中的注釋語法類似JavaScript:
? ? * 單行注釋以//開始拳缠,在行尾結(jié)束
? ? * 多行注釋以/*開始,以*/結(jié)束
Text {
? ? ? ?text: "Hello world!"? ????//a basic greeting? ? ? ?/*
? ? ? ? ????We want this text to stand out from the rest so
? ? ? ????? we give it a large size and different font.
? ? ???? */
? ? ? ? font.family: "Helvetica"?
? ? ? ? font.pointSize: 24
}
在處理QML代碼時(shí)贸弥,引擎會忽略代碼窟坐。注釋非常有助于解釋代碼片段是在做什么,無論是以后做參考還是向其他人做解釋。
注釋也可以用來阻止代碼執(zhí)行狸涌,有時(shí)候?qū)ψ粉檰栴}非常有用。
Text {
?????text: "Hello world!"
?????// opacity: 0.5
}
在上述示例中最岗,Text對象會有默認(rèn)的透明度帕胆,因?yàn)閛pacity: 0.5這行已經(jīng)變成了一行注釋。