QT開發（五十五）———Qt Quick Controls

    QT開發（五十五）———Qt Quick Controls

1、Qt Quick Controls基礎

    QT5.1發佈了Qt Quick的一個全新模塊：Qt Quick Controls。Qt Quick Controls模塊提供了大量相似Qt Widgets模塊的可重用組件。

    爲了開發基於Qt Quick Controls的程序，須要建立一個Qt Quick Application類型的應用程序，選擇組件集的時候注意選擇Qt Quick Controls。

2、Qt Quick Controls組件

    Qt Quick Controls 提供了多種組件。

1、應用程序窗口

    應用程序窗口是用於描述應用程序的基本窗口屬性的組件。

ApplicationWindow	對應QMainWindow，提供頂層應用程序窗口
MenuBar	對應QMenuBar，提供窗口頂部橫向的菜單欄
StatusBar	對應QStatusBar，提供狀態欄
ToolBar	對應QToolBar，提供工具欄，能夠添加ToolButton和其它組件
Action	對應QAction，提供可以綁定到導航和視圖的抽象的用戶界面動做

二、導航與視圖

    便於用戶在一個佈局中管理和顯示其它組件

ScrollView	對應QScrollView，提供滾動視圖
SplitView	對應QSplitter，提供可拖動的分割視圖佈局
StackView	對應QStackedWidget，提供基於棧的層疊佈局
TabView	對應QTabView，提供帶有標籤的基於棧的層疊佈局
TableView	對應QTableView，提供帶有滾動條、樣式和表頭的表格
TreeView	對應QTreeView，提供帶有滾動條、樣式和表頭的表格

三、控件

    控件用於控件用於表現或接受用戶輸入

BusyIndicator	提供忙等示意組件
Button	對應QPushButton，提供按鈕組件
CheckBox	對應QCheckBox，提供複選框
ComboBox	對應QComboBox，提供下拉框
GroupBox	對應QGroupBox，提供帶有標題、邊框的容器
Label	對應QLabel，提供標籤組件
ProgressBar	對應QProgressBar，提供進度條組件
RadioButton	對應QRadioButton，提供單選按鈕
Slider	對應QSlider，提供滑動組件
SpinBox	對應QSpinBox，提供微調組件
Switch	提供相似單選按鈕的開關組件
TextArea	對應QTextEdit，提供可以顯示多行文本的富文本編輯框
TextField	對應QTextLine，提供顯示單行文本的純文本編輯框
ToolButton	對應QToolButton，提供在工具欄上顯示的工具按鈕
ExclusiveGroup	提供互斥

4、菜單

    用於構建菜單的組件

Menu	對應QMenu，提供菜單、子菜單、彈出菜單等
MenuSeparator	提供菜單分隔符
MenuItem	提供添加到菜單欄或菜單的菜單項
StatusBar	對應QStatusBar，提供狀態欄
ToolBar	對應QToolBar，提供工具欄，能夠添加ToolButton和其它組件

3、Qt Quick Controls應用程序實例

Main.qml文件：

import QtQuick 2.6
import QtQuick.Controls 1.4
 
ApplicationWindow
{
    title: qsTr("NotePad")
    width: 640
    height: 480
    Action
    {
        id: exitAction
        text: qsTr("E&xit")
        onTriggered: Qt.quit()
    }
    Action
    {
        id: newAction
        text: qsTr("New")
        iconSource: "p_w_picpaths/new.png"
        onTriggered:
        {
            textArea.text = "";
        }
    }
    Action
    {
        id: cutAction
        text: qsTr("Cut")
        iconSource: "p_w_picpaths/cut.png"
        onTriggered: textArea.cut()
    }
    Action
    {
        id: copyAction
        text: qsTr("Copy")
        iconSource: "p_w_picpaths/copy.png"
        onTriggered: textArea.copy()
    }
    Action
    {
        id: pasteAction
        text: qsTr("Paste")
        iconSource: "p_w_picpaths/paste.png"
        onTriggered: textArea.paste()
    }
    Action
    {
        id: selectAllAction
        text: qsTr("Select All")
        onTriggered: textArea.selectAll()
    }
    menuBar: MenuBar
    {
        Menu
        {
            title: qsTr("&File")
            MenuItem { action: newAction }
            MenuItem { action: exitAction }
        }
        Menu
        {
            title: qsTr("&Edit")
            MenuItem { action: cutAction }
            MenuItem { action: copyAction }
            MenuItem { action: pasteAction }
            MenuSeparator {}
            MenuItem { action: selectAllAction }
        }
    }
    toolBar: ToolBar
    {
        Row
        {
            anchors.fill: parent
            ToolButton { action: newAction }
            ToolButton { action: cutAction }
            ToolButton { action: copyAction }
            ToolButton { action: pasteAction }
        }
    }
    TextArea
    {
        id: textArea
        anchors.fill: parent
    }
}

    ApplicationWindow是應用程序的主窗口，提供了不少預約義的功能，好比菜單、工具欄等。qsTr()函數相似於tr()函數，用於國際化。

    menuBar和toolBar兩個屬性都是ApplicationWindow提供的屬性。menuBar是MenuBar類型的。MenuBar具備層次結構，是經過Menu的嵌套實現的。每個菜單項都是用MenuItem實現的；菜單項之間的分隔符則使用MenuSeparator控件。

    toolBar是Item類型的，一般都會使用ToolBar控件。ToolBar默認沒有提供佈局，必須給它設置一個佈局。直接添加了一個Row，做爲橫向工具欄的佈局。工具欄要橫向充滿父窗口，設置錨點爲anchors.fill: parent。雖然ToolBar設置的是充滿整個父窗口，但若是ToolBar只有一個子元素（好比這裏的Row），那麼工具欄的高度將被設置爲子元素的implicitHeight屬性，這對結合佈局使用很是有用。

    每個MenuItem和ToolButton都添加了一個action屬性。

    使用iconSource屬性能夠指定圖標。圖標只能是位於文件系統中的，不能加載資源文件中的圖標（若是將整個QML文檔放在資源文件中，就能夠直接加載資源文件中的圖標）。當直接使用「p_w_picpaths/new.png」路徑時，注意QML是運行時解釋的，這個路徑是相對於QML文件的路徑。圖標須要放在與main.qml文件同目錄下的p_w_picpaths目錄中。

    onTriggered屬性是一種信號處理函數，後面能夠添加JavaScript 語句。若是是多條語句，可使用大括號，例如newAction的onTriggered。QML組件能夠發出信號，與C++不一樣的是，QML組件的信號並不須要特別的鏈接語句，而是使用「on信號名字」的形式。Action有一個名爲triggered的信號，則其信號處理函數即爲onTriggered。這種簡單的信號槽實現的侷限在於同一個信號只能有一個固定名字的信號處理函數。固然，也可使用 connect 鏈接語句。