說(shuō)明：本文檔翻譯自官方文檔腥沽，原文參照：Introduction to Qt Quick - Qt Wiki

今天的消費(fèi)者和企業(yè)用戶(hù)變得難以取悅。伴隨著他們成長(zhǎng)的是鸠蚪，使用流暢的游戲控制臺(tái)今阳，以及在電影中看到到更精致的界面师溅。規(guī)格和功能列表再也不是買(mǎi)點(diǎn)；它們只是實(shí)現(xiàn)目的的手段盾舌。視覺(jué)沖擊和超酷感官體驗(yàn)才是當(dāng)今緊要的東西墓臭，并且消費(fèi)者希望獲取視覺(jué)愉悅，不管他們是在使用強(qiáng)大的企業(yè)版筆記本電腦妖谴，一臺(tái)移動(dòng)設(shè)備窿锉，一個(gè)時(shí)尚的平板電腦，或是一臺(tái)機(jī)頂盒窖维。

要提供這種體驗(yàn)就需要設(shè)計(jì)師和開(kāi)發(fā)者進(jìn)行前所未有的攜手合作榆综。設(shè)計(jì)師把像素圖掛在墻上以期望開(kāi)發(fā)者去實(shí)現(xiàn)他們的愿景的時(shí)代已經(jīng)一去不復(fù)返了。同樣铸史，開(kāi)發(fā)者再也不能像以前那樣鼻疮，編碼時(shí)只考慮性能而不顧及視覺(jué)吸引力。設(shè)計(jì)師琳轿、開(kāi)發(fā)者判沟、設(shè)計(jì)人員必須形成迭代循環(huán)，而不是線(xiàn)性依次推進(jìn)工作崭篡。眾所周知挪哄，QT框架的高運(yùn)行性能和小空間占用，使它適用于手機(jī)琉闪、嵌入式和上網(wǎng)本應(yīng)用迹炼。Qt4.7版本新增QML，作為一種聲明式語(yǔ)言颠毙，它可以按照設(shè)計(jì)師思考方式編碼斯入，并且可以編寫(xiě)作為應(yīng)用構(gòu)建模塊的Qt Quick元素的聲明式語(yǔ)言。每個(gè)故事圖板的窗口都是元素樹(shù)上的分支蛀蜜，每個(gè)窗口的外觀特征都被聲明為分支上元素的一個(gè)屬性;窗口之間的跳轉(zhuǎn)可以使用各種動(dòng)畫(huà)和效果渲染刻两。

Qt Quick運(yùn)行時(shí)實(shí)現(xiàn)了UI并且提供對(duì)本地接口的直接訪問(wèn)，并在適當(dāng)?shù)那闆r下使用C++擴(kuò)展來(lái)提升性能滴某。因?yàn)檫\(yùn)行時(shí)在Qt中實(shí)現(xiàn)磅摹，所以它提供了豐富和靈活的交叉編譯。

Qt Creator霎奢，一個(gè)為了設(shè)計(jì)師和開(kāi)發(fā)者之間的協(xié)同而創(chuàng)建的開(kāi)發(fā)環(huán)境户誓，支持Qt Quick。設(shè)計(jì)師工作在可視環(huán)境幕侠，開(kāi)發(fā)者工作在全功能IDE帝美，并且Qt Creator支持從設(shè)計(jì)到編碼再到測(cè)試再返回到設(shè)計(jì)的往返迭代。

Qt是為當(dāng)今產(chǎn)品團(tuán)隊(duì)的工作方式創(chuàng)建的橙依。核心業(yè)務(wù)邏輯由開(kāi)發(fā)者編碼并優(yōu)化性能证舟，界面由使用可視化工具的設(shè)計(jì)師精心設(shè)計(jì)，而集成工具支持不同工作領(lǐng)域之間的往返迭代窗骑。

概覽

Qt的新界面技術(shù)由這幾部分構(gòu)成：QML語(yǔ)言女责、提供基本語(yǔ)言構(gòu)成的元素、為QML語(yǔ)言提供一個(gè)運(yùn)行時(shí)的QtDeclarative（C++）模塊创译、一個(gè)基于JavaScript的允許開(kāi)發(fā)者不必使用C++代碼就能在他們的工程中實(shí)現(xiàn)邏輯的腳本語(yǔ)言抵知。這個(gè)技術(shù)集由Qt Creator工具提供支持，工具中包括一個(gè)可視化設(shè)計(jì)器和其他支持創(chuàng)建软族、測(cè)試刷喜、調(diào)試、和優(yōu)化工程的其他擴(kuò)展立砸。

QML提供了通過(guò)使用元素以聲明方式構(gòu)建對(duì)象樹(shù)的機(jī)制掖疮。QML改進(jìn)了JavaScript和Qt即存的基于QObject的類(lèi)型系統(tǒng)兩者之間的集成，增加了對(duì)自動(dòng)動(dòng)屬性綁定的支持颗祝，并提供語(yǔ)言級(jí)別的網(wǎng)絡(luò)透明性浊闪。元素是由圖形和行為構(gòu)建要素組成的一個(gè)復(fù)雜工具集。現(xiàn)在QML語(yǔ)言中有超過(guò)80種元素螺戳，包括可視化元素比如Rectangle（矩形）搁宾、Gradient（漸變）和AnimatedImage（動(dòng)畫(huà)）；交互元素比如MouseArea和Flickable倔幼；狀態(tài)元素包括PropertyChanges and StateChangeScript;過(guò)度元素包括Transition和 SequentialAnimation盖腿。還有其他元素用來(lái)提交數(shù)據(jù)、查看损同、定位翩腐、以及其他不使用C++代碼來(lái)構(gòu)建流暢界面的復(fù)雜類(lèi)元素。

各種元素在QML文檔中組合在一起構(gòu)建各種各樣的組件揖庄，從簡(jiǎn)單的按鈕和滑塊栗菜，到完整的支持互聯(lián)網(wǎng)的應(yīng)用比如Flicker照片瀏覽器。

開(kāi)發(fā)者和設(shè)計(jì)師們都可以自由的創(chuàng)建他們自己的組件蹄梢，或者從預(yù)構(gòu)建的組件庫(kù)中選擇已有的組件疙筹。

Qt Quick建立在現(xiàn)有Qt的長(zhǎng)處之上。QML可以用來(lái)增量擴(kuò)展現(xiàn)有的應(yīng)用或者創(chuàng)建全新應(yīng)用禁炒。QML完全從C++擴(kuò)展而來(lái)而咆。

QML簡(jiǎn)介

QML是一種豐富的語(yǔ)言，一個(gè)全面的介紹超出了本文的范圍幕袱。本文會(huì)介紹QML可以做什么以及如何將QML與C++集成以便在這個(gè)兩方面達(dá)到最好效果：用C++實(shí)現(xiàn)的高性能業(yè)務(wù)邏輯和使用QML的高動(dòng)態(tài)用戶(hù)界面暴备。在線(xiàn)文檔中QML的完整介紹。

QML語(yǔ)言

QML是一種聲明式語(yǔ)言们豌，被設(shè)計(jì)用來(lái)繪制用戶(hù)界面：包括外觀和行為涯捻。在QML中浅妆，用戶(hù)界面被指定為帶有屬性的對(duì)象樹(shù)。JavaScript在QML中作為一種腳本語(yǔ)言來(lái)使用障癌。

代碼片段1展示了基本的QML語(yǔ)法凌外。第一行聲明引入QtQuick模塊的1.1版本，該版本實(shí)現(xiàn)了供應(yīng)用運(yùn)行的運(yùn)行時(shí)環(huán)境涛浙。為了防止后續(xù)高版本中引入的元素影響現(xiàn)有文檔中的元素康辑，一個(gè)文檔中可用的元素類(lèi)型由引入的模塊模塊控制。這種版本控制允許開(kāi)發(fā)者管理兼容性轿亮。

此代碼段創(chuàng)建了兩個(gè)對(duì)象：一個(gè)Rectangle對(duì)象和它的子Image對(duì)象疮薇。對(duì)象由類(lèi)型指定，緊隨其后的一對(duì)大括號(hào)我注，大括號(hào)之間可以定義對(duì)象的附加數(shù)據(jù)按咒，比如對(duì)象的屬性值和任意的子對(duì)象。

屬性通過(guò)【屬性:值】語(yǔ)法來(lái)指定但骨。注意Image對(duì)象有一個(gè)名為source的屬性胖齐，該屬性已經(jīng)被綁定值"pics/logo.png"。屬性和值通過(guò)冒號(hào)隔開(kāi)嗽冒。

QML中注釋類(lèi)似在C++中類(lèi)似：

1 單行注釋以//開(kāi)始呀伙，在行尾結(jié)束

