浏览量: 63 次浏览

pyqt5美化界面

2020年2月24日 0 作者 Nie Hen

前言

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

效果图
enter description here

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

制作初始界面

qt很方便的特点在于可以使用qt designer 可以随意的拖动控件,这个界面就是使用qt designer来制作。

因为比较小内容简单就不想去一行一行敲了。当然也可以不使用,直接使用代码和布局进行设计。

enter description here

这是初始界面。左上角是三个按钮  中间是两个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 函数后面添加语句即可。

  1. 设置窗口透明度
    设置背景颜色。
            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)

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

  1. 设置标题和图标

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 
可以到这个链接去找想要的图标,里面有很多种类的图标。

  1. 效果图
    enter description here

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

美化控件

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

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

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 意思就是当鼠标到按钮的时候,触发的,这里设置的就是颜色变深。

  1. 美化中间靠上的label 
    > self.label.setStyleSheet(”’QLabel{color:white;font-size:40px;font-family:Roman times;}”’)

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

  1. 美化中间的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)

  1. 最下面的按钮美化  

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

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

其他控件的一些美化

  1. 进度条的设置美化 

self.progressBar.setStyleSheet(”’
QProgressBar::chunk {
background-color: darkgray;
}
”’) #进度条跑的时候 颜色改变
self.progressBar.setTextVisible(False) # 不显示进度条文字

  1. 对于一个布局内的部分控件进行集体的美化
    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的按钮悬停上时进行的美化。

else

  1. 移动隐藏后的边框

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

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))
  1. 关闭,最小化

self.pushbutton_close.clicked.connect(self.close) #关闭窗口
self.pushbutton_mini.clicked.connect(self.showMinimized)#最小化窗口

有时候界面设计不当,当最大化界面时就会出错。所以没有设置最大化按钮。

未完待续…..

本文写于2019-03-12 21:14:50
原文链接