您的位置:首页 > 产品设计 > UI/UE

PyQt5快速入门(六)PyQt5 GUI界面设计

2019-07-27 17:00 2031 查看

PyQt5快速入门(六)PyQt5 GUI界面设计

一、窗口风格

1、设置窗口风格

Qt实现的窗口样式默认使用的是当前操作系统的原生窗口样式,在不同操作系统下原生窗口样式显示的风格是不一样的。
可以为每个Widget设置风格:

setStyle(QStyle style)

获取当前平台支持的原有QStyle样式
QStyleFactory.keys()

对QApplication设置QStyle样式
QApplication.setStyle(QStyleFactory.create(“WindowsXP”))

如果其它Widget没有设置QStyle,则默认使用QApplication使用的QStyle。

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
self.layout = QHBoxLayout()
label = QLabel("Set Style:",self)
combo = QComboBox(self)
combo.addItems(QStyleFactory.keys())
# 选择当前窗口风格
index = combo.findText(QApplication.style().objectName(), Qt.MatchFixedString)
# 设置当前窗口风格
combo.setCurrentIndex(index)
combo.activated[str].connect(self.onCurrentIndexChanged)

self.layout.addWidget(label)
self.layout.addWidget(combo)

self.setLayout(self.layout)
self.setWindowTitle("Application Style")
self.resize(300, 100)

def onCurrentIndexChanged(self, style):
QApplication.setStyle(style)

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()

sys.exit(app.exec_())

2、设置窗口样式

PyQt5使用setWindowFlags(Qt.WindowFlags)函数设置窗口样式。
Qt的窗口类型如下:
Qt.Widget:默认窗口,由最大化、最小化、关闭按钮
Qt.Window:普通窗口,有最大化、最小化、关闭按钮
Qt.Dialog:对话框窗口,有问号和关闭按钮
Qt.Popup:弹出窗口,窗口无边框
Qt.ToolTip:提示窗口,窗口无边框,无任务栏
Qt.SplashScreen:闪屏,窗口无边框,无任务栏
Qt.SubWindow:子窗口,窗口无按钮,但有标题栏
Qt自定义的顶层窗口外观标识:
Qt.MSWindowsFixedSizeDialogHint:窗口无法调整大小
Qt.FrameLessWindowHint:窗口无边框
Qt.CustomWinodwHint:有边框但无标题栏和按钮,不能移动和拖动
Qt.WindowTitleHint:添加一个标题栏和一个关闭按钮
Qt.WindowSystemMenuHint:添加系统目录和一个关闭按钮
Qt.WindowMaximizeButtonHint:激活最大化和关闭按钮,禁止最小化按钮
Qt.WindowMinimizeButtonHint:激活最小化和关闭按钮,禁止最大化按钮
Qt.WindowMinMaxButtonsHint:激活最大化、最小化和关闭按钮
Qt.WindowCloseButtonHint:增加一个关闭按钮
Qt.WindowContextHelpButtonHint:增加问号和关闭按钮
Qt.WindowStaysOnTopHint:窗口始终处于顶层位置
Qt.WindowStaysOnBottomHint:窗口始终处于底层位置

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("MainWindow")
self.setWindowFlags(Qt.WindowMinMaxButtonsHint | Qt.WindowCloseButtonHint)
self.resize(400, 200)

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()

sys.exit(app.exec_())

3、自定义窗口

自定义一个无边框、铺满整个显示屏的窗口实现如下:

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("MainWindow")
self.setWindowFlags(Qt.WindowMinMaxButtonsHint | Qt.WindowCloseButtonHint)
self.setStyleSheet("background-color:blue;")

def showMaximized(self):
# 获取桌面控件
desktop = QApplication.desktop()
# 获取屏幕可显示矩形区域
rect = desktop.availableGeometry()
# 设置窗口尺寸
self.setGeometry(rect)
self.show()

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.showMaximized()

sys.exit(app.exec_())

二、绘图

1、图像类

Qt中有四个图像类,QPixmap、QImage、QPicture、QBitmap。
QPixmap专为绘图而设计,在绘制图片时需要QPixmap。
QImage提供了一个与硬件无关的图像表示函数,可以用于图片的像素级访问。
QPicture是绘图设备类,继承自QPainter,可以使用QPainter的begin函数在QPicture上绘图,使用end结束绘图,使用QPicture的save函数将QPainter使用过的绘图指令保存到文件中。
QBitmap是一个继承自QPixmap的便利类,提供了1bit深度的二值图像的类,提供的单×××像可以用来制作游标QCursor或者画刷QBrush。

2、绘图

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
self.pix = QPixmap(400, 400)
self.pix.fill(Qt.white)
self.lastPoint = QPoint()
self.endPoint = QPoint()
self.setWindowFlags(Qt.WindowTitleHint)
self.resize(400, 400)

def paintEvent(self, event):
painter = QPainter(self.pix)
painter.drawLine(self.lastPoint, self.endPoint)
self.lastPoint = self.endPoint
painter = QPainter(self)
painter.drawPixmap(0, 0, self.pix)