2 多行注釋以/*開(kāi)始，以*/結(jié)束

import QtQuick 1.1

Rectangle {

????width: 200 // this is an inline comment

????height: 200

????color: "blue"

????/*

????And this is a

????Multi-line comment.

????*/

????Image {

? ????source: "pics/logo.png"

? ????anchors.centerIn: parent

????}

}

代碼片段1：基礎(chǔ)QML語(yǔ)法

在對(duì)象中添坊，使用【屬性：表達(dá)式】?語(yǔ)句給屬性綁定值剿另。這個(gè)語(yǔ)句有兩方面的說(shuō)明。

首先贬蛙，表達(dá)式是一個(gè)JavaScript表達(dá)式雨女，意味著你可以使用一個(gè)計(jì)算式、條件判斷阳准、或者其他復(fù)雜的JavaScript操作來(lái)設(shè)置屬性氛堕。

在大多數(shù)可以使用常量的地方都可以使用JavaScript表達(dá)式。比如野蝇，代碼片段2用JavaScript表達(dá)式的結(jié)果給一個(gè)矩形的寬度和高度賦值讼稚。當(dāng)然這個(gè)簡(jiǎn)單的表達(dá)式并不比在代碼1中的敞亮更有用，但是這個(gè)功能允許你使用父元素的某個(gè)部分的長(zhǎng)度給矩形的長(zhǎng)度綁定值绕沈。

其次锐想，綁定不同與賦值。在賦值中乍狐，屬性的值是在賦值語(yǔ)句執(zhí)行時(shí)設(shè)置赠摇，并且之后是固定不變的，除非語(yǔ)句被再次執(zhí)行。在綁定中藕帜，一個(gè)屬性是在被綁定語(yǔ)句第一次被執(zhí)行時(shí)設(shè)置烫罩，但是會(huì)發(fā)生變化在設(shè)置屬性的表達(dá)式結(jié)果發(fā)生變化時(shí)。（如果需要洽故，你可以在JavaScript代碼塊中使用【屬性=表達(dá)式】來(lái)給一個(gè)屬性賦值）

技術(shù)筆記：屬性綁定是通過(guò)一個(gè)通知信號(hào)來(lái)實(shí)現(xiàn)嗡髓，通知信號(hào)在繼承QObject的類(lèi)中使用Q_PROPERTY() 宏從一個(gè)Qt C++對(duì)象中聲明。如果你不知道它的意思收津，不要擔(dān)心。如果你計(jì)劃純粹使用QML構(gòu)建你的應(yīng)用浊伙，那么你不需要理解這一點(diǎn)撞秋，因?yàn)樗鼉H僅是Qt Quick提供給你的部分底層代碼。如果你計(jì)劃包含一些C++在你的應(yīng)用中嚣鄙，團(tuán)隊(duì)中的Qt C++開(kāi)發(fā)者會(huì)知道什么意思吻贿。

import QtQuick 1.1

Rectangle {

????width: 2 * 100

????height: 40 * 5

????color: "blue"

????Image {

????? source: "pics/logo.png"

? ????anchors.centerIn: parent

????}

}

代碼片段2：JavaScript表達(dá)式

完整的QML語(yǔ)言支持對(duì)象標(biāo)識(shí)符、類(lèi)型安全屬性哑子、信號(hào)處理程序舅列、以及大量我們不想讓你在此分心的其他細(xì)節(jié)。如果你準(zhǔn)備好了解這類(lèi)細(xì)節(jié)卧蜓，請(qǐng)查看QML語(yǔ)言介紹帐要。

QML元素

一旦你理解了QML語(yǔ)言的基本基礎(chǔ)，就是時(shí)候去深入了解該技術(shù)的主體：元素弥奸。元素是用來(lái)構(gòu)建QML程序基本構(gòu)建模塊的模板榨惠。QML支持諸如Rectangle和Text等可視元素，MouseArea和Flipable等交互元素盛霎，以及RotationAnimation和Transition等動(dòng)畫(huà)元素赠橙。此外還有其他復(fù)雜元素，允許開(kāi)發(fā)者處理數(shù)據(jù)愤炸，在模型-視圖體系結(jié)構(gòu)中實(shí)現(xiàn)頁(yè)面期揪，以及其他在這一點(diǎn)上只會(huì)增加混亂的默認(rèn)的組件類(lèi)型。

