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 的方法相比，该方法可以更松散地耦合到代码。尽管两者都是有效的方法。