PyQt5快速入門（六）PyQt5 GUI界面設(shè)計(jì)

PyQt5快速入門（六）PyQt5 GUI界面設(shè)計(jì)

一、窗口風(fēng)格

1、設(shè)置窗口風(fēng)格

Qt實(shí)現(xiàn)的窗口樣式默認(rèn)使用的是當(dāng)前操作系統(tǒng)的原生窗口樣式，在不同操作系統(tǒng)下原生窗口樣式顯示的風(fēng)格是不一樣的。
可以為每個(gè)Widget設(shè)置風(fēng)格：
setStyle(QStyle style)
獲取當(dāng)前平臺(tái)支持的原有QStyle樣式
QStyleFactory.keys()
對(duì)QApplication設(shè)置QStyle樣式
QApplication.setStyle(QStyleFactory.create(“WindowsXP”))
如果其它Widget沒有設(shè)置QStyle，則默認(rèn)使用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())
        # 選擇當(dāng)前窗口風(fēng)格
        index = combo.findText(QApplication.style().objectName(), Qt.MatchFixedString)
        # 設(shè)置當(dāng)前窗口風(fēng)格
        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、設(shè)置窗口樣式

PyQt5使用setWindowFlags（Qt.WindowFlags）函數(shù)設(shè)置窗口樣式。
Qt的窗口類型如下：
Qt.Widget：默認(rèn)窗口，由最大化、最小化、關(guān)閉按鈕
Qt.Window：普通窗口，有最大化、最小化、關(guān)閉按鈕
Qt.Dialog：對(duì)話框窗口，有問號(hào)和關(guān)閉按鈕
Qt.Popup：彈出窗口，窗口無邊框
Qt.ToolTip：提示窗口，窗口無邊框，無任務(wù)欄
Qt.SplashScreen：閃屏，窗口無邊框，無任務(wù)欄
Qt.SubWindow：子窗口，窗口無按鈕，但有標(biāo)題欄
Qt自定義的頂層窗口外觀標(biāo)識(shí)：
Qt.MSWindowsFixedSizeDialogHint：窗口無法調(diào)整大小
Qt.FrameLessWindowHint：窗口無邊框
Qt.CustomWinodwHint：有邊框但無標(biāo)題欄和按鈕，不能移動(dòng)和拖動(dòng)
Qt.WindowTitleHint：添加一個(gè)標(biāo)題欄和一個(gè)關(guān)閉按鈕
Qt.WindowSystemMenuHint：添加系統(tǒng)目錄和一個(gè)關(guān)閉按鈕
Qt.WindowMaximizeButtonHint：激活最大化和關(guān)閉按鈕，禁止最小化按鈕
Qt.WindowMinimizeButtonHint：激活最小化和關(guān)閉按鈕，禁止最大化按鈕
Qt.WindowMinMaxButtonsHint：激活最大化、最小化和關(guān)閉按鈕
Qt.WindowCloseButtonHint：增加一個(gè)關(guān)閉按鈕
Qt.WindowContextHelpButtonHint：增加問號(hào)和關(guān)閉按鈕
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、自定義窗口

自定義一個(gè)無邊框、鋪滿整個(gè)顯示屏的窗口實(shí)現(xiàn)如下：

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()
        # 獲取屏幕可顯示矩形區(qū)域
        rect = desktop.availableGeometry()
        # 設(shè)置窗口尺寸
        self.setGeometry(rect)
        self.show()

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

    sys.exit(app.exec_())

二、繪圖

1、圖像類

Qt中有四個(gè)圖像類，QPixmap、QImage、QPicture、QBitmap。
QPixmap專為繪圖而設(shè)計(jì)，在繪制圖片時(shí)需要QPixmap。
QImage提供了一個(gè)與硬件無關(guān)的圖像表示函數(shù)，可以用于圖片的像素級(jí)訪問。
QPicture是繪圖設(shè)備類，繼承自QPainter，可以使用QPainter的begin函數(shù)在QPicture上繪圖，使用end結(jié)束繪圖，使用QPicture的save函數(shù)將QPainter使用過的繪圖指令保存到文件中。
QBitmap是一個(gè)繼承自QPixmap的便利類，提供了1bit深度的二值圖像的類，提供的單×××像可以用來制作游標(biāo)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
        # 將圖形會(huì)值在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繪制到窗口中。在拖動(dòng)鼠標(biāo)繪制矩形的過程中會(huì)出現(xiàn)重影，鼠標(biāo)拖動(dòng)過程中，屏幕會(huì)刷新很多次，paintEvent函數(shù)會(huì)被執(zhí)行很多次，每次都會(huì)繪制一個(gè)矩形。
為了避免重影，可以使用雙緩沖繪制技術(shù)。即使用兩塊畫布，pix和tempPix，tempPix作為臨時(shí)緩沖區(qū)，當(dāng)拖動(dòng)鼠標(biāo)繪制矩形時(shí)，將內(nèi)容先繪制到tempPix上，然后再將tempPix繪制到界面窗口。當(dāng)釋放鼠標(biāo)完成矩形繪制時(shí)，將tempPix的內(nèi)容復(fù)制到pix緩沖區(qū)，最終完成繪制到窗口。

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樣式設(shè)置

