pyQt基础篇--让你成为GUI高手

pyQt基础篇–让你成为GUI高手

GUI: Graphical User Interface(图形用户接口)

---

本篇主要介绍python中使用pyqt绘制图形界面的基本操作，让你快速上手图形界面，实现客户端小工具的快速开发，俗话说，工欲善其事必先利其器，但成神之路，非在一朝一夕，想要成为GUI大神，光是靠本文还是不够，还需要读者自己钻研摸索

---

前言

本篇主要详细讲解pyqt的点击事件，槽函数，布局，样式等，帮助您快速开发。

---

一、点击事件，槽函数

所谓点击事件，就是指按钮，下拉框，面板等，当鼠标双击或者单击时，会触发一些列的操作的过程，而pyqt有着独特的槽函数机制来响应这些点击事件

1.按钮的点击事件

按钮的点击事件，一般是在控件名之后，加上clicked.connect(self.click_event)

例如：

self.pushButton.clicked.connect(self.click_event)

self.click_event是点击事件触发之后调用的函数体

2.单行编辑框的变化事件

self.lineEdit.textChanged.connect(self.changed_event)

3.下拉框点击事件

self.comboBox.currentIndexChanged.connect(self.combox_change)

然后用self.comboBox.currentText()获取当前选中的值

4.面板的点击事件

直接在面板所继承的类中，直接重写 mousePressEvent 方法

5.退出点击事件

直接主面板类中，重写 closeEvent 方法

6.创建槽函数，绑定点击事件

1.创建槽函数

checkedChanged = pyqtSignal(bool)

可以传入布尔值，也可以传入整形，或其他数据类型

2.给槽函数绑定事件

self.checkedChanged.connect(self.checked_event)

3.发射信号，激活槽函数

self.checkedChanged.emit(True)

一般将复杂的操作丢到异步之中，然后，通过发射信号，激活槽函数，从而刷新界面，避免卡顿

异步使用，可参考：https://blog.csdn.net/weixin_43108397/article/details/115313657

二、布局

1.垂直布局和水平布局

仅以垂直布局举例：

import sys
from PyQt5 import QtWidgets
from PyQt5.QtWidgets import QApplication


class DemoWidget(QtWidgets.QWidget):
    def __init__(self):
        super(DemoWidget, self).__init__()

        self.resize(200, 300)

        # 创建垂直布局
        self.verticalLayout = QtWidgets.QVBoxLayout(self)

        # 创建按钮和label标签
        self.pushButton = QtWidgets.QPushButton(self)
        self.label = QtWidgets.QLabel(self)
        self.label.setText('举个例子')

        # 将按钮和标签添加到垂直布局中
        self.verticalLayout.addWidget(self.pushButton)
        self.verticalLayout.addWidget(self.label)

        # 添加spacer控件，使按钮和文本展示在最上层
        spacerItem = QtWidgets.QSpacerItem(20, 40, QtWidgets.QSizePolicy.Minimum, QtWidgets.QSizePolicy.Expanding)
        self.verticalLayout.addItem(spacerItem)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    mainMindow = DemoWidget()
    mainMindow.show()
    sys.exit(app.exec_())

创建控件，并不断往里添加，可自行改变控件样式，水平布局同理
只不过将QtWidgets.QVBoxLayout(self)换成QtWidgets.QHBoxLayout(self)即可

2.栅格布局

和垂直布局，水平布局很像，只不过多了四个参数值

import sys
from PyQt5 import QtWidgets
from PyQt5.QtWidgets import QApplication


class DemoWidget(QtWidgets.QWidget):
    def __init__(self):
        super(DemoWidget, self).__init__()

        self.resize(200, 300)

        # 创建垂直布局
        self.gridLayout = QtWidgets.QGridLayout(self)

        # 创建按钮和label标签
        self.pushButton = QtWidgets.QPushButton(self)
        self.label = QtWidgets.QLabel(self)
        self.label.setText('举个例子,这个例子比较长，举个例子,这个例子比较长')

        # 将按钮和标签添加到垂直布局中
        self.gridLayout.addWidget(self.pushButton, 0, 1, 1, 1)
        
        # 1，0，1，2 分别代表位于第1+1行，0+1列（1，0是索引，对应行列数+1），占1行2列
        self.gridLayout.addWidget(self.label, 1, 0, 1, 2) 

        # 添加spacer控件，使按钮和文本展示在最上层
        spacerItem = QtWidgets.QSpacerItem(20, 40, QtWidgets.QSizePolicy.Minimum, QtWidgets.QSizePolicy.Expanding)
        self.gridLayout.addItem(spacerItem, 2, 0, 1, 1)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    mainMindow = DemoWidget()
    mainMindow.show()
    sys.exit(app.exec_())

三 样式调整

1.按钮样式调整

self.pushButton.setStyleSheet(
            "QPushButton{border:1px;border-radius:5px;padding:2px 4px;color:rgb(0, 0, 0);background-color:rgb(200,200,200)}"
            "QPushButton:hover{background-color:rgb(100,225,225)}"
            "QPushButton:checked{background-color:rgb(135,206,235);color:rgb(0,0,0)}")

可在setStyleSheet中写入css样式

2.tab页标题栏样式调整

self.tabWidget.setStyleSheet("QTabWidget#tabWidget{background-color:rgb(255,0,0);}\
                                     QTabBar::tab{
     padding-left:20px;border:1px solid white;height:40;width:120;background-color:rgb(200,200,200);color:rgb(0, 0, 0);font:10pt '微软雅黑'}\
                                    QTabBar::tab::hover{
     background-color:rgb(100,225,225);color:rgb(0, 0, 0);font:10pt '微软雅黑'}\
                                     QTabBar::tab::selected{
     background-color:rgb(135,206,235);color:rgb(0,0,0);font:10pt '微软雅黑'}");

可自行调整样式

3.下拉框样式调整

self.comboBox.setStyleSheet("#comboBox {\n"
                                    "    border:1px solid black;\n"
                                    "    border-radius:2px;\n"
                                    "    height:25px;\n"
                                    "    width:120px;\n"
                                    "    border-radius:5px;\n"
                                    "}")

# 调整item的高度
self.comboBox.setView(QListView())

4.列表面板样式调整

 # 设置列表页面每列自动分配
        self.tableWidget.horizontalHeader().setSectionResizeMode(QtWidgets.QHeaderView.Stretch)
        # 设置列表页面不能编辑
        self.tableWidget.setEditTriggers(QAbstractItemView.NoEditTriggers)

最常用的列表页面样式

下面，在列表页面单元格居中添加按钮并绑定事件

# 添加按钮
                push_btn = QtWidgets.QPushButton('配置')
                push_btn.setStyleSheet(''' text-align : center;
                                                       background-color : #f0f0f0;
                                                       border : none;
                                                       font-family:'Microsoft Yahei';
                                                       height : 20px;
                                                       width : 44px;
                                                       margin-left : 6px;
                                                       margin-right : 6px;
                                                       color:blue;
                                                       font : 12px  ''')  # 设置样式
                push_btn.clicked.connect(partial(self.click_event, res))

                self.tableWidget_16.setCellWidget(k, 8, push_btn)

总结

灵活运用，举一反三