pyqt5优化美化界面代码 |
您所在的位置：网站首页 › 游戏王游戏的卡组搭配 › pyqt5优化美化界面代码 |
pyqt5优化美化界面代码
|
文章目录
前言一、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 }鼠标不置于其上效果： 鼠标置于其上但不点击效果： 效果： 按住效果：
效果：
效果： 这个分为两个部分： 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; }效果： 重点：下拉内容框的编辑，因为只用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); }效果： 界面效果： 添加至开头：
效果（结合2的图片来看）： 添加至末尾： 效果： 添加至调用类的设定中：
效果（无按钮和框的位置都可以进行长按移动）：
！！！注意：若是初始化方法没有定义m_flag为False，直接拖动窗口内的按钮，程序将会因为缺少m_flag参数而崩溃
首先先规范创建可自由变化的UI，不规范化创建，缩放必定有问题。 参考：QtDesigner规范创建应用界面 代码分两部分： self.ui.pushButton_resize.clicked.connect(self.resize_win)
效果： 使用到了horizontalSlider和QLabel。 分为两块，都添加于PyUIC生成的UI文件中： self.horizontalSlider_hole.valueChanged.connect(self.sl_value_hole)用ctrl+F快速寻找控件位置然后添加： 这个函数添加到末尾即可。 效果：
在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"))
效果：
重新定义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()效果：
因为程序要用去不同的电脑，屏幕分辨率会有差别，故而需要自适应调整： 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后：
先看效果：
首先还是先规范化创建窗口并打开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")) #第二个参数：窗口标题效果： 任务栏上：
|
点击效果（字体往右下角移动5px）： 
松开效果：
鼠标放上去后效果： 
放置于类ui调用后。
放置于类方法函数即可。
效果： （效果会局限于你缩写的控件最小大小） 
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |