本文介紹的是Qt Quick初體驗(yàn)QML編程，QML它結(jié)合了QtDesigner UI和QtScript的有點(diǎn)。QtDesigner可以設(shè)計(jì)出.ui界面文件,但是不支持和Qt原生C++代碼的交互。

Creating a Menu Page

到現(xiàn)在，我們（的教程）已經(jīng)涵蓋了如何在單一的QML文件中創(chuàng)建元素和指定行為。在這一節(jié)，我們的內(nèi)容將包含怎樣導(dǎo)入QML元素和如何復(fù)用一些創(chuàng)建好的組件來生成其他組件。

菜單顯示一個(gè)內(nèi)容列表，每一項(xiàng)都能執(zhí)行一個(gè)動(dòng)作。我們可以通過幾種方式在QML創(chuàng)建一個(gè)菜單。首先，我們建立一個(gè)包含按鈕的菜單，每個(gè)按鈕最終都會(huì)執(zhí)行不同動(dòng)作。菜單代碼在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關(guān)鍵字。FileMenu.qml需要用到JavaScript文件，或者不在同級(jí)目錄下的QML文件。因?yàn)锽utton.qml和FileMenu.qml在同一個(gè)目錄，我們不需要引入就可以使用它。我們可以通過聲明Button{}來直接創(chuàng)建一個(gè)Button元素 ，類似于一個(gè)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中，我們聲明了三個(gè)Button元素。它們?cè)谝粋€(gè)Row元素里，它作為定位器將它的孩子們沿著一個(gè)垂直的行安放。Button的聲明在Button.qml中，與上節(jié)我們用到的Button.qml是一樣的。在新創(chuàng)建的按鈕里可以聲明綁定新的屬性，實(shí)際上也覆蓋了Button.qml中的屬性集。當(dāng)exitButton按鈕被點(diǎn)擊時(shí)，窗口會(huì)被退出并關(guān)閉。注意，除了exitButton內(nèi)的onButtonClick handler會(huì)被調(diào)用之外，Button.qml內(nèi)的也會(huì)被調(diào)到。

Rectangle內(nèi)聲明的Row，創(chuàng)建了一個(gè)容納一行button的容器。這個(gè)額外的矩形創(chuàng)造了一種在菜單內(nèi)組織一行button的間接方法。

現(xiàn)階段，編輯菜單的聲明非常簡(jiǎn)單，有三個(gè)標(biāo)簽分別是Copy、Paste和Select All的按鈕。

裝備了導(dǎo)入和定制之前生成的組件的知識(shí)，現(xiàn)在我們可以將這些菜單頁組合成一個(gè)菜單欄——包含用來選擇菜單的按鈕，并且看看那我們?cè)鯓邮褂肣ML組織數(shù)據(jù)。

Implementing a Menu Bar

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

Using Data Models and Views

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

我們?cè)趍enuListModel中聲明了兩個(gè)可視的items，F(xiàn)ileMenu 和EditMenu。我們定制了兩個(gè)菜單，并使用ListView來顯示。 MenuBar.qml包含了QML聲明和一個(gè)在EditMenu.qml中定義的簡(jiǎn)單的編輯菜單。

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

ListView元素將按照一個(gè)delegate來顯示一個(gè)model。這個(gè)delegate可能聲明在一個(gè)Row元素或則grid元素里顯示的model items。我們的menuListModel已經(jīng)有可見的items，因?yàn)?，我們就不需要一個(gè)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可以響應(yīng)鼠標(biāo)拖拽和其他手勢(shì)。上面代碼的最后一部分設(shè)置了Flickable屬性，對(duì)view創(chuàng)建了我們期待的閃爍移動(dòng)。特別是highlightMoveDuration屬性改變閃爍轉(zhuǎn)變的過渡時(shí)間。highlightMoveDuration的值越大菜單切換越慢。

ListView通過index來維護(hù)所有的model的items，通過index被聲明的順序，可以訪問model中的每一個(gè)可見item。改變currentIndex實(shí)際上改變了ListView中的高亮item。我們的菜單欄的標(biāo)題以實(shí)例證明了這種效果。一行里有兩個(gè)按鈕，當(dāng)被點(diǎn)擊時(shí)，兩個(gè)都會(huì)改變當(dāng)前的菜單。當(dāng)點(diǎn)擊fileButton時(shí)，會(huì)改變當(dāng)前的菜單到文件菜單，index為0的原因是，F(xiàn)ileMenu 在menuListModel中是第一個(gè)聲明的。同樣地，點(diǎn)擊editButton時(shí)改變當(dāng)前菜單到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 
             }  
         }  
     }  

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

小結(jié)：Qt Quick初體驗(yàn)QML編程的內(nèi)容介紹完了，完成了一個(gè)簡(jiǎn)單的菜單的小實(shí)例，希望通過本篇的實(shí)例，能對(duì)你有所幫助?。。?/p>