所有的元素都包含一個(gè)或多個(gè)可以由開(kāi)發(fā)者控制的屬性（比如color）规个，另外凤薛，許多屬性包含信號(hào)處理器（比如onClicked），可以用來(lái)對(duì)事件和狀態(tài)變化做出反應(yīng)诞仓。

可視元素：Hello World

我們已經(jīng)取得巨大進(jìn)步枉侧，除了在隨大溜展示Hello World示例這件事上。這段代碼在一個(gè)簡(jiǎn)單的背景矩形上放置一個(gè)Hello World!文本：

import QtQuick 1.1

Rectangle {

????width: 300

????height: 200

????Text {

? ????anchors.horizontalCenter: parent.horizontalCenter

? ????anchors.verticalCenter: parent.verticalCenter

? ????text: "Hello World"

????}

}

代碼片段3：Hello World

讓我們來(lái)研究下這段代碼狂芋。片段3中Hello World示例是個(gè)QML文檔榨馁，意味著這是個(gè)完整的代碼段，是可以運(yùn)行的帜矾。QML文檔通常對(duì)應(yīng)于存儲(chǔ)在硬盤(pán)或者網(wǎng)絡(luò)資源上的純文本文件翼虫，但也可以直接從文本數(shù)據(jù)構(gòu)建屑柔。

一個(gè)QML文檔總是是以一個(gè)或者多個(gè)import語(yǔ)句開(kāi)頭。這里你可以看到Qt Quick 1.1的引入珍剑。

接下來(lái)可以看到一個(gè)用來(lái)創(chuàng)建活動(dòng)對(duì)象的Rectangle元素模板掸宛。對(duì)象可以包含其他對(duì)象，從來(lái)創(chuàng)建父子關(guān)系招拙。在上述代碼中唧瘾，Rectangle對(duì)象是Text對(duì)象的父級(jí)。Rectangle元素也定義了一個(gè)頂級(jí)窗口來(lái)管理整個(gè)UI的視覺(jué)邊界和這個(gè)焦點(diǎn)分割别凤。

技術(shù)說(shuō)明:元素的children屬性包含一個(gè)所有元素所有可視化子對(duì)象的列表饰序；resource屬性包含一個(gè)所有非可視化對(duì)象的等效列表。這個(gè)兩個(gè)列表都是默認(rèn)隱式添加的规哪，或者如果方便也可以顯式添加它們求豫。第三個(gè)屬性，data诉稍，是一個(gè)列表蝠嘉，包含在children和resources列表中的對(duì)象。你可以顯式添加data屬性杯巨，在需要迭代遍歷可視或者非可視對(duì)象時(shí)會(huì)有用處蚤告。

所以可以這樣寫(xiě)：

Item {

? Text {}

? Rectangle {}

? Timer {}

}

替換掉：

Item {

? children: [ //default property and implicitly assigned

? ? Text {},

? ? Rectangle {}

? ]

? resources: [ //default property and implicitly assigned

? ? Timer {}

? ]

}

anchors.horizontalCenter: parent.horizontalCenter語(yǔ)句將文本的中心與父級(jí)矩形的中心對(duì)齊。錨點(diǎn)提供了一個(gè)途徑服爷，通過(guò)指定元素與它的父級(jí)或者同級(jí)元素的關(guān)系來(lái)定位元素罩缴。（注意-如果查看下Rectangle元素的在線(xiàn)文檔，會(huì)看不到anchors.horizontalCenter 元素层扶。仔細(xì)看就會(huì)發(fā)現(xiàn)Rectangle元素繼承了Qt Quick Item元素的所有屬性箫章；Item元素提供了anchors.horizontalCenter屬性。）

當(dāng)前有17個(gè)錨點(diǎn)元素可用镜会，可以用來(lái)對(duì)齊檬寂、居中、填充元素間隔并設(shè)置邊距和偏移戳表。比如桶至，代碼片段4展示了一個(gè)文本元素，定位到一個(gè)圖片元素的水平中心和垂直方向下方匾旭，還帶有一個(gè)邊距镣屹。

Image { id: pic; … }?

Text {

????id: label

????anchors.horizontalCenter: pic.horizontalCenter

????anchors.top: pic.bottom

????anchors.topMargin: 5

????…

}

代碼片段4：使用錨點(diǎn)對(duì)齊元素

分層可視元素

