文章目录

• 前言
• 一、QtDesigner内的编程(QSS)
• • 1. 按钮变化
  • 2.边框和圆角
  • 3.无边框和按住指令
  • 4.指定圆角和插入图片（拉伸和堆叠）
  • 5.只有下划线的透明输入框
  • 6.下拉菜单自定义格式
  • • 1. 表面框的编写
    • 2.下拉内容框的编写
  • 7.自用QSS（不做任何说明）
• 二、py文件内的编程
• • 1.创建无边框效果
  • 2.创建阴影效果
  • 3.无边框拖动效果（全界面均可）
  • 4.无边框的最大化
  • 5.滑动条显示数值
  • 6.点击QLabel变化事件
  • 7.双击标题栏放大窗口，只有拖动标题栏才能移动窗口
  • 8.根据屏幕尺寸设置打开时窗口大小
  • 9.自由拉伸无边框应用的尺寸
  • 10.创建图标

前言

自用的pyqt5界面优化美化代码，方便自己写界面时复制，也顺便造福广大网友吧！

首先安装基础工具：
Pycharm配置QtDesigner(PyUIC、PyRcc)

并懂得如何规范化创建qt界面：
QtDesigner规范创建应用界面

文章将持续更新.......

一、QtDesigner内的编程(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
}

鼠标不置于其上效果：

鼠标置于其上但不点击效果：

点击效果（字体往右下角移动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.下拉菜单自定义格式

这个分为两个部分：

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;
}

效果：

鼠标放上去后效果：

2.下拉内容框的编写

重点：下拉内容框的编辑，因为只用QT表达式编辑是没有效果的，所以生成UI后必须要在py文件内加上这段。

		self.newlist = QtWidgets.QListWidget()
        self.comboBox_project.setModel(self.newlist.model())
        self.comboBox_project.setView(self.newlist)

表达式：

#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文件内的编程

1.创建无边框效果

MainWindow.setWindowFlags(QtCore.Qt.FramelessWindowHint)
MainWindow.setAttribute(QtCore.Qt.WA_TranslucentBackground)

添加至开头：

效果（结合2的图片来看）：

2.创建阴影效果

self.label.setGraphicsEffect(QtWidgets.QGraphicsDropShadowEffect(blurRadius=25, xOffset=0, yOffset=0))
self.pushButton_login.setGraphicsEffect(QtWidgets.QGraphicsDropShadowEffect(blurRadius=25, xOffset=3, yOffset=3))

添加至末尾：

效果：

3.无边框拖动效果（全界面均可）

    def __init__(self):   # 在初始化方法中设定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))

添加至调用类的设定中：

效果（无按钮和框的位置都可以进行长按移动）：

！！！注意：若是初始化方法没有定义m_flag为False，直接拖动窗口内的按钮，程序将会因为缺少m_flag参数而崩溃

4.无边框的最大化

首先先规范创建可自由变化的UI，不规范化创建，缩放必定有问题。

参考：QtDesigner规范创建应用界面

代码分两部分：

self.ui.pushButton_resize.clicked.connect(self.resize_win)

放置于类ui调用后。

    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"))

放置于类方法函数即可。

效果：

5.滑动条显示数值

使用到了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)

这个函数添加到末尾即可。

效果：

6.点击QLabel变化事件

在PyUIC生成的py文件内添加：

class MyQLabel(QtWidgets.QLabel):
        # 自定义信号, 注意信号必须为类属性
        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)

        # 可在外部与槽函数连接
        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最后（类方法）编写你要实现的函数，如我的，点击后更改文字：

    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.双击标题栏放大窗口，只有拖动标题栏才能移动窗口

重新定义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


# 定义标题栏
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()
            # 判断鼠标位置切换鼠标手势
            self.signal_move.emit(1, self.move_pos)

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

然后更改你的标题栏widget为MyWidget。

与新写的mainwindow类进行对接，写在类初始化方法内：

        self.ui.widget_status.signal_resize.connect(self.resize_db)
        self.ui.widget_status.signal_move.connect(self.move_lf)

将以下写入mainwindow的类方法内：

    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.根据屏幕尺寸设置打开时窗口大小

因为程序要用去不同的电脑，屏幕分辨率会有差别，故而需要自适应调整：

        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后：

效果：
（效果会局限于你缩写的控件最小大小）

9.自由拉伸无边框应用的尺寸

先看效果：

首先还是先规范化创建窗口并打开MouseTracking：点击查看教程

写入mainwindow初始化方法中：

self._padding = 7  # 设置边界宽度为7
self.initDrag()

写入mainwindow类方法：

    def initDrag(self):
        # 设置鼠标跟踪判断扳机默认值，可以直接写入初始化方法中
        self._move_drag = False
        self._corner_drag = False
        self._bottom_drag = False
        self._right_drag = False

    def mousePressEvent(self, event):
        # 重写鼠标点击的事件
        if (event.button() == Qt.LeftButton) and (event.pos() in self._corner_rect):
            # 鼠标左键点击右下角边界区域
            self._corner_drag = True
            event.accept()
        elif (event.button() == Qt.LeftButton) and (event.pos() in self._right_rect):
            # 鼠标左键点击右侧边界区域
            self._right_drag = True
            event.accept()
        elif (event.button() == Qt.LeftButton) and (event.pos() in self._bottom_rect):
            # 鼠标左键点击下侧边界区域
            self._bottom_drag = True
            event.accept()
            
    def mouseMoveEvent(self, QMouseEvent):
        # 判断鼠标位置切换鼠标手势
        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)
        # 当鼠标左键点击不放及满足点击区域的要求后，分别实现不同的窗口调整
        if Qt.LeftButton and self._right_drag:
            # 右侧调整窗口宽度
            self.resize(QMouseEvent.pos().x(), self.height())
            QMouseEvent.accept()
        elif Qt.LeftButton and self._bottom_drag:
            # 下侧调整窗口高度
            self.resize(self.width(), QMouseEvent.pos().y())
            QMouseEvent.accept()
        elif Qt.LeftButton and self._corner_drag:
            # 右下角同时调整高度和宽度
            self.resize(QMouseEvent.pos().x(), QMouseEvent.pos().y())
            QMouseEvent.accept()
        elif Qt.LeftButton and self._move_drag:
            # 标题栏拖放窗口位置
            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.创建图标

参考自：PyQt5 设置软件图标（左上角、任务栏）、软件主窗口标题

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"))    #第二个参数：窗口标题

效果：
任务栏上：