Qt Quick初體驗QML編程
本文介紹的是Qt Quick初體驗QML編程，QML它結(jié)合了QtDesigner UI和QtScript的有點。QtDesigner可以設(shè)計出.ui界面文件,但是不支持和Qt原生C++代碼的交互。
Creating a Menu Page
到現(xiàn)在，我們（的教程）已經(jīng)涵蓋了如何在單一的QML文件中創(chuàng)建元素和指定行為。在這一節(jié)，我們的內(nèi)容將包含怎樣導(dǎo)入QML元素和如何復(fù)用一些創(chuàng)建好的組件來生成其他組件。
菜單顯示一個內(nèi)容列表，每一項都能執(zhí)行一個動作。我們可以通過幾種方式在QML創(chuàng)建一個菜單。首先，我們建立一個包含按鈕的菜單，每個按鈕最終都會執(zhí)行不同動作。菜單代碼在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文件，或者不在同級目錄下的QML文件。因為Button.qml和FileMenu.qml在同一個目錄，我們不需要引入就可以使用它。我們可以通過聲明Button{}來直接創(chuàng)建一個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中，與上節(jié)我們用到的Button.qml是一樣的。在新創(chuàng)建的按鈕里可以聲明綁定新的屬性，實際上也覆蓋了Button.qml中的屬性集。當exitButton按鈕被點擊時，窗口會被退出并關(guān)閉。注意，除了exitButton內(nèi)的onButtonClick handler會被調(diào)用之外，Button.qml內(nèi)的也會被調(diào)到。
Rectangle內(nèi)聲明的Row，創(chuàng)建了一個容納一行button的容器。這個額外的矩形創(chuàng)造了一種在菜單內(nèi)組織一行button的間接方法。
現(xiàn)階段，編輯菜單的聲明非常簡單，有三個標簽分別是Copy、Paste和Select All的按鈕。
裝備了導(dǎo)入和定制之前生成的組件的知識，現(xiàn)在我們可以將這些菜單頁組合成一個菜單欄——包含用來選擇菜單的按鈕，并且看看那我們怎樣使用QML組織數(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。我們的菜單欄會將菜單顯示在一個列表中，這個列表有一個顯示一行菜單名的標題。我們可以在VisualItemModel中聲明一個菜單列表。VisualItemModel包含了像Rectangle和導(dǎo)入的UI元素這樣的views的items。其他的像ListModel元素這樣的model類型需要一個代理來顯示它們的數(shù)據(jù)。
我們在menuListModel中聲明了兩個可視的items，F(xiàn)ileMenu 和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已經(jīng)有可見的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可以響應(yīng)鼠標拖拽和其他手勢。上面代碼的最后一部分設(shè)置了Flickable屬性，對view創(chuàng)建了我們期待的閃爍移動。特別是highlightMoveDuration屬性改變閃爍轉(zhuǎn)變的過渡時間。highlightMoveDuration的值越大菜單切換越慢。
ListView通過index來維護所有的model的items，通過index被聲明的順序，可以訪問model中的每一個可見item。改變currentIndex實際上改變了ListView中的高亮item。我們的菜單欄的標題以實例證明了這種效果。一行里有兩個按鈕，當被點擊時，兩個都會改變當前的菜單。當點擊fileButton時，會改變當前的菜單到文件菜單，index為0的原因是，F(xiàn)ileMenu 在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
- }
- }
- }
我們剛剛建立的菜單欄可以通過輕打或者點擊頂端的菜單名字訪問菜單。切換菜單的屏幕感覺起來直觀而且反應(yīng)很快。
小結(jié)：Qt Quick初體驗QML編程的內(nèi)容介紹完了，完成了一個簡單的菜單的小實例，希望通過本篇的實例，能對你有所幫助！！！
