用Qt編寫GUI的另一種方法是使用QtQuick模塊。使用QtQuick的GUI是用QML編寫的。QML是一種聲明性的對象描述語言，它集成了Javascript進行程序化編程。QtQuick為使用QML開發GUI提供了必要的模塊。可以只用QML編寫整個應用程序，但通常只有GUI是用QML編寫的，應用程序的后臺是用C++實現的（參見整合QML和C++）。

點擊下載Qt最新試用版

一個針對Qt Quick的觸摸設備游戲，該游戲使用SpriteSequence，ParticleSystem，Emitter和Wander類型對對象進行動畫處理，并使用SoundEffect類型來播放聲音效果。

《麻煩的馬龍》展示了QML功能，這些功能在開發游戲時非常有用：

• 使用自定義QML類型為游戲的不同階段創建不同的屏幕。
• 使用項目和圖像類型構造游戲背景。
• 使用SequentialAnimation，NumberAnimation，ParticleSystem，Emitter和Wander類型為背景對象設置動畫。
• 在開始游戲之前，使用“計時器”和“中繼器”類型顯示倒計時序列。
• 使用具有自定義屬性的自定義QML類型來構造游戲板。
• 使用SpriteSequence和Sprite類型將動畫對象添加到游戲板上。
• 使用自定義QML類型，該類型將Image類型與一些自定義屬性一起使用，以添加一個菜單，供玩家購買物品。
• 使用具有私有功能的自定義屬性來跟蹤游戲統計信息，并使用自定義QML類型將其顯示給玩家。
• 使用State類型和JavaScript函數來管理游戲狀態。
• 根據對象類型和應用于對象的操作，使用SoundEffect類型播放單獨的聲音效果。
• 使用信號處理程序為某些游戲操作指定鍵盤快捷鍵。
• 使用資源文件打包游戲資源以進行部署和交付。

運行示例

要從Qt Creator運行示例，請打開“歡迎”模式，然后從“示例”中選擇示例。有關更多信息，請訪問構建和運行示例。

添加畫面

在Maroon in Trouble應用程序中，我們使用以下自定義類型（分別在單獨的.qml文件中定義）創建游戲屏幕：

• NewGameScreen.qml
• GameCanvas.qml
• GameOverScreen.qml

要使用自定義類型，我們在主QML文件maroon.qml中添加了一個import語句，該語句將導入名為content類型所在位置的文件夾：

import "content"

我們在游戲的不同階段使用屏幕類型。NewGameScreen類型用于創建玩家啟動應用程序時出現的屏幕。在NewGameScreen.qml中，我們使用“圖像”類型創建“新游戲”按鈕，玩家可以按此按鈕來開始新游戲。

輕擊該按鈕將啟動一個倒數計時器，該倒計時計時器將通過使用GameCanvas類型觸發游戲畫布的創建。另一種“計時器”類型會在氣泡內生成小魚，玩家必須先將其釋放才能到達水面。玩家可以點擊屏幕來打開菜單，在這里他們可以購買不同類型的武器（近戰，遠程和炸彈）以破滅泡泡。

游戲結束時，出現使用GameOverScreen類型創建的屏幕。在此屏幕上，玩家可以查看他們的分數并開始新的游戲。

這些屏幕都是在相同的背景上創建的，并使用某些相同的圖像和動畫。

構造背景

在maroon.qml文件中，我們使用帶有ID以及固定寬度和高度的Item類型root來創建游戲的主窗口：

Item{   
   id: root  
   width: 320
   height: 480    
  property var gameState    
  property bool passedSplash: false

我們宣布了根項目兩個自定義屬性，gameState并且passedSplash我們將在后面使用管理的游戲狀態。

我們使用一個Image項來顯示游戲背景圖像：

  Image {          source:"content/gfx/background.png"          anchors.bottom: view.bottom

我們希望能夠在應用啟動時僅加載一次背景圖片，并且仍將不同的場景用于游戲屏幕。因此，background.png是根項目長度的三倍，并顯示一個場景，該場景從海底延伸到地平線上方的天空。

我們使用該anchors.bottom屬性將背景圖像錨定到我們用來放置屏幕的Column布局的底部：

Column {          
id: view         
y: -(height - 480)          
width: 320            
GameOverScreen 
{ 
gameCanvas: canvas 
}

我們為該y屬性設置一個負值，以將第一個場景設置在海底。我們通過從height屬性中減去屏幕的高度來計算位置。

在列布局中，我們使用Item類型將對象添加到背景。在該項目內，我們使用行布局對象定位圖像對象，這些對象在游戲畫布和游戲屏幕上方顯示波浪：

Item {              
id: canvasArea              
width: 320              
height: 480                

Row {                  height: childrenRect.height            
     Image {                      
id: wave                     
 y: 30                     
 source:"content/gfx/wave.png"                  
}
Image {                      
y: 30                      
source:"content/gfx/wave.png"                  
}      ...  Row {                  
opacity: 0.5                  
Image {                      
id: wave2                     
 y: 25                     
 source: "content/gfx/wave.png"
}                 
 Image 
{                     
 y: 25                      
source: "content/gfx/wave.png"                  
}

第二行波位于y軸上，與第一行略有偏移。我們還使用該opacity屬性使波浪的顏色看起來比前兩個波浪更淺，從而使背景更深。

我們使用Image對象還在新游戲屏幕和游戲畫布上顯示陽光：

Image {                 
 source: "content/gfx/sunlight.png"                 
 opacity: 0.02                  
y: 0                  
anchors.horizontalCenter: parent.horizontalCenter     
 ...             
 Image {                 
 source: "content/gfx/sunlight.png"                  
opacity: 0.04                
  y: 20                
  anchors.horizontalCenter: parent.horizontalCenter

 我們將opacity圖像的屬性設置為，0.02并0.04賦予陽光一定的深度。我們使用y屬性將圖像定位在y軸上的固定位置，并使用屬性將圖像anchors.horizontalCenter相對于其父對象水平居中。

我們使用一個圖像類型來顯示一個在背景上加深陰影的圖像：

 Image {                 
source: "content/gfx/grid.png"                 
opacity: 0.5              
}             
}              

我們將opacity圖像的屬性設置0.5為使背景在陰影后可見。

為了使背景更有趣，我們為添加到其中的一些對象設置了動畫。下面我將詳細講解如何構建動畫背景對象 。

Qt常用組件：

• QtitanRibbon| 下載試用: 遵循Microsoft Ribbon UI Paradigm for Qt技術的Ribbon UI組件，致力于為Windows、Linux和Mac OS X提供功能完整的Ribbon組件。
• QtitanChart | 下載試用 :是一個C ++庫，代表一組控件，這些控件使您可以快速地為應用程序提供漂亮而豐富的圖表。并且支持所有主要的桌面操作系統。
• QtitanDataGrid | 下載試用 :這個Qt數據網格組件使用純C++創建，運行速度極快，處理大數據和超大數據集的效果突出。QtitanDataGrid完全集成了QtDesigner，因而極易適應其他相似的開發環境，保證100%兼容Qt GUI。