1、QSS語(yǔ)法規(guī)則

QSS（Qt Style Sheets），即Qt樣式表，是用來自定義控件外觀的一種機(jī)制。QSS語(yǔ)法規(guī)則與CSS大體相同，QSS樣式由兩部分組成，選擇器用于指定哪些控件受到影響，聲明用于指定哪些屬性應(yīng)該在控件上進(jìn)行設(shè)置。聲明部分是一系列的“屬性:值”，使用分號(hào)分隔各個(gè)不同的屬性值對(duì)，使用大括號(hào)將所有的聲明包括在內(nèi)。
QPushButton{color:red;}
表示設(shè)置QPushButton及其子類所有實(shí)例的前景色為紅色，QPushButton表示選擇器，指定所有的QPushButton類及其子類都會(huì)受到影響。
可以使用多個(gè)選擇器指定相關(guān)的聲明，使用逗號(hào)將各個(gè)選擇器分隔，如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，用于匹配所有的類及其子類的實(shí)例。
3、屬性選擇器：匹配所有的屬性及屬性值的實(shí)例，如QPushButton[name=”okButton”]將匹配所有的name屬性為okButton的按鈕實(shí)例。
4、類選擇器：.ClassName，如.QPushButton用于匹配所有的QPushButton實(shí)例，但不匹配其子類。
5、ID選擇器：#objectName，如#okButton匹配所有的ID為okButton的控件，ID即為obejctName。
6、后代選擇器：如QDialog QPushButton，匹配所有的QDialog容器中包含的QPushButton，不管是直接的還是間接的。
7、子選擇器：如QDialog > QPushButton，匹配所有的QDialog容器中包含的QPushButton，要求QPushButton的直接父容器是QDialog。
3、QSS子控件
QSS子控件是一種選擇器，通常應(yīng)用在復(fù)雜控件上，如QComboBox，QComboBox有一個(gè)矩形的外邊框，右邊有一個(gè)下拉箭頭，點(diǎn)擊后會(huì)彈出下拉列表。
::drop-down子控件選擇器可以與選擇器組合使用，
QComboBox#combo::drop-down{imge:url(dropdown.png)}表示為指定ID為combo的QComboBox控件的下拉箭頭自定義圖標(biāo)。

4、QSS偽狀態(tài)

QSS偽狀態(tài)選擇器是以：開頭的一個(gè)選擇表達(dá)式，如:hover，表示當(dāng)鼠標(biāo)經(jīng)過時(shí)的狀態(tài)。偽狀態(tài)選擇器限制了當(dāng)控件處于某種狀態(tài)時(shí)才可以使用的QSS規(guī)則，偽狀態(tài)只能描述一個(gè)控件或復(fù)合控件的子控件狀態(tài)，因此只能放在選擇器的最后面。
QComboBox::drop-down:hover{background-color:red;}

5、QDarkStyleSheet

QDarkStyleSheet是一個(gè)用于PyQt應(yīng)用的深黑色樣式表。
GitHub：
https://github.com/ColinDuquesnoy/QDarkStyleSheet

四、設(shè)置窗口背景

窗口背景主要包括背景色和背景圖片。設(shè)置窗口背景主要有三種方法：QSS設(shè)置窗口背景；QPalette設(shè)置窗口背景；paintEvent函數(shù)內(nèi)部使用QPainter繪制窗口背景。

1、QSS設(shè)置窗口背景

通過QSS可以設(shè)置窗口的背景色或背景圖片。

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設(shè)置窗口背景

使用QPalette設(shè)置窗口背景顏色。

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設(shè)置窗口背景圖片時(shí)，需要考慮背景圖片的尺寸，當(dāng)背景圖片的寬度和高度大于窗口的寬度和高度時(shí)，背景圖片將會(huì)平鋪整個(gè)窗口；當(dāng)背景圖片的寬度和高度小于窗口的寬度和高度時(shí)，則加載多個(gè)背景圖片。

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函數(shù)內(nèi)部繪制背景色：

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函數(shù)內(nèi)部繪制背景圖片：

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_())

五、樣式設(shè)置實(shí)例

1、為標(biāo)簽添加背景圖片

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、設(shè)置窗口透明

如果窗口是透明的，通過窗口可以看到桌面，要想實(shí)現(xiàn)窗口的透明效果，需要設(shè)置窗口透明度。透明度取值范圍為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代碼與業(yè)務(wù)邏輯代碼進(jìn)行分離，通常會(huì)定義QSS文件，編寫各種控件的樣式，最后使用QApplication.setStyleSheet或QWidget.setStyleSheet設(shè)置QSS。
通常編寫QSS文件需要加載到qrc資源文件中，然后編寫一個(gè)公用類加載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)