本文介紹的是Qt Quick初體驗QML編程，QML它結合了QtDesigner UI和QtScript的有點。QtDesigner可以設計出.ui界面文件,但是不支持和Qt原生C++代碼的交互。

Creating a Menu Page

到現在，我們（的教程）已經涵蓋了如何在單一的QML文件中創建元素和指定行為。在這一節，我們的內容將包含怎樣導入QML元素和如何復用一些創建好的組件來生成其他組件。

菜單顯示一個內容列表，每一項都能執行一個動作。我們可以通過幾種方式在QML創建一個菜單。首先，我們建立一個包含按鈕的菜單，每個按鈕最終都會執行不同動作。菜單代碼在FileMenu.qml中。

Code import QtQuick 1.0                \\import the main Qt QML module  
 import "folderName"            \\import the contents of the folder  
 import "script.js" as Script        \\import a Javascript file and name it as Script 

上面的語法可以看出怎么樣使用import關鍵字。FileMenu.qml需要用到JavaScript文件，或者不在同級目錄下的QML文件。因為Button.qml和FileMenu.qml在同一個目錄，我們不需要引入就可以使用它。我們可以通過聲明Button{}來直接創建一個Button元素 ，類似于一個Rectangle{}的聲明。

Code In FileMenu.qml:  
 
     Row{  
         anchors.centerIn: parent  
         spacing: parent.width/6  
 
         Button{  
             id: loadButton  
             buttonColor: "lightgrey"  
             label: "Load"  
         }  
         Button{  
             buttonColor: "grey"  
             id: saveButton  
             label: "Save"  
         }  
         Button{  
             id: exitButton  
             label: "Exit"  
             buttonColor: "darkgrey"  
 
             onButtonClick: Qt.quit()  
         }  
     } 

在FileMenu.qml中，我們聲明了三個Button元素。它們在一個Row元素里，它作為定位器將它的孩子們沿著一個垂直的行安放。Button的聲明在Button.qml中，與上節我們用到的Button.qml是一樣的。在新創建的按鈕里可以聲明綁定新的屬性，實際上也覆蓋了Button.qml中的屬性集。當exitButton按鈕被點擊時，窗口會被退出并關閉。注意，除了exitButton內的onButtonClick handler會被調用之外，Button.qml內的也會被調到。

Rectangle內聲明的Row，創建了一個容納一行button的容器。這個額外的矩形創造了一種在菜單內組織一行button的間接方法。

現階段，編輯菜單的聲明非常簡單，有三個標簽分別是Copy、Paste和Select All的按鈕。

裝備了導入和定制之前生成的組件的知識，現在我們可以將這些菜單頁組合成一個菜單欄——包含用來選擇菜單的按鈕，并且看看那我們怎樣使用QML組織數據。

Implementing a Menu Bar

我們的文本編輯器程序需要一種使用菜單欄顯示菜單的方法。使用菜單欄可以切換不同的菜單，用戶可以選擇要顯示的菜單。菜單切換意味著這些菜單比單單在一行中顯示出來需要更多的結構。QML使用models和views來構建數據并顯示這些結構化的數據。

Using Data Models and Views

QML有不同的數據views可以顯示數據models。我們的菜單欄會將菜單顯示在一個列表中，這個列表有一個顯示一行菜單名的標題。我們可以在VisualItemModel中聲明一個菜單列表。VisualItemModel包含了像Rectangle和導入的UI元素這樣的views的items。其他的像ListModel元素這樣的model類型需要一個代理來顯示它們的數據。

我們在menuListModel中聲明了兩個可視的items，FileMenu 和EditMenu。我們定制了兩個菜單，并使用ListView來顯示。 MenuBar.qml包含了QML聲明和一個在EditMenu.qml中定義的簡單的編輯菜單。

CodeVisualItemModel{  
         id: menuListModel  
         FileMenu{  
             width: menuListView.width  
             height: menuBar.height  
             color: fileColor  
         }  
         EditMenu{  
             color: editColor  
             width:  menuListView.width  
             height: menuBar.height  
         }  
     }  

ListView元素將按照一個delegate來顯示一個model。這個delegate可能聲明在一個Row元素或則grid元素里顯示的model items。我們的menuListModel已經有可見的items，因為，我們就不需要一個delegate了。

ListView{  
         id: menuListView  
         //Anchors are set to react to window anchors  
         anchors.fill:parent  
         anchors.bottom: parent.bottom  
         width:parent.width  
         height: parent.height  
         //the model contains the data  
         model: menuListModel  
         //control the movement of the menu switching  
         snapMode: ListView.SnapOneItem  
         orientation: ListView.Horizontal  
         boundsBehavior: Flickable.StopAtBounds  
         flickDeceleration: 5000  
         highlightFollowsCurrentItem: true  
         highlightMoveDuration:240  
         highlightRangeMode: ListView.StrictlyEnforceRange  
     } 

另外，ListView繼承自Flickable，使list可以響應鼠標拖拽和其他手勢。上面代碼的最后一部分設置了Flickable屬性，對view創建了我們期待的閃爍移動。特別是highlightMoveDuration屬性改變閃爍轉變的過渡時間。highlightMoveDuration的值越大菜單切換越慢。

ListView通過index來維護所有的model的items，通過index被聲明的順序，可以訪問model中的每一個可見item。改變currentIndex實際上改變了ListView中的高亮item。我們的菜單欄的標題以實例證明了這種效果。一行里有兩個按鈕，當被點擊時，兩個都會改變當前的菜單。當點擊fileButton時，會改變當前的菜單到文件菜單，index為0的原因是，FileMenu 在menuListModel中是第一個聲明的。同樣地，點擊editButton時改變當前菜單到EditMenu。

labelList的zvalue為1，表示它顯示在菜單欄前面。z值高的items顯示在低z值的前。缺省的z值是0.

Rectangle{  
         id: labelList  
         ...  
         z: 1  
         Row{  
             anchors.centerIn: parent  
             spacing:40  
             Button{  
                 label: "File"  
                 id: fileButton  
                 ...  
                 onButtonClick: menuListView.currentIndex = 0 
             }  
             Button{  
                 id: editButton  
                 label: "Edit"  
                 ...  
                 onButtonClick:    menuListView.currentIndex = 1 
             }  
         }  
     }  

我們剛剛建立的菜單欄可以通過輕打或者點擊頂端的菜單名字訪問菜單。切換菜單的屏幕感覺起來直觀而且反應很快。

小結：Qt Quick初體驗QML編程的內容介紹完了，完成了一個簡單的菜單的小實例，希望通過本篇的實例，能對你有所幫助！！！