# QML 和 PyQT：创建 GUI（教程）

> 原文： [https://pythonspot.com/qml-and-pyqt-creating-a-gui-tutorial/](https://pythonspot.com/qml-and-pyqt-creating-a-gui-tutorial/)

如果您尚未完成我们的[第一个 PyQT 教程](https://pythonspot.com/building-an-application-gui-with-pyqt-beginners-tutorial/)，则应该这样做，这很有趣！ 在本教程中，我们将使用 [PyQT4](https://pythonspot.com/pyqt4/) 和用户界面标记语言，该语言描述图形用户界面和控件。

**相关课程：**

*   [使用 PyQt5 创建 GUI 应用](https://gum.co/pysqtsamples)

## QML 和 PyQT

An excerpt of user interface markup [graphical user interfaces](https://pythonspot.com/gui/) and language code could look like:

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

```

本质上，该语言告诉界面应该是什么样。 我们将使用的语言称为 QML。

## QTCreator

Start a programmed called QTCreator.   The tutorial will be quite graphical to help you through the whole process. Simply type qtcreator in the terminal or start it from the menu list.  This screen should pop up:![qtcreator](img/472f18a048e7f08feb788266c341bfd8.jpg) qtcreator

## 创建一个 GUI

Press the big **New Project** button. Select **QT Quick Application** from the menu below. Finally press **Choose** on the bottom right. ![qtquick](img/a24879ba48cc2b7501b7b33c35f7dc27.jpg) qtquick

将会出现一个新的弹出窗口：

![kde create](img/941e20c7d0c048025948f404e3fb4668.jpg) kde create

输入名称和有效路径以保存您的项目。 然后按下一步。 从菜单列表中选择 **QT Quick 2.0** 。 按下一步。 按完成。 立即出现以 QML 语言定义的用户界面。

![qt quick](img/4d9da0a2b8e81110fd8f9c625e578502.jpg) qt quick

像所有伟大的程序员一样，我们将以最懒惰的方式解决问题。 无需手动输入所有 QML 代码，我们将按下屏幕左侧的**设计**按钮。 现在将出现一个拖放屏幕。

![draganddrop](img/e22af26e044860eabf29f3813b1dfa8b.jpg) draganddrop

我们将图像拖到该区域上，然后选择右侧的源。 保存项目。 打开终端并找到您刚创建的 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 定义的用户界面：

![QML_PyQT](img/f8cf080d83de7cdd12b501d273967d21.jpg) QML and PyQT

所有代码都是 [PyQT](https://pythonspot.com/pyqt4/) ，因此您可以像上一教程中那样添加代码。 这是使用 PyQT 创建图形界面的两种方法。 与在上一教程中使用 [QT](https://pythonspot.com/pyqt4/) 创建 GUI 的方法相比，该方法可能更宽松地与代码耦合。 尽管两者都是有效的方法。

[下载 PyQT4 示例（批量收集）](https://pythonspot.com/python-qt-examples/)

您可能会喜欢：[具有 PyQT4](https://pythonspot.com/building-an-application-gui-with-pyqt-beginners-tutorial/) 或 [PyQt4 教程](https://pythonspot.com/pyqt4/)的应用程序 GUI