一、项目构思
1、首先设计一个登录窗口界面,用户需要输入指定的账号和密码,在系统验证通过之后将会进入程序的菜单窗口界面,若是账号或密码输入错误,将会有一个弹窗提示用户账号或密码输入错误,同时要设置一个忘记密码的按钮,若是用户忘记账号或者密码,可以点击按钮,会有一个弹窗附带有客服联系方式,可以联系客服解决相关问题。
2、在菜单窗口,我们设置供用户选择的四项功能,分别对应多种类型的图片下载、热门电视剧或者动漫视频的下载、音乐的下载以及某些数据的下载,并将其存储到本地文件夹中。
3、关于图片下载窗口,设计一个LineEdit(输入框)并设置其属性,添加提示输入功能和一键清除功能,供用户输入要下载的图片的关键词,并设置下载按钮,在输入完毕之后开始下载相关类型的图片(默认下载20张),同时会有一个滚动显示区域,提示用户下载完成的每一张图片,在所有的图片下载完成之后会有一个弹窗提示用户所有的文件已经下载完成。
4、对于视频的下载,默认只下载第一集或是第二集(因为视频文件相对较大),在此窗口,同样设置输入框和下载按钮,供用户输入视频名称并下载,为了有更好的使用,在视频开始下载的时候,设置一个弹窗提示用户视频文件已经开始下载,而在视频最终下载完成的时候同样会有一个会话窗口提示用户所下载的视频已经下载完成。
5、音乐下载窗口可以下载相关的音乐,用户在输入相关的歌曲名称或者歌手名字之后会搜索的相关的内容,点击选择对应的内容即可下载,同样下载完成会有会话窗口提示,并告知用户歌曲保存的路径,方便查找。
6、指定的数据的批量下载和整合,在此我们设计下载最新的python工程师的招聘信息,包括公司名称、公司地址、相关薪酬以及简单工作介绍,在下载到相关的数据之后,我们将其存入Excel表格中并保存在本地文件夹中。
二、功能实现
我们首先需要使用QtDesigner设计出对应的窗口的大致界面,并将其保存,方便后期的调用。再本篇文章中,我们先来详细介绍一下登录窗口以及第一个菜单窗口的设计,其他窗口的设计会在后续的文章中进行介绍。
1、登录窗口及相关属性的设置
打开QtDesigner,新建一个MainWindow,将左侧的Label、LineEdit、Push Button拖动到窗口上添加,然后设置这些控件的属性值。
第一,设置Label的属性值,拖动完的界面如下图:
在区域1可以修改控件的名称,方便后期在代码中的调用,在区域2可以修改控件的属性值,设定其坐标和大小,以及其他多种属性。我们首先修改各控件的名称,同时设置窗口的名称,设置完成如图:
选中“欢迎登录”标签,在区域二设置其坐标、大小和字体大小、颜色等属性
使用同样的方法设置“账号”和“密码”标签以及“登录”和“忘记密码”按钮的坐标等属性,然后对输入框的属性进行设置,选中placeholderText设置输入框的提示文字,选中clearButtonEnabled设置输入框的一键清除功能,具体操作如下:
在设置完相关的属性之后,我们发现窗口的大小不太合适,于是需要修改窗口的大小,有两种方法:其一:通过鼠标长按左键拖动修改窗口的大小;其二:在区域1选中MainWindow设置窗口的大小,同时要注意,在窗口大小改变之后,前边设置的布局也会变得不合适需要修改,所以在以后的设计中,需要首先确定窗口的大小。设置完成之后的窗口如图所示:
2、窗口的美化
在预览时,我们可以发现,界面过于单调,而这时候就需要对完成基本布局和属性设置的窗口进行界面的美化,主要包括添加背景图片、设置窗口左上角的图标、设置按钮的背景等相关的属性,具体设置方法如下:
(1)为窗口添加本地背景图片
使用List View设置背景图片,首先添加一个List View控件并设置其坐标为(0,0)大小与窗口的大小相等,然后点击鼠标右键选择Send to Back,然后我们要将本地的图片的大小设置成与List View大小一致的图片。由于QtDesigner只能加载(.qrc)格式的资源文件,所以我们需要自己写一个(.qrc)格式的文件用来导入用到的资源文件,相应的内容如下所示:
C:\资源文件\背景图片\0.jpg
C:\资源文件\背景图片\1.jpg
可以选择使用文本文档编写,然后将文件格式更改为(.qrc)格式,并保存。打开窗口的UI文件即刚刚所创建的登录界面的窗口,选择List View点击鼠标右键选择Change styleSheet在弹出的界面选择background-image,然后依次按图中顺序点击,在选择文件的窗口找到保存的(.qrc)文件并选中,然后QtDesigner会加载出对应的资源文件,选中我们要导入作为窗口背景的图片点击确认及设置成功,具体操作如下图所示:
背景设置成功后会呈现出如下界面:
可以看出,文字的颜色、按钮的颜色与背景不是很和谐,所以我们需要设置文字的颜色和按钮的背景颜色。(相关的图片和对应的控件的颜色大家可以按照方法自行设定,我们所做的设定仅为示例)设定完成后效果如下:
至此,我们有关使用QtDesigner设置窗口界面的操作已经结束,接下来要在编译器中使用代码实现相关的功能。
3、代码实现部分
注意:在此处我们需要将ui文件转为py文件并使用import导入代码部分
import sys
from PyQt5 import uic
from PyQt5.QtWidgets import *
import CSDN_UI
class Login(QWidget):
def __init__(self):
super(Login, self).__init__()
self.init_ui_login()
def init_ui_login(self):
self.Loginui = uic.loadUi("CSDN_UI\window_login.ui")
self.name = self.Loginui.name
self.password = self.Loginui.password
self.btn_login = self.Loginui.btn_login
self.btn_forget = self.Loginui.btn_forget
self.btn_login.clicked.connect(self.login)
self.btn_forget.clicked.connect(self.forget)
def login(self):
name = self.name.text()
password = self.password.text()
if(name == "xxx" and password == "xxx"):
print("登录成功")
else:
pass
def forget(self):
pass
if __name__ == '__main__':
app = QApplication(sys.argv)
L = Login()
L.show()
app.exec_()
附:使用pycharm外部工具转化qrc文件为py文件
添加外部工具--->程序:(pyside2.exe文件的位置)--->实参(如下)--->工作目录(如下)
实参:
-o $FileNameWithoutExtension$.py $FileNameWithoutExtension$.qrc
工作目录:
$FileDir$
4、代码执行效果
后续持续更新中·········