可視元素可以通過(guò)透明的方式疊加在一起，透明使用opacity?: real 語(yǔ)法价涝，real值取值范圍為0 (透明) to 1 (不透明).因?yàn)樾阅茉驊?yīng)謹(jǐn)慎使用女蜈，尤其是在動(dòng)畫(huà)中，因?yàn)槊窟\(yùn)行一幀動(dòng)畫(huà)，各個(gè)分層都要渲染伪窖。這可能適用于快速原型開(kāi)發(fā)逸寓，但是在最終部署前，最好預(yù)渲染盡可能多的場(chǎng)景覆山，然后在運(yùn)行時(shí)簡(jiǎn)單加載像素圖像即可竹伸。

代碼片段5制作了兩個(gè)偏移并且重疊的兩個(gè)矩形，一個(gè)紅色一個(gè)藍(lán)色簇宽，因?yàn)槭褂昧送该鞫戎丿B的正方形部分顯示紫色勋篓。注意子矩形（藍(lán)色）是如何從父級(jí)矩形（紅色）繼承50%不透明度設(shè)置的。

Rectangle {

????id: parentRectangle

????opacity: 0.5

????color: "red"

????width: 100; height: 100

????Rectangle {

? ???? id: childRectangle

? ???? color: "blue"

? ???? x: 50; y: 50; width: 100; height: 100

????}

}

代碼片段5：謹(jǐn)慎使用透明度

譯者注：效果參照如下圖片

技術(shù)說(shuō)明：繼承元素總是繼承它們的基元素屬性魏割。比如一個(gè)Rectangle也是一個(gè)Item譬嚣，所以Item的所有屬性都會(huì)存在于Rectangle元素中。因?yàn)镼GraphicsView的工作方式见妒，子對(duì)象有時(shí)會(huì)繼承父級(jí)的屬性。這意味著當(dāng)你在一個(gè)元素中嵌入其他元素時(shí)某些屬性會(huì)作用到它的子對(duì)象甸陌。比如代碼5中子矩形元素受到父級(jí)矩形元素50%不透明度的影響须揣。類(lèi)似的，如果父矩形被旋轉(zhuǎn)钱豁，那么子矩形保持和父矩形的角度關(guān)系不變耻卡，但是是相對(duì)于所在的場(chǎng)景做旋轉(zhuǎn)。

交互元素：鼠標(biāo)和觸摸

為了增加鼠標(biāo)或者觸摸交互需要添加一個(gè)MouseArea對(duì)象牲尺。MouseArea對(duì)象可以讓用戶(hù)點(diǎn)擊或者拖拽鼠標(biāo)（或者觸摸點(diǎn)）卵酪。其他可用的交互元素包括Flickable、Flipable谤碳、FocusScope溃卡。

注意MouseArea對(duì)象可以從任何可視對(duì)象分離，這為設(shè)計(jì)者提供了靈活性蜒简。比如瘸羡，創(chuàng)建一個(gè)用戶(hù)可以點(diǎn)擊的按鈕，然后使用一個(gè)更大區(qū)域的鼠標(biāo)點(diǎn)擊區(qū)域包圍這個(gè)按鈕搓茬，這樣就可以允許用戶(hù)點(diǎn)擊時(shí)偏離按鈕一些像素犹赖。

為了在Hello World示例中引入鼠標(biāo)區(qū)域，矩形中包含了一個(gè)文本卷仑，該文本是一個(gè)用來(lái)定義鼠標(biāo)區(qū)域的新矩形的子元素峻村。

import Qt 4.7

Rectangle {

? ? color: "#ff0000"

? ? width: 310

? ? height: 210

? ? MouseArea {

? ? ? anchors.fill: parent

? ? ? onClicked: {

? ? ? ? if(parent.color == "#ff0000") {

? ? ? ? ? parent.color = "#ff9900";

? ? ? ? } else {

? ? ? ? ? parent.color = "#ff0000";

? ? ? ? }

? ? ? }

? ? }

? ? Rectangle {

? ? ? width: 300

? ? ? height: 200

? ? ? anchors.horizontalCenter: parent.horizontalCenter

? ? ? anchors.verticalCenter: parent.verticalCenter

? ? ? Text {

? ? ? ? anchors.horizontalCenter: parent.horizontalCenter

? ? ? ? anchors.verticalCenter: parent.verticalCenter

? ? ? ? text: "Hello World"

? ? ? }

? ? }

? ? }

代碼片段6：鼠標(biāo)-觸摸交互