Qt 快速教程 · ZetCode 中文系列教程

# Qt Quick 教程 > 原文： [http://zetcode.com/gui/qtquick/](http://zetcode.com/gui/qtquick/) 這是 Qt Quick 入門教程。本教程講授了 Qt Quick 中編程的基礎知識。本教程使用 Qt 5.5.1 編寫。 ## Qt Quick Qt Quick 是一種現代的用戶界面技術，將聲明性用戶界面設計和命令性編程邏輯分開。它是 Qt 框架內的一個應用框架。它提供了一種構建自定義的，高度動態的，具有流暢過渡和效果的用戶界面的方式，這種方式在移動設備中尤為常見。 Qt Quick 是與 Qt Widgets 分離的模塊，該模塊針對傳統的桌面應用。 Qt Quick 基于 QML 聲明性語言。 ## QML QML 是一種用戶界面規范和編程語言。它允許創建流暢的動畫和視覺吸引力的應用。 QML 提供了一種高度可讀的，聲明性的，類似于 JSON 的語法，并支持將命令性 JavaScript 表達式與動態屬性綁定結合在一起。 QML 由元素層次構成。 ## 簡單的例子我們從一個簡單的例子開始。 `simple.qml` ```js import QtQuick 2.5 import QtQuick.Controls 1.4 ApplicationWindow { width: 300 height: 200 title: "Simple" Text { text: "Qt Quick" anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter font.pointSize: 24; font.bold: true } } ``` 該代碼創建一個帶有居中文本的小窗口。 ```js import QtQuick 2.5 import QtQuick.Controls 1.4 ``` 導入了必要的模塊。 Qt Quick 模塊的最新版本與 Qt 版本不同。這些是 Qt 5.5.1 的最新模塊。 ```js ApplicationWindow { ... } ``` `ApplicationWindow`是用于主應用窗口的 Qt Quick 控件。用戶界面元素由其類型名稱指定，后跟兩個大括號。 ```js width: 300 height: 200 title: "Simple" ``` 這是`ApplicationWindow`元素的三個內置屬性。它們指定窗口的寬度，高度和標題。 ```js Text { text: "Qt Quick" anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter font.pointSize: 24 } ``` `Text`控件顯示文本；文本是使用`text`屬性指定的。在其父元素`ApplicationWindow`元素中聲明它。我們通過`parent`屬性引用父對象。 `anchors`用于在應用窗口中將`Text`控件居中。最后，`font`屬性用于設置文本的大小。 `parent`和`font`是組屬性的示例。 ![Simple example](https://img.kancloud.cn/a9/fb/a9fb89c6fac6f5a3e5b57d7608ce4b93_302x226.jpg) 圖：簡單 example 用`qmlscene`工具加載`simple.qml`文檔后，我們得到了這張圖片。 ## 退出按鈕在第二個示例中，我們展示`Button`控件。 `quit_button.qml` ```js import QtQuick 2.5 import QtQuick.Controls 1.4 ApplicationWindow { width: 300 height: 200 title: "Quit button" Button { x: 20 y: 20 text: "Quit" onClicked: Qt.quit() } } ``` 窗口上放置了一個按鈕。單擊該按鈕可終止該應用。 ```js Button { x: 20 y: 20 text: "Quit" onClicked: Qt.quit() } ``` `Button`控件嵌套在`ApplicationWindow`元素內。它放置在`x = 20`，`y = 20`坐標處；坐標相對于窗口的左上角。 `text`屬性指定按鈕的標簽。 `onClicked()`是按鈕單擊信號的處理器。 `Qt.quick()`函數終止應用。 ![Quit button](https://img.kancloud.cn/03/2c/032c77b32b74d3213a570d6883f95f34_302x226.jpg) 圖：退出按鈕 ## `CheckBox` `CheckBox`是 Qt Quick 控件，具有兩種狀態：開和關。復選框通常用于表示可以啟用或禁用的應用中的功能。 `mycheckbox.qml` ```js import QtQuick 2.5 import QtQuick.Controls 1.4 ApplicationWindow { id: rootwin width: 300 height: 200 title: "CheckBox" function onChecked(checked) { if (checked) { rootwin.title = "CheckBox" } else { rootwin.title = " " } } CheckBox { x: 15 y: 15 text: "Show title" checked: true onClicked: rootwin.onChecked(checked) } } ``` 在我們的示例中，我們在窗口上放置了一個檢查按鈕。復選按鈕顯示或隱藏窗口的標題。 ```js id: rootwin ``` `id`是一個特殊值，用于引用 QML 文檔中的元素。 id 在文檔中必須唯一，并且不能將其重置為其他值，也無法查詢。 ```js function onChecked(checked) { if (checked) { rootwin.title = "CheckBox" } else { rootwin.title = " " } } ``` `onChecked`是一個 JavaScript 函數，用于設置或刪除窗口的標題。為此，我們使用先前創建的`rootwin` ID。 ```js CheckBox { x: 15 y: 15 text: "Show title" checked: true onClicked: rootwin.onChecked(checked) } ``` 由于標題在應用的開頭是可見的，因此我們使用`checked`屬性將`CheckBox`設置為選中狀態。 `onClicked`處理器調用`onChecked`函數。由于它是在根窗口的空間中定義的，因此我們再次使用`rootwin` id 來引用它。 ![CheckBox](https://img.kancloud.cn/48/52/485282dc6db30b81071f641c99df547a_302x226.jpg) 圖：`CheckBox` ## 滑桿 `Slider`是具有簡單句柄的控件。可以前后拉動此手柄，從而為特定任務選擇一個值。 `slider.qml` ```js import QtQuick 2.5 import QtQuick.Controls 1.4 ApplicationWindow { id: rootwin width: 300 height: 200 title: "Slider" Row { Slider { id: slider minimumValue: 0 maximumValue: 100 } Label { text: Math.floor(slider.value) } } } ``` 窗口上放置了`Slider`和`Label`控件。拉動滑塊，我們將更新標簽。 ```js Row { ... } ``` `Row`是 QML 類型，其子項沿一行放置。 ```js Slider { id: slider minimumValue: 0 maximumValue: 100 } ``` 創建一個`Slider`控件。我們指定其最小值和最大值。 ```js Label { text: Math.floor(slider.value) } ``` 標簽的`text`屬性綁定到滑塊的`value`屬性。這稱為屬性綁定。 ![Slider](https://img.kancloud.cn/75/f6/75f65751b1d1122ce9596b0c6409872c_302x226.jpg) 圖：滑塊 ## `NumberAnimation` Qt Quick 中提供了幾種動畫類型。其中之一是`NumberAnimation`。 `NumberAnimation`是數值變化的特殊屬性動畫。 `numberanim.qml` ```js import QtQuick 2.5 import QtQuick.Controls 1.4 ApplicationWindow { width: 400 height: 300 title: "Number animation" Rectangle { x: 20 y: 20 width: 100; height: 100 color: "forestgreen" NumberAnimation on x { to: 250; duration: 1000 } } } ``` 在示例中，我們使用`NumberAnimation`為矩形設置動畫；矩形沿 x 軸移動一秒鐘。 ```js NumberAnimation on x { to: 250; duration: 1000 } ``` 動畫將應用于`Rectangle`的`x`屬性。 `to:`屬性保存動畫的結束值。 `duration:`屬性保存動畫的持續時間（以毫秒為單位）。 ## 自定義繪圖可以在`Canvas`元素上執行自定義繪圖。 `shapes.qml` ```js import QtQuick 2.5 import QtQuick.Controls 1.4 ApplicationWindow { width: 400 height: 200 title: "Shapes" Canvas { anchors.fill: parent onPaint: { var ctx = getContext("2d"); ctx.fillStyle = "lightslategray" ctx.beginPath(); ctx.fillRect(10, 10, 80, 50); ctx.beginPath(); ctx.fillRect(120, 10, 70, 70); ctx.beginPath(); ctx.ellipse(230, 10, 90, 70); ctx.fill(); ctx.beginPath(); ctx.ellipse(10, 110, 70, 70); ctx.fill(); ctx.beginPath(); ctx.roundedRect(120, 110, 70, 70, 10, 10); ctx.fill(); ctx.beginPath(); ctx.moveTo(230, 110); ctx.arc(230, 110, 70, 0, Math.PI * 0.5, false); ctx.fill(); } } } ``` 在示例中，我們在畫布上繪制了六個不同的形狀：矩形，正方形，橢圓形，圓形，圓角矩形和弧形。 ```js Canvas { anchors.fill: parent ... } ``` `Canvas`填充整個父級。 ```js var ctx = getContext("2d"); ``` 我們使用`getContext()`函數獲得繪圖上下文。 ```js ctx.fillStyle = "lightslategray" ``` 形狀的內部充滿了光亮的色彩。 ```js ctx.beginPath(); ctx.fillRect(10, 10, 80, 50); ``` `beginPath()`函數開始一個新路徑。 `fillRect()`使用`fillStyle`繪制指定的矩形區域。 ![Shapes](https://img.kancloud.cn/95/86/95861fcfc6ef982751249cc33cd0a90e_402x226.jpg) 圖：形狀 ## 在 C++ 中部署 Qt Quick 應用在本節中，我們顯示如何在 C++ 中部署 Qt Quick 應用。 `simple.pro` ```js QT += qml quick TARGET = Simple TEMPLATE = app SOURCES += main.cpp ``` 這是項目文件。它在應用中包括 qml 和 quick 模塊。 `basic.qml` ```js import QtQuick 2.5 import QtQuick.Controls 1.4 ApplicationWindow { width: 300 height: 200 title: "Simple" Text { text: "Qt Quick" anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter font.pointSize: 24 } } ``` 這是要在 C++ 應用中顯示的 QML 文檔。它包含居中文本。 `main.cpp` ```cpp #include <QGuiApplication> #include <QQmlApplicationEngine> #include <QQuickWindow> int main(int argc, char *argv[]) { QGuiApplication app(argc, argv); QQmlApplicationEngine engine; engine.load(QUrl("simple.qml")); QObject *topLevel = engine.rootObjects().value(0); QQuickWindow *window = qobject_cast<QQuickWindow *>(topLevel); window->show(); return app.exec(); } ``` `QQmlApplicationEngine`用于加載 QML 文檔。 ## 在 PyQt5 中部署 Qt Quick 應用在本節中，我們顯示如何在 PyQt5 中部署 Qt Quick 應用。 ```py $ sudo apt-get install python3-pyqt5 $ sudo apt-get install python3-pyqt5.qtquick $ sudo apt-get install qtdeclarative5-qtquick2-plugin ``` 在基于 Debian 的 Linux 上，我們可以安裝上述包以使事情順利進行。 `basic.qml` ```js import QtQuick 2.2 Rectangle { x: 20 y: 20 width: 100 height: 100 color: "lightsteelblue" } ``` 這是要在 PyQt5 應用中顯示的 QML 文檔；它包含一個矩形對象。 `launcher.py` ```py #!/usr/bin/python3 # -*- coding: utf-8 -*- import sys from PyQt5.QtWidgets import QApplication, QMainWindow from PyQt5.QtCore import QUrl from PyQt5.QtQuick import QQuickView if __name__ == "__main__": app = QApplication(sys.argv) view = QQuickView() view.setSource(QUrl('basic.qml')) view.show() sys.exit(app.exec_()) ``` `QQuickView`類提供了一個用于顯示 Qt Quick 用戶界面的窗口。 [Tweet](https://twitter.com/share) 這是 QtQuick 教程。您可能也對 [Qt5 教程](/gui/qt5/)或 [PyQt5 教程](/gui/pyqt5/)感興趣。