图像用户界面

图像用户界面，即graphical user interface，简称GUI，是指采用图形方式显示的计算机操作用户界面。尽管web和移动应用程序似乎已经垄断了软件开发市场，但对传统GUI桌面应用程序的需求仍然是存在的。

Python中提供了许多丰富的第三方库，如Tkinter、wxPython、PyQt和PySide等，可以帮助我们更方便的构建可视化界面。在本教程中，我们将以PyQt为例，教大家如何构建属于自己的第一款简易版的GUI计算器。

Source: Python and PyQt: Building a GUI Desktop Calculator
Author: Leodanis Pozo Ramos
Date: Aug 29, 2022

初识PyQt

PyQt，可以简单理解为Python版本的Qt界面，它是由一系列C++库和开发工具所组成，为图形用户界面提供独立于平台的抽象接口。Qt还提供了用于网络、线程、正则表达式、SQL数据库、SVG、OpenGL和XML等特性所需的类和工具。

PyQt目前有两个主流版本，即PyQt5和PyQt6，分别针对Qt 5.x和Qt 6.x版本构建，由RiverBank Computing Ltd所贡献。

在本教程中，我们将使用最新的PyQt6版本，注意两个版本之间并不是完全兼容的，同时要求安装的Python版本必须大于3.6.1。PyQt6具备良好的可扩展性，兼容Windows、Unix、Linux、macOS、iOS和Android。

注意，PyQt6需遵循以下两个许可证：

The Riverbank Commercial License

The General Public License (GPL), version 3

安装PyQt

安装PyQt6有两种方法，一种是从源码直接构建，此方法较为复杂，适合有经验的开发者。另一种方法比较适合本文的读者，即通过pip进行安装，如上所述，我们需要注意Python的安装版本。

此处推荐使用Anaconda3或Miniconda3创建新的虚拟环境，具体的安装方法网上教程很多，大家可自行查找，根据提示一步步安装即可。假设你已经配置好Conda环境，让我们根据具体环境执行以下对应的命令及进行安装：

# Windows
$ conda create -n PyQt6 python=3.8 -y
$ conda activate PyQt6
$ pip3 install pyqt6

# Mac OS
$ brew install pyqt6

# Linux
$ sudo apt install python3-pyqt6

创建PyQt

现在，让我们学习如何创建属于你的第一款PyQt程序。首先，在自己的工程目录下，新建一个hello.py文件，复制以下内容：

"""Simple Hello, World example with PyQt6."""

import sys

# 1. Import QApplication and all the required widgets
from PyQt6.QtWidgets import QApplication, QLabel, QWidget

# 2. Create an instance of QApplication
app = QApplication([])

# 3. Create your application's GUI
window = QWidget()
window.setWindowTitle("PyQt App")
window.setGeometry(100, 100, 280, 80)
helloMsg = QLabel("<h1>Hello, World!</h1>", parent=window)
helloMsg.move(60, 15)

# 4. Show your application's GUI
window.show()

# 5. Run your application's event loop
sys.exit(app.exec())

最后，在终端环境上运行python hello.py即可，如果不出意外的话，你的桌面会弹出一个窗口出来，内容大概如下所示：

PyQt基础知识

上面我们向大家展示了一个小demo，接下来让我们正式学习下PyQt入门的一些必备基础知识。

Widgets|组件

Widgets是矩形图形化组件，你可以将它们放在应用程序的窗口中用来构建GUI。Widgets有几个属性和方法，用于调整它们的外观和行为。

Widgets还能检测来自用户、窗口系统和其他来源的鼠标单击、按键及其他事件。每当Widgets捕获一个事件时，它都会发出一个信号来宣布其状态更改。PyQt拥有丰富的主流组件，每个小组件都有着不同的用途，例如：

Buttons|按钮
Labels|标签
Line edits|行编辑
Combo boxes|组合框
Radio buttons|单选按钮

Buttons|按钮

我们可以通过实例化QPushButton来创建按钮，这是一个提供经典命令按钮的类。典型的按钮有确定、取消、应用、是、否和关闭六种：

按钮的作用就是当用户点击时，计算机可以接收信号然后执行相应的操作。

Labels|标签

标签是通过实例化QLabel类来构建，它的作用是以文本或图像的形式来显示有用的信息，向用户解释某些组件的含义。

Line edits|行编辑

另一个常见的组件是行编辑，也称为输入框。该组件允许用户输入单行文本。可以使用QLineEdit类创建行编辑。当需要以纯文本形式获取用户输入时，行编辑非常有用:

像这样的行编辑自动提供基本的编辑操作，如复制、粘贴、撤消、重做、拖放等。在上图中，您还可以看到第一行上的对象显示的是提示符文本，以通知用户需要输入何种类型的信息。

Combo boxes|组合框

组合框是GUI应用程序中另一种基本类型的组件。你可以通过实例化QComboBox来创建它们。组合框将以一种占用最小屏幕空间的方式为用户提供选项的下拉列表：

