pyqt5美化界面

原文链接:https://blog.csdn.net/Nirvana_6174/article/details/88427071

qt做界面很方便,但是一般做出来都不是很好看,需要去美化。

这是效果图

是一个做语音识别的小界面。虽然是一个小界面,但是通过这个小界面的美化方法,能够了解类推制作其他的精美界面。

第一步 制作初始界面
qt很方便的特点在于可以使用qt designer 可以随意的拖动控件,这个界面就是使用qt designer来制作。因为比较小内容简单就不想去一行一行敲了。当然也可以不使用,直接使用代码和布局进行设计。

这是初始界面。左上角是三个按钮 中间是两个lable一个按钮。

我使用的是绝对定位没有使用布局,因为这里用不到。

代码

from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtCore import Qt
from PyQt5.QtGui import QPalette
import sys
import qtawesome

class Ui_MainWindow3(object):
def setupUi(self, Ui_MainWindow3):
Ui_MainWindow3.setObjectName(“Ui_MainWindow3”)
Ui_MainWindow3.resize(511, 367)

    self.pushbutton_close = QtWidgets.QPushButton(Ui_MainWindow3)
    self.pushbutton_close.setGeometry(QtCore.QRect(30, 20, 30, 30))
    self.pushbutton_close.setObjectName("pushButton")
    self.pushButton_2 = QtWidgets.QPushButton(Ui_MainWindow3)
    self.pushButton_2.setGeometry(QtCore.QRect(80, 20, 30, 30))
    self.pushButton_2.setObjectName("pushButton_2")
    self.pushbutton_mini = QtWidgets.QPushButton(Ui_MainWindow3)
    self.pushbutton_mini.setGeometry(QtCore.QRect(130, 20, 30, 30))
    self.pushbutton_mini.setObjectName("pushbutton_mini")
    self.text_label = QtWidgets.QLabel(Ui_MainWindow3)
    self.text_label.setGeometry(QtCore.QRect(80, 130, 351, 91))
    self.text_label.setObjectName("text_label")
    self.pushButton = QtWidgets.QPushButton(Ui_MainWindow3)
    self.pushButton.setGeometry(QtCore.QRect(190, 250, 101, 71))
    self.pushButton.setObjectName("pushbutton_close")
    # self.pushbutton_close = QtWidgets.QPushButton(qtawesome.icon('fa5s.microphone',color='red'),"")
    self.label = QtWidgets.QLabel(Ui_MainWindow3)
    self.label.setGeometry(QtCore.QRect(80, 60, 351, 70))
    self.label.setObjectName("label")

    self.retranslateUi(Ui_MainWindow3)
    QtCore.QMetaObject.connectSlotsByName(Ui_MainWindow3)

def retranslateUi(self, Ui_MainWindow3):
    _translate = QtCore.QCoreApplication.translate
    Ui_MainWindow3.setWindowTitle(_translate("Ui_MainWindow3", "Ui_MainWindow3"))
    self.pushbutton_close.setText(_translate("Ui_MainWindow3", ""))
    self.pushButton_2.setText(_translate("Ui_MainWindow3", ""))
    self.pushbutton_mini.setText(_translate("Ui_MainWindow3", ""))
    self.pushButton.setText(_translate("Ui_MainWindow3", ""))
    self.label.setText(_translate("Ui_MainWindow3", "语音识别"))
    self.text_label.setText("点击下面的按钮开始录制音频\n再次点击停止录音开始识别")

if name == ‘main’:
app = QtWidgets.QApplication(sys.argv)
widgets = QtWidgets.QMainWindow()
ui = Ui_MainWindow3()
ui.setupUi(widgets)
widgets.show()
sys.exit(app.exec_())
以上代码除了最后的打开语句,其他都是使用qt-designer 拖动控件然后合成出来的。

第二步 美化主体
拿到合成的代码之后,就要开始进行美化了。

直接在retranslateUi 函数后面添加语句即可。

设置窗口透明度比较好看,原始的边框有点丑,可以给隐藏了,但是隐藏的后果是没法拖动,后面讲解决办法。

使用setcolor 设置背景颜色。

    Ui_MainWindow3.setWindowOpacity(0.9) # 设置窗口透明度
    #Ui_MainWindow3.setAttribute(QtCore.Qt.WA_TranslucentBackground) # 设置窗口背景透明
    Ui_MainWindow3.setWindowFlag(QtCore.Qt.FramelessWindowHint) # 隐藏边框
    pe = QPalette()
    Ui_MainWindow3.setAutoFillBackground(True)
    pe.setColor(QPalette.Window,Qt.lightGray)  #设置背景色
    #pe.setColor(QPalette.Background,Qt.blue)
    Ui_MainWindow3.setPalette(pe)

设置标题和图标

Ui_MainWindow3.setWindowTitle(“语音识别”)
Ui_MainWindow3.setWindowIcon(QIcon(‘Amg.jpg’)) #设置图标
其中Amg.jpg是要设成图标的图片。也可以使用 库qtawesome里面的图标

    spin_icon = qtawesome.icon('fa5s.microphone-alt', color='black')
    #self.pushButton.setIcon(spin_icon)#设置图标
    Ui_MainWindow3.setWindowIcon(spin_icon)

qtawesome库里面有很多精美的图标 https://github.com/spyder-ide/qtawesome 可以到这个链接去找想要的图标,里面有很多种类的图标。

美化到这一步已经很接近了。

第三步美化控件
这个界面的控件有按钮和label只有两类,也是用的最多的两类。

首先美化左上角的三个按钮。美化的效果就是圆形,红 黄 绿色 悬停时颜色会加深。

    self.pushbutton_close.setStyleSheet('''QPushButton{background:#F76677;border-radius:15px;}

QPushButton:hover{background:red;}’’’)
self.pushButton_2.setStyleSheet(’’‘QPushButton{background:#F7D674;border-radius:15px;}
QPushButton:hover{background:yellow;}’’’)
self.pushbutton_mini.setStyleSheet(’’‘QPushButton{background:#6DDF6D;border-radius:15px;}
QPushButton:hover{background:green;}’
setStyleSheet 就是用来美化的,使用的是qss。其实也就是css的美化方式。由于qt刚开始是用在c++后来有了pyqt用于python。这方面的官方文档基于python的目前还没有,直接跳转到c++的。

QPushButton{background:#F76677;border-radius:15px;} QPushButton是控件的属性,然后设置背景色background,设置边界半径(border-radius),注意这里要看原按钮大小,半径大了就没效果,小了不少圆形。

QPushButton:hover{background:red;} hover 意思就是当鼠标到按钮的时候,触发的,这里设置的就是颜色变深。

美化中间靠上的label

self.label.setStyleSheet(’’‘QLabel{color:white;font-size:40px;font-family:Roman times;}’’’)
'QLabel{color:white;font-size:40px;font-family:Roman times;} 这里只是设置了字体颜色,字体大小和字体类型。

中间的label

self.text_label.setStyleSheet(’’‘QLabel{color:darkGray;background:white;border:2px solid #F3F3F5;border-radius:45px;
font-size:14pt; font-weight:400;font-family: Roman times;} ‘’’)
QLabel{color:darkGray;background:white;border:2px solid #F3F3F5;border-radius:45px;
font-size:14pt; font-weight:400;font-family: Roman times;}除了设置字体颜色大小类型外,还设置了边界半径
边界宽度,背景颜色等。

对于label的设置还有 使字体居中显示。

    self.text_label.setAlignment(Qt.AlignCenter)
    self.label.setAlignment(Qt.AlignCenter)

最下面的按钮美化

    spin_icon = qtawesome.icon('fa5s.microphone-alt', color='white')
    self.pushButton.setIcon(spin_icon)#设置图标
    self.pushButton.setIconSize(QtCore.QSize(50,50))
    self.pushButton.setStyleSheet('''QPushButton{border:none;}
    QPushButton:hover{color:white;
                border:2px solid #F3F3F5;
                border-radius:35px;
                background:darkGray;}''')

首先设置按钮,使用qtawesome库中的一个图标,设置到上面去。

然后使用setStyleSheet 进行设计,边框为0,当鼠标悬停到按钮时,会出来一个白色的边框(border),设置边界半径使它看起来好看,而且背景颜色变深点。背景是gray 变成darkGray

.现在美化基本上就到这里了。已经完成了。

其他控件的一些美化
进度条的设置美化

self.progressBar.setStyleSheet(’’’
QProgressBar::chunk {
background-color: darkgray;
}
‘’’) #进度条跑的时候 颜色改变
self.progressBar.setTextVisible(False) # 不显示进度条文字
对于一个布局内的部分控件进行集体的美化,left_wideget可以看成是一个布局内的控件的集合。

self.left_widget.setStyleSheet(’’’
QPushButton{border:none;color:white;padding-left:5px;
height:35px;
font-size:15px;
padding-right:10px;}
QPushButton#left_label{
border:none;
border-bottom:1px solid white;
font-size:20px;
font-weight:700;
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
}
QWidget#left_widget{
background:Gray;
border-top:1px solid white;
border-bottom:1px solid white;
border-left:1px solid white;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
}
QPushButton#left_button:hover{ color:white;
border:2px solid #F3F3F5;
border-radius:15px;
background:black;}
‘’’)
里面QPushButton 是对里面所有的按钮进行美化, QPushButton#left_label是对left_wideget中对象的名称为left_label的按钮进行美化。

下面一样对对象名为left_widget的qwidget进行美化。最后面是当对象名为left_button的按钮悬停上时进行的美化。

其他相关的
移动隐藏后的边框
上面提到了,当把边框给隐藏掉,边框将无法拖动移动,这个可以通过重写函数来实现。

def mousePressEvent(self, event):
if event.button()==QtCore.Qt.LeftButton:
self.m_flag=True
self.m_Position=event.globalPos()-self.pos() #获取鼠标相对窗口的位置
event.accept()
self.setCursor(QtGui.QCursor(QtCore.Qt.OpenHandCursor)) #更改鼠标图标

def mouseMoveEvent(self, QMouseEvent):
    if QtCore.Qt.LeftButton and self.m_flag:
        self.move(QMouseEvent.globalPos()-self.m_Position)#更改窗口位置
        QMouseEvent.accept()

def mouseReleaseEvent(self, QMouseEvent):
    self.m_flag=False
    self.setCursor(QtGui.QCursor(QtCore.Qt.ArrowCursor))

关闭,最小化
self.pushbutton_close.clicked.connect(self.close) #关闭窗口
self.pushbutton_mini.clicked.connect(self.showMinimized)#最小化窗口
有时候界面设计不当,当最大化界面时就会出错。所以没有设置最大化按钮。

上一篇:Qt信号与槽简介


下一篇:QT QPushButton 通过stylesheet 设置样式