pyqt5美化界面

Nie_Hen

已于 2022-05-23 15:34:52 修改

阅读量7.3w

点赞数 100

分类专栏： python pyqt5 文章标签： pyqt5美化 python界面语音合成界面

于 2019-03-12 21:14:50 首次发布

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

版权

python 同时被 2 个专栏收录

17 篇文章 10 订阅

订阅专栏

pyqt5

5 篇文章 5 订阅

订阅专栏

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)#最小化窗口

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

未完待续.....

如有问题，或有什么建议可发邮箱1639206518@qq.com

Nie_Hen

关注

100
点赞
踩
724

收藏

觉得还不错? 一键收藏
27
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录