文章目录

前言
一、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为falsesuper().__init__()self.m_flag = Falsedef mousePressEvent(self, event):if event.button() == QtCore.Qt.LeftButton and self.isMaximized() == False:self.m_flag = Trueself.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 = Falseself.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 = 0def mouseReleaseEvent(self, QMouseEvent):self.i += 1self.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.translatefont = QtGui.QFont()font.setFamily("微软雅黑")font.setPointSize(18)self.label.setFont(font)self.label.setText(_translate("MainWindow", "Design By LJK"))else:_translate = QtCore.QCoreApplication.translatefont = 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 = 0self.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 = 1self.signal_resize.emit(self.db)def mousePressEvent(self, event):if event.button() == QtCore.Qt.LeftButton and self.isMaximized() == False:self.m_flag = Trueself.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_positionself.move_pos = str(self.move_pos)QMouseEvent.accept()# 判断鼠标位置切换鼠标手势self.signal_move.emit(1, self.move_pos)def mouseReleaseEvent(self, QMouseEvent):self.m_flag = Falseself.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_posstr_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 = Falseself._corner_drag = Falseself._bottom_drag = Falseself._right_drag = Falsedef mousePressEvent(self, event):# 重写鼠标点击的事件if (event.button() == Qt.LeftButton) and (event.pos() in self._corner_rect):# 鼠标左键点击右下角边界区域self._corner_drag = Trueevent.accept()elif (event.button() == Qt.LeftButton) and (event.pos() in self._right_rect):# 鼠标左键点击右侧边界区域self._right_drag = Trueevent.accept()elif (event.button() == Qt.LeftButton) and (event.pos() in self._bottom_rect):# 鼠标左键点击下侧边界区域self._bottom_drag = Trueevent.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 = Falseself._corner_drag = Falseself._bottom_drag = Falseself._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"))    #第二个参数：窗口标题

效果：
任务栏上：

pyqt5优化美化界面代码相关推荐

pyqt5 qss美化界面
前言 pyqt5qss美化一直都是一个问题,怎么简单的使用pyqt5 qss美化呢? 一.创建引入qss的函数类 class CommonHelper:def __init__(self):pass@ ...
pycharm pyqt5实现登陆界面_PyQt5可以实现界面和逻辑代码分离吗？大声说出你的答案！...
必须的!!! PyQt5作为最强大的Python GUI设计模块,小编在这里告诉大家:PyQt5可以实现界面与逻辑代码分离,实现非常简单,用处特别大! 初学者在学习PyQt5时,使用Qt Design ...
java 优化包_java美化界面包 | 学步园
导入配置jar包 substance.jar 然后在frame的主函数加入如下代码 JFrame.setDefaultLookAndFeelDecorated(true); JDialog.setD ...
Python学习 Python3.5+PyQt5环境--------02、代码与界面GUI分离
以GUI_ClearText.py为例,GUI_ClearText.py的源代码是界面和业务代码在一起的. 思路: 把原代码拆分为三个部分,分别实现窗口布局布局.业务实现.主程序调用功能: 一.窗口布 ...
（2）pyqt5教程---＞使用QTdesigner实现界面代码分离
GitHub连接: 本专栏所有源代码的GitHub直通车在上一篇中已经讲了一个pyqt5的基本框架是什么,这篇使用QTdesigner来设计一下界面第一篇:pyqt5的基本框架 1.QTdesig ...
州的先生 python界面代码完整版（注释）
代码来自:Python GUI教程(十六):在PyQt5中美化和装扮图形界面https://zmister.com/archives/477.html # coding:utf-8 from PyQt ...
Java实现拼图小游戏（5）—— 美化界面（含源码阅读）
美化界面一.前言二.添加背景图 1.注意事项 2.创建图片对象 3.创建JLabel的对象(一个用来放图片的容器) 4.调整位置 5.将容器放到界面中 6.优化代码三.添加边框 1.查看源码 2 ...
使用PYQT5设计登录界面并实现界面跳转
目录 1 UI登录界面的布局 2 UI登录界面布局对应的代码 3 登录界面和界面跳转完整代码 4 跳转界面代码函数和优化界面代码 5 最终效果 1 UI登录界面的布局其中,<欢迎使用 XXXX ...
《OpenCv视觉之眼》Python图像处理二十三:OpenCV图像处理最终章之基于PyQt5的图像处理界面设计及功能实现
本专栏主要介绍如果通过OpenCv-Python进行图像处理,通过原理理解OpenCv-Python的函数处理原型,在具体情况中,针对不同的图像进行不同等级的.不同方法的处理,以达到对图像进行去噪.锐 ...
pyqt5如何循环遍历控件名_利用Python的PyQt5编写GUI界面教学，QT5还是比较难的
由于学校课程的项目,最近最近在学习如何利用Python语言和SQL Server编写一个读者图书借阅.查询管理的小程序.以此为契机吧,自己便开始了学习之路~ 这篇文章主要介绍自己如何使用PyQt5编写 ...

pyqt5优化美化界面代码