QML語法基礎(chǔ)

翻譯參照原文: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

Rectangle {

????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)變成了一行注釋。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末般渡,一起剝皮案震驚了整個(gè)濱河市懒豹,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌驯用,老刑警劉巖脸秽,帶你破解...
    沈念sama閱讀 211,194評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異蝴乔,居然都是意外死亡记餐,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評論 2 385
  • 文/潘曉璐 我一進(jìn)店門薇正,熙熙樓的掌柜王于貴愁眉苦臉地迎上來片酝,“玉大人,你說我怎么就攤上這事挖腰〉裱兀” “怎么了?”我有些...
    開封第一講書人閱讀 156,780評論 0 346
  • 文/不壞的土叔 我叫張陵猴仑,是天一觀的道長审轮。 經(jīng)常有香客問我,道長辽俗,這世上最難降的妖魔是什么疾渣? 我笑而不...
    開封第一講書人閱讀 56,388評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮崖飘,結(jié)果婚禮上稳衬,老公的妹妹穿的比我還像新娘。我一直安慰自己坐漏,他們只是感情好薄疚,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著赊琳,像睡著了一般街夭。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上躏筏,一...
    開封第一講書人閱讀 49,764評論 1 290
  • 那天板丽,我揣著相機(jī)與錄音,去河邊找鬼。 笑死埃碱,一個(gè)胖子當(dāng)著我的面吹牛猖辫,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播砚殿,決...
    沈念sama閱讀 38,907評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼啃憎,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了似炎?” 一聲冷哼從身側(cè)響起辛萍,我...
    開封第一講書人閱讀 37,679評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎羡藐,沒想到半個(gè)月后贩毕,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,122評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡仆嗦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評論 2 325
  • 正文 我和宋清朗相戀三年辉阶,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瘩扼。...
    茶點(diǎn)故事閱讀 38,605評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡睛藻,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出邢隧,到底是詐尸還是另有隱情店印,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評論 4 329
  • 正文 年R本政府宣布倒慧,位于F島的核電站按摘,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏纫谅。R本人自食惡果不足惜炫贤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望付秕。 院中可真熱鬧兰珍,春花似錦、人聲如沸询吴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽猛计。三九已至唠摹,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間奉瘤,已是汗流浹背勾拉。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人藕赞。 一個(gè)月前我還...
    沈念sama閱讀 46,297評論 2 360
  • 正文 我出身青樓成肘,卻偏偏與公主長得像,于是被迫代替她去往敵國和親斧蜕。 傳聞我的和親對象是個(gè)殘疾皇子双霍,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評論 2 348

推薦閱讀更多精彩內(nèi)容