def mouseMoveEvent(self, event):
if event.buttons() and Qt.LeftButton:
self.endPoint = event.pos()
self.update()

def mousePressEvent(self, event):
if event.button() == Qt.LeftButton:
self.lastPoint = event.pos()
self.endPoint = self.lastPoint

def mouseReleaseEvent(self, event):
if event.button() == Qt.LeftButton:
self.endPoint = event.pos()
self.update()

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()

sys.exit(app.exec_())

3、双缓冲绘图

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
self.pix = QPixmap(400, 400)
self.pix.fill(Qt.white)
self.lastPoint = QPoint()
self.endPoint = QPoint()
self.setWindowFlags(Qt.WindowTitleHint)
self.resize(400, 400)

def paintEvent(self, event):
painter1 = QPainter(self)
x = self.lastPoint.x()
y = self.lastPoint.y()
w = self.endPoint.x() - x
h = self.endPoint.y() - y
# 将图形会值在PixMap画布
painter2 = QPainter(self.pix)
painter2.drawRect(x, y, w, h)
# 将pximap绘制到窗口
painter1.drawPixmap(0, 0, self.pix)

def mouseMoveEvent(self, event):
if event.buttons() and Qt.LeftButton:
self.endPoint = event.pos()
self.update()

def mousePressEvent(self, event):
if event.button() == Qt.LeftButton:
self.lastPoint = event.pos()
self.endPoint = self.lastPoint

def mouseReleaseEvent(self, event):
if event.button() == Qt.LeftButton:
self.endPoint = event.pos()
self.update()

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()

sys.exit(app.exec_())

上述代码中,首先使用painter将图形绘制在Pixmap上,然后将Pixmap绘制到窗口中。在拖动鼠标绘制矩形的过程中会出现重影,鼠标拖动过程中,屏幕会刷新很多次,paintEvent函数会被执行很多次,每次都会绘制一个矩形。
为了避免重影,可以使用双缓冲绘制技术。即使用两块画布,pix和tempPix,tempPix作为临时缓冲区,当拖动鼠标绘制矩形时,将内容先绘制到tempPix上,然后再将tempPix绘制到界面窗口。当释放鼠标完成矩形绘制时,将tempPix的内容复制到pix缓冲区,最终完成绘制到窗口。

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
self.pix = QPixmap(400, 400)
self.pix.fill(Qt.white)
self.lastPoint = QPoint()
self.endPoint = QPoint()
self.setWindowFlags(Qt.WindowTitleHint)
self.resize(400, 400)
self.isDrawing = False
self.tempPix = QPixmap()

def paintEvent(self, event):
painter = QPainter(self)
x = self.lastPoint.x()
y = self.lastPoint.y()
w = self.endPoint.x() - x
h = self.endPoint.y() - y
if self.isDrawing:
self.tempPix = self.pix
pp = QPainter(self.tempPix)
pp.drawRect(x, y, w, h)
painter.drawPixmap(0, 0, self.tempPix)
else:
pp = QPainter(self.pix)
pp.drawRect(x, y, w, h)
painter.drawPixmap(0, 0, self.pix)

def mousePressEvent(self, event):
if event.button() == Qt.LeftButton:
self.lastPoint = event.pos()
self.endPoint = self.lastPoint
self.isDrawing = True

def mouseReleaseEvent(self, event):
if event.button() == Qt.LeftButton:
self.endPoint = event.pos()
self.update()
self.isDrawing = False

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()

sys.exit(app.exec_())

三、QSS样式设置

1、QSS语法规则

QSS(Qt Style Sheets),即Qt样式表,是用来自定义控件外观的一种机制。QSS语法规则与CSS大体相同,QSS样式由两部分组成,选择器用于指定哪些控件受到影响,声明用于指定哪些属性应该在控件上进行设置。声明部分是一系列的“属性:值”,使用分号分隔各个不同的属性值对,使用大括号将所有的声明包括在内。

QPushButton{color:red;}

表示设置QPushButton及其子类所有实例的前景色为红色,QPushButton表示选择器,指定所有的QPushButton类及其子类都会受到影响。
可以使用多个选择器指定相关的声明,使用逗号将各个选择器分隔,如
QPushButton,QLineEdit{color:red;}

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
button = QPushButton("Button")
self.layout = QHBoxLayout()
self.layout.addWidget(button)
self.setLayout(self.layout)
qss = "QPushButton{color:red;}"
self.setStyleSheet(qss)

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()

sys.exit(app.exec_())

2、QSS选择器类型

QSS选择器有如下几种类型:
1、通配选择器:

*
,匹配所有的控件
2、类型选择器,如QPushButton,用于匹配所有的类及其子类的实例。
3、属性选择器:匹配所有的属性及属性值的实例,如QPushButton[name=”okButton”]将匹配所有的name属性为okButton的按钮实例。
4、类选择器:.ClassName,如.QPushButton用于匹配所有的QPushButton实例,但不匹配其子类。
5、ID选择器:#objectName,如#okButton匹配所有的ID为okButton的控件,ID即为obejctName。
6、后代选择器:如QDialog QPushButton,匹配所有的QDialog容器中包含的QPushButton,不管是直接的还是间接的。
7、子选择器:如QDialog > QPushButton,匹配所有的QDialog容器中包含的QPushButton,要求QPushButton的直接父容器是QDialog。
3、QSS子控件
QSS子控件是一种选择器,通常应用在复杂控件上,如QComboBox,QComboBox有一个矩形的外边框,右边有一个下拉箭头,点击后会弹出下拉列表。
::drop-down子控件选择器可以与选择器组合使用,
QComboBox#combo::drop-down{imge:url(dropdown.png)}
表示为指定ID为combo的QComboBox控件的下拉箭头自定义图标。

