QML 和 PyQT：建立 GUI

在本教程中，我們將使用 PyQT4 和使用者介面標記語言，這是一種描述圖形使用者介面和控制元件的語言。

QML 和 PyQT

使用者介面標記圖形使用者介面和語言程式碼的摘錄如下所示：

 Rectangle {
     id: simplebutton
     color: "grey"
     width: 150; height: 75

本質上，語言告訴介面應該是什麼樣子。我們將使用的語言稱為 QML。

QTCreator

啟動一個名為 QTCreator 的程式。本教程將非常圖形化，以幫助你完成整個過程。只需在終端中鍵入 qtcreator 或從選單列表中啟動它。此螢幕應彈出：

建立 GUI

點選新建專案按鈕。從下面的選單中選擇 QT Quick Application。最後按右下角的 選擇。

將出現一個新的彈出視窗：

鍵入名稱和有效路徑以儲存專案。然後按 Next。從選單列表中選擇 QT Quick 2.0。按下一步。按完成。立即出現以 QML 語言定義的使用者介面。

像所有偉大的程式設計師一樣，我們將以最懶惰的方式解決問題。我們不是手動輸入所有 QML 程式碼，而是按下螢幕左側的設計按鈕。現在應該出現一個拖放螢幕。

我們將影象拖到該區域並選擇右側的源。儲存專案。開啟終端並找到剛剛建立的 qml 檔案。或者，你只需複製編輯框中的程式碼並將其儲存到.qml 檔案即可。輸入命令：

qmlviewer main.qml

這將顯示 qml 檔案中定義的視窗，沒有任何功能。它只是介面的檢視器。然後我們建立一些程式碼來載入這個 QML 定義：

import sys
 
from PyQt4.QtCore import QDateTime, QObject, QUrl, pyqtSignal
from PyQt4.QtGui import QApplication
from PyQt4.QtDeclarative import QDeclarativeView
 
app = QApplication(sys.argv)
 
# Create the QML user interface.
view = QDeclarativeView()
view.setSource(QUrl('main.qml'))
view.setResizeMode(QDeclarativeView.SizeRootObjectToView)
view.setGeometry(100, 100, 400, 240)
view.show()
 
app.exec_()

最後我們將第一行 main.qml 修改為：

import Qt 4.7

僅僅因為我們的 QtQuick 失蹤了。執行

python run.py

現在將顯示 QML 定義的使用者介面：

所有程式碼都只是 PyQT ，因此你可以像上一個教程一樣新增程式碼。這是使用 PyQT 建立圖形介面的兩種方法。與在先前教程中使用QT建立 GUI 的方法相比，該方法可以更鬆散地耦合到程式碼。儘管兩者都是有效的方法。