这个组合框仅仅是只读状态的，这意味着用户可以从多个选项中选择一个，但不能添加自己的选项。组合框还可以编辑，允许用户动态添加新选项。组合框还可以包含pixmaps、strings或两者都包含。

pixmaps：代表内存中的一张图片，它支持加载现有的图片，有以像素为单位表示的宽高，并且每一个像素点有指定的颜色值。

Radio buttons|单选按钮

你将了解到的最后一个小部件是单选按钮，我们可以使用QRadioButton创建它。QRadioButton对象是一个选项按钮，您可以单击它来打开它。当需要用户从多个选项中选择一个时，单选按钮很有用。单选按钮中的所有选项同时显示在屏幕上：

在这个单选按钮组中，在给定的时间内只能选中一个按钮。如果用户选择另一个单选按钮，那么先前选择的按钮将自动关闭。

PyQt有大量类似的小组件集合。截至目前，PyQt6提供超过40种可供用于创建应用程序的GUI。在这里，我们仅展示部分组件。但是，这足以向大家展示PyQt的强大功能和灵活性。在下一节中，你将学习如何布局不同的小部件，为你的应用程序构建功能齐全的GUI。

Layout Managers|布局管理器

在PyQt中，你将发现一些在窗体或窗口中布局小部件的技术。例如，可以使用.resize()和.move()方法来给出小部件的绝对大小和位置。然而，这种通过手工设计的方式势必会存在一些局限性，例如：

每次都得手动计算确定每个部件所处位置及合适的大小
是否进行额外的计算以响应窗口大小调整事件
当窗口的布局以任何方式发生变化时，又得重新设计，不能自适应缩放

当然，PyQt也提供了一种resizeevent()方法来动态计算小组件的大小和位置，不过还是会存在与之类似的问题。最有效和推荐的方法是使用PyQt的布局管理器。它们将提高你的工作效率，降低出错的风险，并提高代码的可维护性。

布局管理器是一种允许我们在应用程序窗口或窗体上调整组件的大小和位置的类。它会自适应调整事件和GUI更改的大小，控制所有组件的大小和位置。PyQt提供了四个基本的布局管理器类：

QHBoxLayout

第一个布局管理器类，QHBoxLayout，从左到右水平排列小部件，就像下图中的假设小部件:

在水平布局中，小部件将一个接一个地出现，从左侧开始。下面的代码示例展示了如何使用QHBoxLayout水平排列三个按钮：

# h_layout.py

"""Horizontal layout example."""

import sys

from PyQt6.QtWidgets import (
    QApplication,
    QHBoxLayout,
    QPushButton,
    QWidget,
)

app = QApplication([])
window = QWidget()
window.setWindowTitle("QHBoxLayout")

layout = QHBoxLayout()
layout.addWidget(QPushButton("Left"))
layout.addWidget(QPushButton("Center"))
layout.addWidget(QPushButton("Right"))
window.setLayout(layout)

window.show()
sys.exit(app.exec())

当我们从命令行运行python h_layout.py时，你会得到以下输出：

QVBoxLayout

下一个布局管理器类是QVBoxLayout，它从上到下垂直排列小部件，同样地，这里我们给出一个示例代码：

# v_layout.py

"""Vertical layout example."""

import sys

from PyQt6.QtWidgets import (
    QApplication,
    QPushButton,
    QVBoxLayout,
    QWidget,
)

app = QApplication([])
window = QWidget()
window.setWindowTitle("QVBoxLayout")

layout = QVBoxLayout()
layout.addWidget(QPushButton("Top"))
layout.addWidget(QPushButton("Center"))
layout.addWidget(QPushButton("Bottom"))
window.setLayout(layout)

window.show()
sys.exit(app.exec())

运行该程序后，你会得到以下结果：

QGridLayout

第三个布局管理器是QGridLayout。该类在行和列的网格中排列小部件。每个小部件在网格上都有一个相对位置。您可以使用一对坐标(row, column)来定义小部件的位置。每个坐标必须是整数，这些坐标对定义了给定小部件将占据网格中的哪个单元格。

# g_layout.py

"""Grid layout example."""

import sys

from PyQt6.QtWidgets import (
    QApplication,
    QGridLayout,
    QPushButton,
    QWidget,
)

app = QApplication([])
window = QWidget()
window.setWindowTitle("QGridLayout")

layout = QGridLayout()
layout.addWidget(QPushButton("Button (0, 0)"), 0, 0)
layout.addWidget(QPushButton("Button (0, 1)"), 0, 1)
layout.addWidget(QPushButton("Button (0, 2)"), 0, 2)
layout.addWidget(QPushButton("Button (1, 0)"), 1, 0)
layout.addWidget(QPushButton("Button (1, 1)"), 1, 1)
layout.addWidget(QPushButton("Button (1, 2)"), 1, 2)
layout.addWidget(QPushButton("Button (2, 0)"), 2, 0)
layout.addWidget(
    QPushButton("Button (2, 1) + 2 Columns Span"), 2, 1, 1, 2
)
window.setLayout(layout)

