前言
自用的pyqt5界面優(yōu)化美化代碼,方便自己寫界面時(shí)復(fù)制,也順便造福廣大網(wǎng)友吧!
首先安裝基礎(chǔ)工具:
Pycharm配置QtDesigner(PyUIC、PyRcc)
并懂得如何規(guī)范化創(chuàng)建qt界面:
QtDesigner規(guī)范創(chuàng)建應(yīng)用界面
文章將持續(xù)更新.......
一、QtDesigner內(nèi)的編程(QSS)
1. 按鈕變化
#pushButton_create_user{
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
border: 3px solid rgb(0,0,0);
border-radius:10px
}
#pushButton_create_user:hover{
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
}
#pushButton_create_user:pressed{
padding-top:5px;
padding-left:5px
}
鼠標(biāo)不置于其上效果:
鼠標(biāo)置于其上但不點(diǎn)擊效果:
點(diǎn)擊效果(字體往右下角移動(dòng)5px):
2.邊框和圓角
border:2px solid rgb(186,186,186);
border-radius:10px
效果:
3.無邊框和按住指令
#pushButton_login{
border:none;
}
#pushButton_login:focus{
color:rgb(186,186,186);
}
按住效果:
松開效果:
4.指定圓角和插入圖片(拉伸和堆疊)
border-image: url(:/images/001.jpg);
border-top-left-radius:30px;
border-bottom-left-radius:30px
效果:
background-image: url(:/images/001.jpg);
border-top-left-radius:30px;
border-bottom-left-radius:30px
5.只有下劃線的透明輸入框
border:none;
border-bottom: 5px solid rgba(0,0,0,255);
background-color: rgba(0,0,0,0);
效果:
6.下拉菜單自定義格式
這個(gè)分為兩個(gè)部分:
1. 表面框的編寫
#comboBox_project{
border-radius:11px;
background-color: rgb(184, 184, 184);
color: rgb(56,56,56);
}
#comboBox_project:hover{
border-radius:0px;
background-color: rgb(184, 184, 184);
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
color: rgb(56,56,56);
}
#comboBox_project::drop-down{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
background-color: rgb(40, 40, 40);
color: rgb(40,40,40);
min-width:30px;
}
#comboBox_project::down-arrow{
image: url(:/icons/arrow-down-filling.png);
height:18px;
width:18px;
}
效果:
鼠標(biāo)放上去后效果:
2.下拉內(nèi)容框的編寫
重點(diǎn):
下拉內(nèi)容框的編輯,因?yàn)橹挥肣T表達(dá)式編輯是沒有效果的,所以生成UI后必須要在py文件內(nèi)加上這段。
self.newlist = QtWidgets.QListWidget()
self.comboBox_project.setModel(self.newlist.model())
self.comboBox_project.setView(self.newlist)
表達(dá)式:
#comboBox_project QAbstractItemView{
font-size:20px;
font-weight:bold;
}
#comboBox_project QAbstractItemView::item{
color: rgb(40, 40, 40);
height:30px;
selection-color: rgb(186,186,186);
background-color:rgb(80, 80, 80);
}
效果:
7.自用QSS(不做任何說明)
界面效果:
# 1
QLabel{
border-radius:4px;
background-color: rgb(80, 80, 80);
font: 20pt "微軟雅黑";
font-weight:bold;
color: rgb(187,187,187);
}
QSlider::handle:horizontal{
background-color: rgb(80, 80, 80);
}
# 2
QPushButton{
border-radius:5px;
font: 14pt "微軟雅黑";
font-weight:bold;
border:3px solid rgb(184,184,184);
background-color: rgb(184, 184, 184);
color: rgb(56,56,56);
}
QPushButton:hover{
border-radius:5px;
color: rgb(184, 184, 184);
background-color: rgb(56,56,56);
}
QPushButton:pressed{
padding-top:5px;
padding-left:5px;
}
# 3
#widget_status{
background-color: rgb(83, 83, 83);
border-top-left-radius:10px;
border-top-right-radius:10px;
}
#label_title{
color: rgb(183, 183, 183);
font: 25pt "微軟雅黑";
font-weight:bold;
}
# 4
#comboBox_project{
border-radius:11px;
background-color: rgb(184, 184, 184);
color: rgb(56,56,56);
font: 15pt "微軟雅黑";
font-weight:bold;
}
#comboBox_project:hover{
border-radius:0px;
background-color: rgb(184, 184, 184);
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
color: rgb(56,56,56);
}
#comboBox_project::drop-down{
border-top-right-radius:5px;
border-bottom-right-radius:5px;
background-color: rgb(40, 40, 40);
color: rgb(40,40,40);
min-width:30px;
}
#comboBox_project::down-arrow{
image: url(:/icons/arrow-down-filling.png);
height:18px;
width:18px;
}
#comboBox_project QAbstractItemView{
font: 15pt "微軟雅黑";
font-weight:bold;
}
#comboBox_project QAbstractItemView::item{
color: rgb(40, 40, 40);
height:30px;
selection-color: rgb(186,186,186);
background-color:rgb(80, 80, 80);
}
二、py文件內(nèi)的編程
1.創(chuàng)建無邊框效果
MainWindow.setWindowFlags(QtCore.Qt.FramelessWindowHint)
MainWindow.setAttribute(QtCore.Qt.WA_TranslucentBackground)
添加至開頭:
效果(結(jié)合2的圖片來看):
2.創(chuàng)建陰影效果
self.label.setGraphicsEffect(QtWidgets.QGraphicsDropShadowEffect(blurRadius=25, xOffset=0, yOffset=0))
self.pushButton_login.setGraphicsEffect(QtWidgets.QGraphicsDropShadowEffect(blurRadius=25, xOffset=3, yOffset=3))
添加至末尾:
效果:
3.無邊框拖動(dòng)效果(全界面均可)
def __init__(self): # 在初始化方法中設(shè)定m_flag為false
super().__init__()
self.m_flag = False
def mousePressEvent(self, event):
if event.button() == QtCore.Qt.LeftButton and self.isMaximized() == False:
self.m_flag = True
self.m_position = event.globalPos() - self.pos()
event.accept()
self.setCursor(QtGui.QCursor(QtCore.Qt.OpenHandCursor))
def mouseMoveEvent(self, mouse_event):
if QtCore.Qt.LeftButton and self.m_flag:
self.move(mouse_event.globalPos() - self.m_position)
mouse_event.accept()
def mouseReleaseEvent(self, mouse_event):
self.m_flag = False
self.setCursor(QtGui.QCursor(QtCore.Qt.ArrowCursor))
添加至調(diào)用類的設(shè)定中:
效果(無按鈕和框的位置都可以進(jìn)行長(zhǎng)按移動(dòng)):
?。?!注意:若是初始化方法沒有定義m_flag為False,直接拖動(dòng)窗口內(nèi)的按鈕,程序?qū)?huì)因?yàn)槿鄙賛_flag參數(shù)而崩潰
4.無邊框的最大化
首先先規(guī)范創(chuàng)建可自由變化的UI,不規(guī)范化創(chuàng)建,縮放必定有問題。
參考:QtDesigner規(guī)范創(chuàng)建應(yīng)用界面
代碼分兩部分:
self.ui.pushButton_resize.clicked.connect(self.resize_win)
放置于類ui調(diào)用后。
def resize_win(self):
if self.isMaximized():
self.showNormal()
self.ui.pushButton_resize.setIcon(QtGui.QIcon(":/icons/fullscreen-expand.png"))
else:
self.showMaximized()
self.ui.pushButton_resize.setIcon(QtGui.QIcon(":/icons/fullscreen-shrink.png"))
放置于類方法函數(shù)即可。
效果:
5.滑動(dòng)條顯示數(shù)值
使用到了horizontalSlider和QLabel。
分為兩塊,都添加于PyUIC生成的UI文件中:
self.horizontalSlider_hole.valueChanged.connect(self.sl_value_hole)
用ctrl+F快速尋找控件位置然后添加:
def sl_value_hole(self):
sl1 = self.horizontalSlider_hole.value()
sl2 = ' ' + str(sl1) + '%'
self.label_percent_hole.setText(sl2)
這個(gè)函數(shù)添加到末尾即可。
效果:
6.點(diǎn)擊QLabel變化事件
在PyUIC生成的py文件內(nèi)添加:
class MyQLabel(QtWidgets.QLabel):
# 自定義信號(hào), 注意信號(hào)必須為類屬性
button_clicked_signal = QtCore.pyqtSignal(int)
def __init__(self, parent=None):
super(MyQLabel, self).__init__(parent)
self.i = 0
def mouseReleaseEvent(self, QMouseEvent):
self.i += 1
self.button_clicked_signal.emit(self.i)
# 可在外部與槽函數(shù)連接
def connect_customized_slot(self, func):
self.button_clicked_signal.connect(func)
ctrl+F迅速找到你要改的QLabel控件:
self.label = MyQLabel(self.widget)
self.label.connect_customized_slot(self.change_text)
在py最后(類方法)編寫你要實(shí)現(xiàn)的函數(shù),如我的,點(diǎn)擊后更改文字:
def change_text(self, flag):
if flag % 2 == 1:
_translate = QtCore.QCoreApplication.translate
font = QtGui.QFont()
font.setFamily("微軟雅黑")
font.setPointSize(18)
self.label.setFont(font)
self.label.setText(_translate("MainWindow", "Design By LJK"))
else:
_translate = QtCore.QCoreApplication.translate
font = QtGui.QFont()
font.setFamily("微軟雅黑")
font.setPointSize(35)
font.setBold(False)
font.setItalic(False)
font.setWeight(9)
self.label.setFont(font)
self.label.setText(_translate("MainWindow", "APMH 2022"))
效果:
7.雙擊標(biāo)題欄放大窗口,只有拖動(dòng)標(biāo)題欄才能移動(dòng)窗口
重新定義Widget,放置于PyUIC生成的py文件中:
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtWidgets import QApplication, QWidget, QHBoxLayout, QStyleOption, QStyle
from PyQt5.QtGui import QPainter
from PyQt5.QtCore import pyqtSignal
# 定義標(biāo)題欄
class MyWidget(QtWidgets.QWidget):
signal_resize = pyqtSignal(int)
signal_move = pyqtSignal(int, str)
def __init__(self, parent=None):
super(MyWidget, self).__init__(parent)
self.setObjectName('widget_status')
self.db = 0
self.m_flag = False
# 重寫paintEvent 否則不能使用樣式表定義外觀
def paintEvent(self, evt):
opt = QStyleOption()
opt.initFrom(self)
painter = QPainter(self)
# 反鋸齒
painter.setRenderHint(QPainter.Antialiasing)
self.style().drawPrimitive(QStyle.PE_Widget, opt, painter, self)
def mouseDoubleClickEvent(self, a0: QtGui.QMouseEvent) -> None:
self.db = 1
self.signal_resize.emit(self.db)
def mousePressEvent(self, event):
if event.button() == QtCore.Qt.LeftButton and self.isMaximized() == False:
self.m_flag = True
self.m_position = event.pos()
event.accept()
self.setCursor(QtGui.QCursor(QtCore.Qt.OpenHandCursor))
def mouseMoveEvent(self, QMouseEvent):
if QtCore.Qt.LeftButton and self.m_flag:
self.move_pos = QMouseEvent.globalPos() - self.m_position
self.move_pos = str(self.move_pos)
QMouseEvent.accept()
# 判斷鼠標(biāo)位置切換鼠標(biāo)手勢(shì)
self.signal_move.emit(1, self.move_pos)
def mouseReleaseEvent(self, QMouseEvent):
self.m_flag = False
self.setCursor(QtGui.QCursor(QtCore.Qt.ArrowCursor))
然后更改你的標(biāo)題欄widget為MyWidget。
與新寫的mainwindow類進(jìn)行對(duì)接,寫在類初始化方法內(nèi):
self.ui.widget_status.signal_resize.connect(self.resize_db)
self.ui.widget_status.signal_move.connect(self.move_lf)
將以下寫入mainwindow的類方法內(nèi):
def move_lf(self, flag, m_pos):
move_pos = m_pos
str_pos = move_pos[20:].split(', ')
int_x_pos = int(str_pos[0])
int_y_pos = int(str_pos[1][:-1])
if flag == 1:
self.move(QPoint(int_x_pos, int_y_pos))
def resize_win(self):
if self.isMaximized():
self.showNormal()
self.ui.pushButton_resize.setIcon(QtGui.QIcon(":/icons/fullscreen-expand.png"))
else:
self.showMaximized()
self.ui.pushButton_resize.setIcon(QtGui.QIcon(":/icons/fullscreen-shrink.png"))
def resize_db(self, flag):
if flag == 1:
self.resize_win()
效果:
8.根據(jù)屏幕尺寸設(shè)置打開時(shí)窗口大小
因?yàn)槌绦蛞萌ゲ煌碾娔X,屏幕分辨率會(huì)有差別,故而需要自適應(yīng)調(diào)整:
self.desktop = QApplication.desktop()
self.screenRect = self.desktop.screenGeometry()
self.screenheight = self.screenRect.height()
self.screenwidth = self.screenRect.width()
self.height = int(self.screenheight * 0.5) # 這里改變比例
self.width = int(self.screenwidth * 0.5)
print("Screen height {}".format(self.screenheight))
print("Screen width {}".format(self.screenwidth))
self.resize(self.width, self.height)
放置于重寫類的setupUi后:
效果:
(效果會(huì)局限于你縮寫的控件最小大?。?br>
9.自由拉伸無邊框應(yīng)用的尺寸
先看效果:
首先還是先規(guī)范化創(chuàng)建窗口并打開MouseTracking:點(diǎn)擊查看教程
寫入mainwindow初始化方法中:
self._padding = 7 # 設(shè)置邊界寬度為7
self.initDrag()
寫入mainwindow類方法:
def initDrag(self):
# 設(shè)置鼠標(biāo)跟蹤判斷扳機(jī)默認(rèn)值,可以直接寫入初始化方法中
self._move_drag = False
self._corner_drag = False
self._bottom_drag = False
self._right_drag = False
def mousePressEvent(self, event):
# 重寫鼠標(biāo)點(diǎn)擊的事件
if (event.button() == Qt.LeftButton) and (event.pos() in self._corner_rect):
# 鼠標(biāo)左鍵點(diǎn)擊右下角邊界區(qū)域
self._corner_drag = True
event.accept()
elif (event.button() == Qt.LeftButton) and (event.pos() in self._right_rect):
# 鼠標(biāo)左鍵點(diǎn)擊右側(cè)邊界區(qū)域
self._right_drag = True
event.accept()
elif (event.button() == Qt.LeftButton) and (event.pos() in self._bottom_rect):
# 鼠標(biāo)左鍵點(diǎn)擊下側(cè)邊界區(qū)域
self._bottom_drag = True
event.accept()
def mouseMoveEvent(self, QMouseEvent):
# 判斷鼠標(biāo)位置切換鼠標(biāo)手勢(shì)
if QMouseEvent.pos() in self._corner_rect:
self.setCursor(Qt.SizeFDiagCursor)
elif QMouseEvent.pos() in self._bottom_rect:
self.setCursor(Qt.SizeVerCursor)
elif QMouseEvent.pos() in self._right_rect:
self.setCursor(Qt.SizeHorCursor)
else:
self.setCursor(Qt.ArrowCursor)
# 當(dāng)鼠標(biāo)左鍵點(diǎn)擊不放及滿足點(diǎn)擊區(qū)域的要求后,分別實(shí)現(xiàn)不同的窗口調(diào)整
if Qt.LeftButton and self._right_drag:
# 右側(cè)調(diào)整窗口寬度
self.resize(QMouseEvent.pos().x(), self.height())
QMouseEvent.accept()
elif Qt.LeftButton and self._bottom_drag:
# 下側(cè)調(diào)整窗口高度
self.resize(self.width(), QMouseEvent.pos().y())
QMouseEvent.accept()
elif Qt.LeftButton and self._corner_drag:
# 右下角同時(shí)調(diào)整高度和寬度
self.resize(QMouseEvent.pos().x(), QMouseEvent.pos().y())
QMouseEvent.accept()
elif Qt.LeftButton and self._move_drag:
# 標(biāo)題欄拖放窗口位置
self.move_lf(QMouseEvent.globalPos() - self.move_DragPosition)
QMouseEvent.accept()
def mouseReleaseEvent(self, QMouseEvent):
self._move_drag = False
self._corner_drag = False
self._bottom_drag = False
self._right_drag = False
10.創(chuàng)建圖標(biāo)
參考自:PyQt5 設(shè)置軟件圖標(biāo)(左上角、任務(wù)欄)、軟件主窗口標(biāo)題
from PyQt5.QtGui import QIcon
import ctypes
ctypes.windll.shell32.SetCurrentProcessExplicitAppUserModelID("myappid")
class WinMain(QMainWindow):
def __init__(self):
super().__init__()
self.ui = Ui_MainWindow()
self.ui.setupUi(self)
self.setWindowIcon(QIcon("./ICON.png"))
self.setWindowTitle(_translate("MainWindow", "expressionRecognition")) #第二個(gè)參數(shù):窗口標(biāo)題
效果:
任務(wù)欄上:文章來源:http://www.zghlxwxcb.cn/news/detail-435348.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-435348.html
到了這里,關(guān)于pyqt5優(yōu)化美化界面代碼的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!