4、QSS伪状态

QSS伪状态选择器是以:开头的一个选择表达式,如:hover,表示当鼠标经过时的状态。伪状态选择器限制了当控件处于某种状态时才可以使用的QSS规则,伪状态只能描述一个控件或复合控件的子控件状态,因此只能放在选择器的最后面。

QComboBox::drop-down:hover{background-color:red;}

5、QDarkStyleSheet

QDarkStyleSheet是一个用于PyQt应用的深黑色样式表。
GitHub:
https://github.com/ColinDuquesnoy/QDarkStyleSheet

四、设置窗口背景

窗口背景主要包括背景色和背景图片。设置窗口背景主要有三种方法:QSS设置窗口背景;QPalette设置窗口背景;paintEvent函数内部使用QPainter绘制窗口背景。

1、QSS设置窗口背景

通过QSS可以设置窗口的背景色或背景图片。

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
self.setObjectName("mainWindow")
qss = "QWidget#mainWindow{background-color:black;}"
# qss = "QWidget#mainWindow{border-image:url(background.png);}"
self.setStyleSheet(qss)

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()

sys.exit(app.exec_())

2、QPalette设置窗口背景

使用QPalette设置窗口背景颜色。

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
palette = QPalette()
palette.setColor(QPalette.Background, Qt.black)
self.setPalette(palette)

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()

sys.exit(app.exec_())

使用QPalette设置窗口背景图片时,需要考虑背景图片的尺寸,当背景图片的宽度和高度大于窗口的宽度和高度时,背景图片将会平铺整个窗口;当背景图片的宽度和高度小于窗口的宽度和高度时,则加载多个背景图片。

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
palette = QPalette()
palette.setBrush(QPalette.Background, QBrush(QPixmap("background.png")))
self.setPalette(palette)

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()

sys.exit(app.exec_())

3、paintEvent绘制窗口背景

在paintEvent函数内部绘制背景色:

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("MainWindow")

def paintEvent(self, event):
painter = QPainter(self)
painter.setBrush(Qt.black)
painter.drawRect(self.rect())

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()

sys.exit(app.exec_())

在paintEvent函数内部绘制背景图片:

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("MainWindow")

def paintEvent(self, event):
painter = QPainter(self)
pixmap = QPixmap("background.png")
painter.drawPixmap(self.rect(), pixmap)

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()

sys.exit(app.exec_())

五、样式设置实例

1、为标签添加背景图片

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("MainWindow")
self.layout = QVBoxLayout()
label = QLabel()
label.setStyleSheet("QLabel{border-image:url(background.png);}")
label.setFixedHeight(400)
label.setFixedWidth(600)
self.layout.addWidget(label)
self.setLayout(self.layout)

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()

sys.exit(app.exec_())

2、为按钮添加背景图片

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("MainWindow")
self.layout = QVBoxLayout()
button = QPushButton("Button")
button.setMaximumSize(60, 30)
button.setObjectName("okButton")
button.setStyleSheet("QPushButton#okButton{border-image:url(background.png);}")

self.layout.addWidget(button)
self.setLayout(self.layout)

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()

sys.exit(app.exec_())

3、缩放图片

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("MainWindow")
self.layout = QVBoxLayout()
label = QLabel()
img = QImage("background.png")
result = img.scaled(label.width(), label.height(),Qt.IgnoreAspectRatio, Qt.SmoothTransformation)
label.setPixmap(QPixmap.fromImage(result))

self.layout.addWidget(label)
self.setLayout(self.layout)

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()

sys.exit(app.exec_())

4、设置窗口透明

如果窗口是透明的,通过窗口可以看到桌面,要想实现窗口的透明效果,需要设置窗口透明度。透明度取值范围为0(完全透明)到1(不透明)。

import sys
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *

class MainWindow(QWidget):

def __init__(self, parent=None):
super().__init__(parent)
self.setWindowTitle("MainWindow")
self.setWindowOpacity(0.5)

if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()

sys.exit(app.exec_())

5、加载QSS

Qt中,为了降低耦合性,将UI代码与业务逻辑代码进行分离,通常会定义QSS文件,编写各种控件的样式,最后使用QApplication.setStyleSheet或QWidget.setStyleSheet设置QSS。
通常编写QSS文件需要加载到qrc资源文件中,然后编写一个公用类加载QSS。

class CommonHelper(object):
@staticmethod
def setStyleSheet(filename):
if filename is not None:
style = ""
with open(filename, "r") as f:
style = f.read()
qApp.setStyleSheet(style)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: