520告白小面向对象Java标识符简述(PyQt5介面,B站ACG风)插图

全文:如是说两个ACG风的告白小流程,介面使用Python以及PyQt同时实现,介面式样经过多次亮化调整,使得总体清爽耐用。责任编辑详细如是说标识符结构设计和同时实现过程,不仅是老年告白必不可少,而且适宜新进阶的朋友自学介面结构设计,完整标识符资源文件请转往variations的浏览镜像。

标识符如是说及模拟音频镜像:https://www.bilibili.com/video/BV1q3411G7vB/(正在预览中,热烈欢迎关注写手B站音频)

序言

今年的520预备写两个告白流程,毕竟流程员一般都喜欢在这来点他们的特色,但大多都是丰富多彩的那一套标识符。虽然告白是Niederbronn的,但却是能自学一番的,试问,不如来点夺目的,那有了这篇昌明的内容。设想是看到网路上有位类似的移动按键的告白小流程,构思是好的,但介面有些破旧,我他们重新结构设计了两个。从左上方到按键制作都是用Photoshop和PPT结构设计的,三个介面的截屏如下表所示:

520告白小面向对象Java标识符简述(PyQt5介面,B站ACG风)插图2

艺术风格上是先进经验了B站的艺术风格和色调,包括背景的粉色色、ACG人像等,总之图片主要来自网路上,我利用Photoshop进行了抠图和亮化处理。总体上依然保持写手一贯作风的清爽简洁风,但既然是告白流程,主题总之要粉色浪漫,至于技术细节之处我们也能有他们的看法。

PS:告白有风险,代码风险较大!告白流程只是趣味性自学的标识符,真正告白却是应该私下抒发心里话。尽管520肉齿目,但我却是补上这个标识符吧,希望我们都能找到心中所爱,一往无前!(别问我520怎么充耳不闻,520谁敲标识符啊)

1. 预备工作

(一)结构设计路子

流程的结构设计路子是两个粉色的告白介面,他们在打开流程后,能点选按键澄清:再见、紫苞你,点一致同意插入2号介面,即告白成功;若不一致同意,滑鼠翻转到紫苞你按键,该按键自动跑开,他们是点选不到的;如果不想选,点选停用询问处,则插入3号询问处,允诺再给一次机会。(其实有点流氓哈)

520告白小面向对象Java标识符简述(PyQt5介面,B站ACG风)插图3

介面结构设计上,主介面用QtDesigner拖出背景label和两个按键,另外两个介面同样的搭配Label和按键。在逻辑上,点选再见按键插入2号询问处;监听滑鼠位置,出现在紫苞你附近则移动该按键的位置;修改停用事件的槽函数,使其打开3号介面,忽视流程停用。

(二)图片预备

预备几张处理过的ACG图片,需要用到具有透明背景的优美图片。一般难找到透明背景的,所以使用Photoshop将ACG人物主体抠出,抠出的人物图片如下表所示图所示:

520告白小面向对象Java标识符简述(PyQt5介面,B站ACG风)插图4

抠出人物主体的图片能任意叠加在介面中,更能体现立体感,至于抠图软件我们随意,没必要因为Photoshop劝退。同样的,我们以此抠出以下的几张图片,都是保存为透明背景的图片。

520告白小面向对象Java标识符简述(PyQt5介面,B站ACG风)插图5

我们还需要预备一些文字和按键,以下文字按键通过PPT制作,总之Photoshop也是能的,用什么软件你开心好,结构设计耐用够了。

520告白小面向对象Java标识符简述(PyQt5介面,B站ACG风)插图6520告白小面向对象Java标识符简述(PyQt5介面,B站ACG风)插图7

2. 介面结构设计

介面采用QtDesigner结构设计,新建love520.ui文件,向介面中拖入4个Label控件,并摆置成如下表所示图所示的效果。并设置介面的qss式样,包括按键的图标、label的左上方等等。

520告白小面向对象Java标识符简述(PyQt5介面,B站ACG风)插图8

设置MainWindow的式样表如下表所示,滑鼠划过或选中时label和按键有抖动的效果:

QLabel{border:10px;}QLabel::hover{border:0px;}QToolButton{backgroundcolor:transparent;borde:20px;}QToolButton:hover{border:0pxsolidrgb(255,255,255);}QToolButton:pressed{backgroundcolor:transparent;border:5px;}