window.show()
sys.exit(app.exec())

如果你从命令行运行这段代码，那么你会看到一个像这样的窗口：

QFormLayout

最后一个布局管理器是QFormLayout。这个类以两列布局的方式排列小部件。第一列通常在标签中显示消息。第二列通常包含QLineEdit、QComboBox、QSpinBox等小部件。这允许用户输入或编辑关于第一列中的信息的数据。

# f_layout.py

"""Form layout example."""

import sys

from PyQt6.QtWidgets import (
    QApplication,
    QFormLayout,
    QLineEdit,
    QWidget,
)

app = QApplication([])
window = QWidget()
window.setWindowTitle("QFormLayout")

layout = QFormLayout()
layout.addRow("Name:", QLineEdit())
layout.addRow("Age:", QLineEdit())
layout.addRow("Job:", QLineEdit())
layout.addRow("Hobbies:", QLineEdit())
window.setLayout(layout)

window.show()
sys.exit(app.exec())

运行结果如下所示：

Dialogs|对话框

使用PyQt，你可以开发两种类型的GUI桌面应用程序：

主窗口样式的应用程序，应用程序的主窗口继承自QMainWindow
对话框风格的应用程序，应用程序的主窗口继承自QDialog

要开发对话框风格的应用程序，你需要创建一个继承自QDialog的GUI类，它是所有对话框窗口的基类。对话框窗口是一个独立的窗口，你可以将其用作应用程序的主窗口。

对话框总是一个独立的窗口。如果一个对话框有一个父窗口，那么它将显示在父窗口部件的顶部。与父级的对话框将共享父级的任务栏条目。如果你没有为一个给定的对话框设置parent，那么这个对话框将在系统的任务栏中获得它自己的条目。

下面是一个如何使用QDialog开发对话框式应用程序的例子：

# dialog.py

"""Dialog-style application."""

import sys

from PyQt6.QtWidgets import (
    QApplication,
    QDialog,
    QDialogButtonBox,
    QFormLayout,
    QLineEdit,
    QVBoxLayout,
)

class Window(QDialog):
    def __init__(self):
        super().__init__(parent=None)
        self.setWindowTitle("QDialog")
        dialogLayout = QVBoxLayout()
        formLayout = QFormLayout()
        formLayout.addRow("Name:", QLineEdit())
        formLayout.addRow("Age:", QLineEdit())
        formLayout.addRow("Job:", QLineEdit())
        formLayout.addRow("Hobbies:", QLineEdit())
        dialogLayout.addLayout(formLayout)
        buttons = QDialogButtonBox()
        buttons.setStandardButtons(
            QDialogButtonBox.StandardButton.Cancel
            | QDialogButtonBox.StandardButton.Ok
        )
        dialogLayout.addWidget(buttons)
        self.setLayout(dialogLayout)

if __name__ == "__main__":
    app = QApplication([])
    window = Window()
    window.show()
    sys.exit(app.exec())

上面的代码示例将显示一个类似这样的窗口：

Main Windows|主窗口

大多数时候，你的GUI应用程序将是主窗口风格的应用程序。这意味着它们将有一个菜单栏、一些工具栏、一个状态栏和一个作为GUI主要元素的中心小部件。对于你的应用来说，有几个对话框来完成依赖于用户输入的次要操作也是很常见的。

主窗口将继承QMainWindow来开发主窗口样式的应用程序。从QMainWindow派生的类的实例被认为是应用程序的主窗口，并且应该是唯一的。

QMainWindow为快速构建应用程序的GUI提供了一个框架。这个类有自己的内置布局，它接受以下图形组件：

如果没有中心小部件，就无法创建主窗口。因此，程序必须设置一个中心部件，哪怕它只是一个占位符。在这种情况下，可以使用QWidget对象作为中心小部件。你也可以使用.setcentralwidget()方法设置窗口的中心小部件。主窗口的布局将允许你只有一个中心小部件，但它可以是单个或复合小部件。下面的代码示例向你展示了如何使用QMainWindow创建一个主窗口样式的应用程序：

# main_window.py

"""Main window-style application."""

import sys

from PyQt6.QtWidgets import (
    QApplication,
    QLabel,
    QMainWindow,
    QStatusBar,
    QToolBar,
)

class Window(QMainWindow):
    def __init__(self):
        super().__init__(parent=None)
        self.setWindowTitle("QMainWindow")
        self.setCentralWidget(QLabel("I'm the Central Widget"))
        self._createMenu()
        self._createToolBar()
        self._createStatusBar()

    def _createMenu(self):
        menu = self.menuBar().addMenu("&Menu")
        menu.addAction("&Exit", self.close)

    def _createToolBar(self):
        tools = QToolBar()
        tools.addAction("Exit", self.close)
        self.addToolBar(tools)

    def _createStatusBar(self):
        status = QStatusBar()
        status.showMessage("I'm the Status Bar")
        self.setStatusBar(status)

if __name__ == "__main__":
    app = QApplication([])
    window = Window()
    window.show()
    sys.exit(app.exec())