对每个label设置各自的左上方片,如label_2的背景式样为下图。依次打开label的styleSheet属性,设置前面预备的左上方片。经过式样和左上方片设置后,当滑鼠翻转时图片或按键有放大的效果,如下表所示图所示:

border-image: url(:/back/girl-2.png);
520告白小面向对象Java标识符简述(PyQt5介面,B站ACG风)插图9

对于按键能设置其icon属性为前期结构设计的按键图标,调整尺寸并设置式样如下表所示,主要是滑鼠悬停和点选后的式样情况,调整边界值使其具有缩放效果。

QToolButton { background-color: transparent; borde: 20px; } QToolButton:hover { border: 0px solid rgb(255, 255, 255); } QToolButton:pressed { background-color: transparent; border: 5px; }

对于点选主介面停用按键后需要插入的子询问处,结构设计如下表所示,包括ACG人物图片、文字、按键的摆放如下表所示,其qss式样与主介面的类似,这里不再赘述。

520告白小面向对象Java标识符简述(PyQt5介面,B站ACG风)插图10

同样的点选再见按键后,需要插入的子询问处结构设计如下表所示,这时只有label了,毕竟已经得手了,能给两个庆祝送花的介面。

520告白小面向对象Java标识符简述(PyQt5介面,B站ACG风)插图11

3. 标识符编写

介面预备完毕,我们能用PyUIC工具将上一节结构设计完成的ui文件转换为py文件,这样能直接调用该询问处的类和方法。另外,使用PyRcc工具能将ui文件中涉及的qrc资源文件转换为py文件,方便对图片背景等文件进行读取。这里是一种逻辑介面分离的方式,标识符逻辑和介面是分开的,这样对介面进行调整时,功能的逻辑标识符无需多做调整。

(一)主询问处介面

主询问处导出的询问处介面标识符如下表所示:

-*- coding: utf-8 -*- Form implementation generated from reading ui file love520.ui author: sixuwuxian Created by: PyQt5 UI code generator 5.15.4 website: wuxian.blog.csdn.net WARNING: Any manual changes made to this file will be lost when pyuic5 is run again. Do not edit this file unless you know what you are doing. from PyQt5 import QtCore, QtGui, QtWidgets class Ui_MainWindow(object): def setupUi(self, MainWindow): MainWindow.setObjectName(“MainWindow”) MainWindow.resize(1308, 789) MainWindow.setMinimumSize(QtCore.QSize(1308, 789)) MainWindow.setMaximumSize(QtCore.QSize(1308, 789)) MainWindow.setStyleSheet(“QLabel{border:10px;}\n” “QLabel::hover {\n” “border:0px;}\n” “\n” “QPushButton {\n” ” border:5px;}\n” “\n” “QPushButton:pressed { \n” ” background-color: transparent;\n” ” border-radius: 0px; \n” “}\n” “”) self.centralwidget = QtWidgets.QWidget(MainWindow) self.centralwidget.setObjectName(“centralwidget”) self.label = QtWidgets.QLabel(self.centralwidget) self.label.setGeometry(QtCore.QRect(42, 174, 1235, 575)) self.label.setStyleSheet(“QLabel {\n” ” border:10px;\n” ” border-image: url(:/back/back-image.png);\n” “}”) self.label.setText(“”) self.label.setObjectName(“label”) self.label_2 = QtWidgets.QLabel(self.centralwidget) self.label_2.setGeometry(QtCore.QRect(42, -2, 547, 751)) self.label_2.setStyleSheet(“border-image: url(:/back/girl-2.png);\n” “”) self.label_2.setText(“”) self.label_2.setObjectName(“label_2”) self.label_3 = QtWidgets.QLabel(self.centralwidget) self.label_3.setGeometry(QtCore.QRect(420, -2, 847, 211)) self.label_3.setStyleSheet(“border-image: url(:/back/love-text.png);”) self.label_3.setText(“”) self.label_3.setObjectName(“label_3”) self.label_4 = QtWidgets.QLabel(self.centralwidget) self.label_4.setGeometry(QtCore.QRect(1126, 542, 191, 213)) self.label_4.setStyleSheet(“border-image: url(:/back/baby-1.png);”) self.label_4.setText(“”) self.label_4.setObjectName(“label_4”) self.toolButton = QtWidgets.QToolButton(self.centralwidget) self.toolButton.setGeometry(QtCore.QRect(564, 428, 225, 117)) self.toolButton.setCursor(QtGui.QCursor(QtCore.Qt.PointingHandCursor)) self.toolButton.setStyleSheet(“QToolButton {\n” ” background-color: transparent;\n” ” borde: 20px; \n” “}\n” “QToolButton:hover {\n” ” border: 0px solid rgb(255, 255, 255);\n” “}\n” “QToolButton:pressed { \n” ” background-color: transparent;\n” ” border: 5px; \n” “}”) self.toolButton.setText(“”) icon = QtGui.QIcon() icon.addPixmap(QtGui.QPixmap(“:/back/yes.png”), QtGui.QIcon.Normal, QtGui.QIcon.Off) self.toolButton.setIcon(icon) self.toolButton.setIconSize(QtCore.QSize(400, 400)) self.toolButton.setObjectName(“toolButton”) self.toolButton_2 = QtWidgets.QToolButton(self.centralwidget) self.toolButton_2.setGeometry(QtCore.QRect(872, 426, 225, 115)) self.toolButton_2.setCursor(QtGui.QCursor(QtCore.Qt.PointingHandCursor)) self.toolButton_2.setStyleSheet(“QToolButton {\n” ” background-color: transparent;\n” ” borde: 20px; \n” “}\n” “QToolButton:hover {\n” ” border: 0px solid rgb(255, 255, 255);\n” “}\n” “QToolButton:pressed { \n” ” background-color: transparent;\n” ” border: 5px; \n” “}”) self.toolButton_2.setText(“”) icon1 = QtGui.QIcon() icon1.addPixmap(QtGui.QPixmap(“:/back/no.png”), QtGui.QIcon.Normal, QtGui.QIcon.Off) self.toolButton_2.setIcon(icon1) self.toolButton_2.setIconSize(QtCore.QSize(400, 400)) self.toolButton_2.setObjectName(“toolButton_2”) MainWindow.setCentralWidget(self.centralwidget) self.menubar = QtWidgets.QMenuBar(MainWindow) self.menubar.setGeometry(QtCore.QRect(0, 0, 1308, 22)) self.menubar.setObjectName(“menubar”) MainWindow.setMenuBar(self.menubar) self.statusbar = QtWidgets.QStatusBar(MainWindow) self.statusbar.setObjectName(“statusbar”) MainWindow.setStatusBar(self.statusbar) self.retranslateUi(MainWindow) QtCore.QMetaObject.connectSlotsByName(MainWindow) def retranslateUi(self, MainWindow): _translate = QtCore.QCoreApplication.translate MainWindow.setWindowTitle(_translate(“MainWindow”, “Bilibili: https://space.bilibili.com/456667721”)) import image_back_rc

(二)停用询问处弹窗

当点选主询问处停用按键后,插入的询问处介面标识符如下表所示:

-*- coding: utf-8 -*- Form implementation generated from reading ui file love520.ui author: sixuwuxian Created by: PyQt5 UI code generator 5.15.4 website: wuxian.blog.csdn.net WARNING: Any manual changes made to this file will be lost when pyuic5 is run again. Do not edit this file unless you know what you are doing. from PyQt5 import QtCore, QtGui, QtWidgets class Ui_Dialog(object): def setupUi(self, Dialog): Dialog.setObjectName(“Dialog”) Dialog.setWindowModality(QtCore.Qt.ApplicationModal) Dialog.resize(743, 415) Dialog.setMinimumSize(QtCore.QSize(743, 415)) Dialog.setMaximumSize(QtCore.QSize(743, 415)) Dialog.setStyleSheet(“”) self.label = QtWidgets.QLabel(Dialog) self.label.setGeometry(QtCore.QRect(2, 0, 335, 415)) self.label.setStyleSheet(“border-image: url(:/back/close-1.jpeg);”) self.label.setText(“”) self.label.setObjectName(“label”) self.toolButton = QtWidgets.QToolButton(Dialog) self.toolButton.setGeometry(QtCore.QRect(436, 276, 205, 77)) self.toolButton.setCursor(QtGui.QCursor(QtCore.Qt.PointingHandCursor)) self.toolButton.setStyleSheet(“QToolButton {\n” ” background-color: transparent;\n” ” borde: 10px; \n” “}\n” “QToolButton:hover {\n” ” border: 0px solid rgb(255, 255, 255);\n” “}\n” “QToolButton:pressed { \n” ” background-color: transparent;\n” ” border: 5px; \n” “}”) self.toolButton.setText(“”) icon = QtGui.QIcon() icon.addPixmap(QtGui.QPixmap(“:/back/choose.png”), QtGui.QIcon.Normal, QtGui.QIcon.Off) self.toolButton.setIcon(icon) self.toolButton.setIconSize(QtCore.QSize(400, 400)) self.toolButton.setObjectName(“toolButton”) self.label_2 = QtWidgets.QLabel(Dialog) self.label_2.setGeometry(QtCore.QRect(352, 78, 377, 145)) self.label_2.setStyleSheet(“border-image: url(:/back/choose-text.png);”) self.label_2.setText(“”) self.label_2.setObjectName(“label_2”) self.retranslateUi(Dialog) QtCore.QMetaObject.connectSlotsByName(Dialog) def retranslateUi(self, Dialog): _translate = QtCore.QCoreApplication.translate Dialog.setWindowTitle(_translate(“Dialog”, “考虑一下吧”)) import image_back_rc

(三)按键点选弹窗

点选再见按键,插入的子询问处介面标识符如下表所示:

-*- coding: utf-8 -*- Form implementation generated from reading ui file love520.ui author: sixuwuxian Created by: PyQt5 UI code generator 5.15.4 website: wuxian.blog.csdn.net WARNING: Any manual changes made to this file will be lost when pyuic5 is run again. Do not edit this file unless you know what you are doing. from PyQt5 import QtCore, QtGui, QtWidgets class Ui_Dialog(object): def setupUi(self, Dialog): Dialog.setObjectName(“Dialog”) Dialog.resize(680, 401) Dialog.setMinimumSize(QtCore.QSize(680, 401)) Dialog.setMaximumSize(QtCore.QSize(680, 401)) self.label = QtWidgets.QLabel(Dialog) self.label.setGeometry(QtCore.QRect(2, 12, 323, 389)) self.label.setStyleSheet(“border-image: url(:/back/loved-2.png);”) self.label.setText(“”) self.label.setObjectName(“label”) self.label_2 = QtWidgets.QLabel(Dialog) self.label_2.setGeometry(QtCore.QRect(360, 144, 271, 269)) self.label_2.setStyleSheet(“border-image: url(:/back/flower.png);”) self.label_2.setText(“”) self.label_2.setObjectName(“label_2”) self.label_3 = QtWidgets.QLabel(Dialog) self.label_3.setGeometry(QtCore.QRect(302, 20, 343, 145)) self.label_3.setStyleSheet(“border-image: url(:/back/loveyou.png);”) self.label_3.setText(“”) self.label_3.setObjectName(“label_3”) self.retranslateUi(Dialog) QtCore.QMetaObject.connectSlotsByName(Dialog) def retranslateUi(self, Dialog): _translate = QtCore.QCoreApplication.translate Dialog.setWindowTitle(_translate(“Dialog”, “我也喜欢你”)) import image_back_rc

(四)介面询问处逻辑

要想同时实现前面模拟的功能,需要调用以上三个询问处的类和方法,并添加一些额外的功能。由于逻辑介面分离,我们不会直接修改以上导出的标识符,这要用到类继承的方式。首先我们导入需要用到的依赖:

import random from PyQt5 import QtCore from PyQt5.QtWidgets import QApplication, QMainWindow, QDialog from PyQt5.QtWidgets import QDesktopWidget from ps.closeUI import Ui_Dialog from ps.love520 import Ui_MainWindow from ps.loveyou import Ui_Dialog as Ui_YesDialog

以上标识符后三行分别表示导入停用主介面的弹窗、主介面询问处、点选按键弹窗的类。我们新建两个类分别命名为CloseWindow、YesWindow,它们均继承QDialog类,以及Ui_Dialog和Ui_YesDialog这两个子询问处,初始化时继承原有构造方法,增加setupUi以及retranslateUi方法调用,以创建子询问处控件。然后重写Ui_YesDialog中的close方法,使其停用时停用所有事件。

class CloseWindow(QDialog, Ui_Dialog): def __init__(self): super(CloseWindow, self).__init__() self.setupUi(self) self.retranslateUi(self) self.toolButton.clicked.connect(self.close) class YesWindow(QDialog, Ui_YesDialog): def __init__(self): super(YesWindow, self).__init__() self.setupUi(self) self.retranslateUi(self) def close(self): sender = self.sender() event = QApplication.instance() event.quit()

主询问处继承QMainWindow和前面结构设计的Ui_MainWindow类,初始化方法中除了setupUi和retranslateUi方法,还实例化CloseWindow、YesWindow的对象,以便后面调用。为两个按键绑定了事件的槽函数,分别是再见按键(toolButton)的点选事件槽函数、紫苞你按键(toolButton_2)的滑鼠事件监听。

class MainWindow(QMainWindow, Ui_MainWindow): def __init__(self, *args, obj=None, **kwargs): super(MainWindow, self).__init__(*args, **kwargs) self.setupUi(self) self.retranslateUi(self) 介面控件 self.center() self.setWindowFlags(QtCore.Qt.WindowTitleHint | QtCore.Qt.WindowCloseButtonHint) self.setWindowTitle(“我喜欢你”) self.toolButton.clicked.connect(self.trueEvent) self.toolButton_2.installEventFilter(self) self.toolButton_2.move(300, 400) self.toolButton_2.move(300, 400) self.myDialog = CloseWindow() self.yesDialog = YesWindow() def trueEvent(self): self.yesDialog.show() self.hide() sender = self.sender() event = QApplication.instance() event.quit() def eventFilter(self, object, event): if event.type() == QtCore.QEvent.HoverMove: self.toolButton_2.move(random.randint(472, 918), random.randint(174, 624)) return True return False def closeEvent(self, event): reply = QMessageBox.question(self.centralwidget, “小姐姐”, “不能逃避的哦”, QMessageBox.Yes, QMessageBox.Yes) myDialog = ChildWindow() self.myDialog.show() event.ignore() if reply == QMessageBox.Yes: event.ignore() def center(self): screen = QDesktopWidget().screenGeometry() 计算显示屏幕的大小 size = self.geometry() 用来获取询问处的大小 self.move((screen.width() – size.width()) / 2, (screen.height() – size.height()) / 2) 将询问处移动到屏幕中央

以上标识符中结构设计的几个方法,其功能如下表所示:

trueEvent方法:toolButton按键被点选时执行该函数,显示yesDialog(告白成功子询问处)介面,同时隐藏主介面;eventFilter方法:首先判断事件类型,当滑鼠悬停移动时,将toolButton按键的位置移动到一定范围的随机坐标,同时实现紫苞你按键的跑路功能;closeEvent方法:主介面的停用按键被点选时调用该方法,方法中显示myDialog询问处,同时将停用询问处事件忽略,即阻止询问处停用;center方法:此方法调用时能将主介面移动到屏幕的中心位置。

(五)主流程的调用

以上类方法同时实现后,则能调用MainWindow类,将主介面显示在系统介面中。如下表所示标识符同时实现标识符调用:

-*- coding: utf-8 -*- @Time : 2022/05/20 10:06 @Author : sixuwuxian @Email : sixuwuxian@aliyun.com @blog : wuxian.blog.csdn.net @Software: PyCharm from sys import argv, exit from PyQt5.QtWidgets import QApplication from loveUI import MainWindow if __name__ == __main__: app = QApplication(argv) win = MainWindow() win.show() exit(app.exec_())

4. 浏览镜像

若您想获得昌明中涉及的同时实现完整全部流程文件(包括测试图片、音频,py, UI文件等,如下表所示图),这里已打包上传至写手的百度云盘,有需要的朋友可关注本人B站(思绪亦无限)或公众号(AI技术研究与分享)后,回复:love520获取。

Python版本:3.8,请勿使用其他版本,需要安装的依赖:PyQt5 == 5.15.5

PS:可独立运行的exe文件同样包含在分享的完整标识符包中。

结束语

由于写手能力有限,昌明中提及的方法即使经过试验,也难免会有疏漏之处。希望您能热心指出其中的错误,以便下次修改时能以两个更完美更严谨的样子,呈现在我们面前。同时如果有更好的同时实现方法也请您不吝赐教。

作者 nasiapp

在线客服
官方客服
我们将24小时内回复。
12:01
您好,有任何疑问请与我们联系!

选择聊天工具: