PyQt5设置登录界面及界面美化的实现

写在前面

前一段时间博主刷了半个多月的LeetCode算法题,刷的归类为简单的那些题,做到自己简直要怀疑人生。想着人生在世,何苦这么为难自己呢,何不做点自己擅长的东西。想到博主还有个项目没做完呢,于是开始捣鼓起来。项目的最终成果是要写一个软件,把所有研究的内容可视化的展示出来,研究的内容都写的差不多了,还差个登录界面,于是就开始元气满满的干起来。

先上编译环境:

  • Python3.7
  • pycharm2020专业版
  • PyQt5

博主习惯用Spyder做编译器,但如果做大项目,最好还是用pycharm,不然总会遇到各种问题,让人头大,况且pycharm的代码填充简直不要太香。
好了,进入正题。

控件配置和美化

背景设置

首先咱们的登录界面一定要炫酷,这样才能彰(唬)显(得)技(住)术(人),找了半天,从身为资深程序媛的lp大人那里盗了张图,上一下博主最终的登录界面

打码了软件的名称和其他隐私信息,这样是不是有科技感了?虽然我觉得也不是很美观,但也还行吧,毕竟博主可不是搞美工设计的。
那来讲讲这个界面是怎么做出来的。

背景元素添加

最初图片上啥都没有,就是一张纯粹的图片,上面的文字可以在PyQt5中通过代码来添加,不过博主推荐使用一种最快捷的处理方式——PS,甚至都不用PS,博主用的是工科生写论文必备软件——visio,如下

这样,我在背景图片上添加了最上面的那行字,还有中间添加了一个半透明的蒙版,以及下面的一行英文。
看看原来的背景图

这样省去了很多工作。

登录界面的类和方法

我先上代码,再慢慢解释。

class logindialog(QDialog):
  def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    self.setWindowTitle('XXXXXXX')
    self.setWindowIcon(QIcon('wheel.ico'))
    self.resize(1920, 1080)
    # self.setFixedSize(self.width(), self.height())
    self.setWindowFlags(Qt.WindowMinimizeButtonHint | Qt.WindowMaximizeButtonHint | Qt.WindowCloseButtonHint)

    palette = QPalette()
    palette.setBrush(QPalette.Background, QBrush(QPixmap('background3.jpg')))
    self.setPalette(palette)

    # 设置界面控件

    self.frame = QFrame(self)
    self.frame.move(800, 300)
    # self.verticalLayout = QVBoxLayout(self.frame)
    self.mainLayout = QVBoxLayout(self.frame)

    # self.nameLb1 = QLabel('&Name', self)
    # self.nameLb1.setFont(QFont('Times', 24))
    self.nameEd1 = QLineEdit(self)
    self.nameEd1.setPlaceholderText("Account")
    self.nameEd1.setFont(QFont('Arial', 24))
    # 设置透明度
    op1 = QGraphicsOpacityEffect()
    op1.setOpacity(0.5)
    self.nameEd1.setGraphicsEffect(op1)
    # 设置文本框为圆角
    self.nameEd1.setStyleSheet('''QLineEdit{border-radius:5px;}''')
    # self.nameLb1.setBuddy(self.nameEd1)

    # self.nameLb2 = QLabel('&Password', self)
    # self.nameLb2.setFont(QFont('Times', 24))
    self.nameEd2 = QLineEdit(self)
    self.nameEd2.setPlaceholderText("Admin")
    self.nameEd2.setFont(QFont('Arial', 24))
    op2 = QGraphicsOpacityEffect()
    op2.setOpacity(0.5)
    self.nameEd2.setGraphicsEffect(op2)
    self.nameEd2.setStyleSheet('''QLineEdit{border-radius:5px;}''')
    # self.nameLb2.setBuddy(self.nameEd2)

    self.nameEd3 = QLineEdit(self)
    self.nameEd3.setPlaceholderText("Password")
    self.nameEd3.setFont(QFont('Arial', 24))
    op5 = QGraphicsOpacityEffect()
    op5.setOpacity(0.5)
    self.nameEd3.setGraphicsEffect(op5)
    self.nameEd3.setStyleSheet('''QLineEdit{border-radius:5px;}''')

    self.btnOK = QPushButton('OK')
    op3 = QGraphicsOpacityEffect()
    op3.setOpacity(0.5)
    self.btnOK.setGraphicsEffect(op3)
    self.btnOK.setStyleSheet(
      '''QPushButton{background:#1E90FF;border-radius:5px;}QPushButton:hover{background:#4169E1;}\
      QPushButton{font-family:'Arial';color:#FFFFFF;}''') # font-family中可以设置字体大小,如下font-size:24px;

    self.btnCancel = QPushButton('Cancel')
    op4 = QGraphicsOpacityEffect()
    op4.setOpacity(0.5)
    self.btnCancel.setGraphicsEffect(op4)
    self.btnCancel.setStyleSheet(
      '''QPushButton{background:#1E90FF;border-radius:5px;}QPushButton:hover{background:#4169E1;}\
      QPushButton{font-family:'Arial';color:#FFFFFF;}''')

    self.btnOK.setFont(QFont('Microsoft YaHei', 24))
    self.btnCancel.setFont(QFont('Microsoft YaHei', 24))

    # self.mainLayout.addWidget(self.nameLb1, 0, 0)
    self.mainLayout.addWidget(self.nameEd1)

    # self.mainLayout.addWidget(self.nameLb2, 1, 0)
    self.mainLayout.addWidget(self.nameEd2)

    self.mainLayout.addWidget(self.nameEd3)

    self.mainLayout.addWidget(self.btnOK)
    self.mainLayout.addWidget(self.btnCancel)

    self.mainLayout.setSpacing(60)

    '''
    self.lineEdit_account = QLineEdit()
    self.lineEdit_account.setPlaceholderText("请输入账号")
    # self.lineEdit_account.move(900, 540)
    self.verticalLayout.addWidget(self.lineEdit_account)

    self.lineEdit_password = QLineEdit()
    self.lineEdit_password.setPlaceholderText("请输入密码")
    self.verticalLayout.addWidget(self.lineEdit_password)

    self.pushButton_enter = QPushButton()
    self.pushButton_enter.setText("确定")
    self.verticalLayout.addWidget(self.pushButton_enter)

    self.pushButton_quit = QPushButton()
    self.pushButton_quit.setText("取消")
    self.verticalLayout.addWidget(self.pushButton_quit)
    '''

    ###### 绑定按钮事件
    self.btnOK.clicked.connect(self.on_pushButton_enter_clicked)
    self.btnCancel.clicked.connect(QCoreApplication.instance().quit)

  def on_pushButton_enter_clicked(self):
    # 账号判断
    if self.nameEd1.text() == "":
      return

    # 权限判断
    if self.nameEd2.text() == "":
      return

    # 密码判断
    if self.nameEd3.text() == "":
      return

    # 通过验证,关闭对话框并返回1
    self.accept()

博主默认读者对PyQt5有一定的了解,导包过程不再赘述。下面开始讲代码

  • 第一行代码,建立一个类,这个类使用的是PyQt5中的QDialog也就是对话框;
  • __init__是初始化方法,为了更好去理解,我没有再去写更多其他的方法,所有的设置按钮,文本输入框,都在这里进行;
  • 下面这几行代码分别表示设置界面名称、图标和大小;
		self.setWindowTitle('XXXXXXX')
    self.setWindowIcon(QIcon('wheel.ico'))
    self.resize(1920, 1080)

self.setWindowFlags(Qt.WindowMinimizeButtonHint | Qt.WindowMaximizeButtonHint | Qt.WindowCloseButtonHint)这行代码在界面顶端设置了最小化、最大化和关闭点击事件,如下:

下面这三行代码挺关键,就是把咱前面设计好的背景图设为登录界面的背景,用QPalette方法;

		palette = QPalette()
    palette.setBrush(QPalette.Background, QBrush(QPixmap('background3.jpg')))
    self.setPalette(palette)

下面进入界面的控件设置环节:

从我上面的那张整体图来看,应该是有3个文本输入框,分别是账号、权限、密码,以及两个按钮,分别是确认和取消按钮,采用的布局是垂直布局,如果对PyQt5布局还有困惑的,可以去看我我之前的博客——PyQt5的相对布局管理。

self.frame = QFrame(self)
self.frame.move(800, 300)

在设置垂直布局前,我先新建了一个QFrame,这个玩意儿很有用,我通过它,把我的垂直布局组合在一起,然后去设置它的形状、线条等。我通过move函数把它移动到窗口的中间来。

然后就建立一个垂直布局窗口:self.mainLayout = QVBoxLayout(self.frame)

后面就是为这个垂直布局窗口添加控件了,由于控件都差不多,我先重点介绍第一个控件。

    self.nameEd1 = QLineEdit(self)
    self.nameEd1.setPlaceholderText("Account")
    self.nameEd1.setFont(QFont('Arial', 24))
    # 设置透明度
    op1 = QGraphicsOpacityEffect()
    op1.setOpacity(0.5)
    self.nameEd1.setGraphicsEffect(op1)
    # 设置文本框为圆角
    self.nameEd1.setStyleSheet('''QLineEdit{border-radius:5px;}''')
    # self.nameLb1.setBuddy(self.nameEd1)

用setPlaceholderText函数来设置文本框里面的提示内容self.nameEd1.setPlaceholderText("Account")
然后为这个文本框设置字体和大小self.nameEd1.setFont(QFont('Arial', 24))
后面self.nameEd1.setGraphicsEffect(op1)是设置这个控件的透明度,主要是为了美观,注意,我每设置一个控件就定义了一个变量来设置透明度,如果我只设置一个的话,那它修改的只是最后一个控件的透明度。这里不注意很容易搞错。
接下来我用QSS来美化文本框,就这行代码self.nameEd1.setStyleSheet('''QLineEdit{border-radius:5px;}'''),我把文本框修改为圆角的了,里面还有很多参数可以修改,比如颜色,字体等等。

下面再来看看我对按钮控件的修改和美化:

		self.btnOK = QPushButton('OK')
    op3 = QGraphicsOpacityEffect()
    op3.setOpacity(0.5)
    self.btnOK.setGraphicsEffect(op3)
    self.btnOK.setStyleSheet(
      '''QPushButton{background:#1E90FF;border-radius:5px;}QPushButton:hover{background:#4169E1;}\
      QPushButton{font-family:'Arial';color:#FFFFFF;}''') # font-family中可以设置字体大小,如下font-size:24px;

同样设置透明度,然后QSS里面设置的东西就更复杂了,background是按钮背景颜色,QPushButton:hover是指当鼠标滑动到按钮上市按钮显示的颜色。
后面类似self.mainLayout.addWidget(self.nameEd1)这样的代码,就是把控件添加到布局里面去了,不多说了。

控件都添加完了,下面是最重要的一步,为你的OK按钮添加回调函数,看下面代码:

    self.btnOK.clicked.connect(self.on_pushButton_enter_clicked)
    self.btnCancel.clicked.connect(QCoreApplication.instance().quit)

第一行是为OK按钮添加了一个槽函数,函数名是on_pushButton_enter_clicked,我们来看看这个函数是啥样的:

  def on_pushButton_enter_clicked(self):
    # 账号判断
    if self.nameEd1.text() == "":
      return

    # 权限判断
    if self.nameEd2.text() == "":
      return

    # 密码判断
    if self.nameEd3.text() == "":
      return

    # 通过验证,关闭对话框并返回1
    self.accept()

这里写的很简单,账号密码随便填,只要不是空就行了
第二行代码是将cancel按钮链接到QT内置的退出槽函数。
好了,主体功能写完了。

功能实现

其实就是写main函数了
看看我的代码:

if __name__ == '__main__':
  app = QApplication(sys.argv)
  dialog = logindialog()
  if dialog.exec_() == QDialog.Accepted:
    demo = Demo()
    demo.show()
    sys.exit(app.exec_())

首先,实例logindialog类,当对象返回接受时,就进入你的主界面了,然后你就实例化你的软件主体类。
开始愉快的玩耍吧~~

Mark一下陪伴我一路完成我整个项目开发、我最心爱的电脑~~

写在后面

感觉博客写起来简单,但具体实现过程却是很麻烦的,主要是Qt开发也还不是很熟练,总之对菜鸟来说,来自C++的东西,都不是很友好,只有熟练了各个函数后,才能写好。Qt开发其实相当牛逼的,感觉在界面上很棒。

到此这篇关于PyQt5设置登录界面及界面美化的实现的文章就介绍到这了,更多相关PyQt5设置登录界面内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • PyQt5+Caffe+Opencv搭建人脸识别登录界面

    最近开始学习Qt,结合之前学习过的caffe一起搭建了一个人脸识别登录系统的程序,新手可能有理解不到位的情况,还请大家多多指教. 我的想法是用opencv自带的人脸检测算法检测出面部,利用caffe训练好的卷积神经网络来提取特征,通过计算当前检测到的人脸与已近注册的所有用户的面部特征之间的相似度,如果最大的相似度大于一个阈值,就可以确定当前检测到的人脸对应为这个相似度最大的用户了. ###Caffe人脸识别 因为不断有新的用户加入,然而添加新用户后重新调整CNN的网络结构太费时间,所以不能用CN

  • pyqt5实现登录界面的模板

    本文实例为大家分享了pyqt5登录界面的实现模板,供大家参考,具体内容如下 说明 本例,展示了通过登录界面打开主界面的实现方式. 其中,登录的账号与密码判断都比较简单,请大家根据自己需要,自行完善补充. [如下代码,完全复制,直接运行,即可使用] import sys from PyQt5.QtWidgets import * from PyQt5.QtCore import * from PyQt5.QtGui import * ################################

  • pyqt5利用pyqtDesigner实现登录界面

    本文实例为大家分享了pyqt5利用pyqtDesigner实现登录界面的具体代码,供大家参考,具体内容如下 为便于操作 界面和逻辑分离 逻辑类: import sys import pymysql from loginUI import * //导入 from PyQt5.QtWidgets import * from PyQt5 import QtWidgets, QtCore, QtGui from PyQt5.QtCore import * from PyQt5.QtGui import

  • PyQt5设置登录界面及界面美化的实现

    写在前面 前一段时间博主刷了半个多月的LeetCode算法题,刷的归类为简单的那些题,做到自己简直要怀疑人生.想着人生在世,何苦这么为难自己呢,何不做点自己擅长的东西.想到博主还有个项目没做完呢,于是开始捣鼓起来.项目的最终成果是要写一个软件,把所有研究的内容可视化的展示出来,研究的内容都写的差不多了,还差个登录界面,于是就开始元气满满的干起来. 先上编译环境: Python3.7 pycharm2020专业版 PyQt5 博主习惯用Spyder做编译器,但如果做大项目,最好还是用pycharm

  • python通过PyQt5实现登录界面的示例代码

    目录 1. pyQt5简单使用 安装 界面化操作 2.开始实现登录界面 今天为大家介绍一个利用开发登录界面模板,基于pyqt5库,pyqt5这也一个PythonGUI界面开发的库,非常强 本例,展示了通过登录界面打开主界面的实现方式. 在开始实现登录界面前,先给大家普及一下PyQt5的安装以及使用 1. pyQt5简单使用 安装 pip install PyQt5 pip3.5 install pyqt5-tools 界面化操作 1.在win+R中输入designer并敲回车,即可启动Desig

  • Python实战项目用PyQt5制作漫画脸GUI界面

    目录 最终效果 前言 1.PyQt5的安装. 1.PyQt5库的安装. 2.qt designer 布局的使用. 1:打开这个设计师 2:创建一个窗口 3:设计界面,用鼠标拖动左边的控件. 4:ui转化为py 5:在python上面运行转化后的py文件 6:运行py文件 3.百度智能云api的调用. 4.调控界面的控件. 5.最终成果 6.总结 最终效果 前言 这是最近在学qt这个东西,然后又学会了调用api,然后就想了用pyqt5做一个GUI界面,后期也可以打包分享给其他人使用,所以就最近就写

  • Java实现简单GUI登录和注册界面

    本文实例为大家分享了Java实现简单GUI登录和注册界面的具体代码,供大家参考,具体内容如下 先看效果图: 登陆界面: 注册界面: 实现代码如下: 一.登陆界面 package cn.bms.view; import java.awt.Color; import java.awt.Dimension; import java.awt.Font; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; imp

  • js实现登录与注册界面

    完成登录与注册页面的HTML+CSS+JS,其中的输入项检查包括: 用户名6-12位 首字母不能是数字 只能包含字母和数字 密码6-12位 注册页两次密码是否一致 html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎你,请先登陆!</title> <script type="

  • java通过JFrame做一个登录系统的界面完整代码示例

    在java的JFrame内通过创建匿名对象的方式做登录界面 package com.sxt; import java.awt.Container; import java.awt.GridLayout; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.J

  • Python3 Tkinkter + SQLite实现登录和注册界面

    本文实例为大家分享了Python3 Tkinkter + SQLite 实现登录和注册界面,供大家参考,具体内容如下 Ubuntu14 + Python3.4 + Pycharm2018 一.设计数据库 数据库内容(login.db):用户名,密码,邮箱,密码错误次数(达到三次时锁定) create table loginuser ( username varchar(30) NOT NULL PRIMARY KEY , password varchar(16) NOT NULL , email

  • PyQt5 设置窗口全屏显示方式

    调用窗口的主程序如下 起作用的是window.showFullScreen()这个方法. if __name__=='__main__': app = QtWidgets.QApplication(sys.argv) window = MyMainWindow() window.showFullScreen() sys.exit(app.exec_()) 补充:PYQT5的UI界面自适应窗口大小 | Qtdesigner PYQT5设置自适应的窗口大小 目前网上的相关博客的介绍都太过于表面,本人

  • pyqt5制作登录窗口的详细过程

    首先要用designer设计ui界面 打开后就和c#一样拖动控件做ui界面 保存后是xxx.ui文件 再添加个工具 Arguments:-m PyQt5.uic.pyuic $FileName$ -o $FileNameWithoutExtension$.py 这个工具是把ui文件转换为py文件的 在ui文件右键选择新加的工具就会生成xxx.py了 import sys import os from PyQt5 import QtCore, QtGui, QtWidgets from PyQt5

  • Python利用PyQT5设置闹钟功能

    通过PyQt5实现设置一个小闹钟的功能,到了设置的时间后可以响起一段音乐来提醒. 导入UI界面组件相关的模块 from PyQt5.QtCore import * from PyQt5.QtWidgets import * from PyQt5.QtGui import * 导入应用操作相关的模块 import sys from PyQt5.QtMultimedia import * 初始化函数 init_ui() 函数,PyQt5 界面布局使用了三种,分别是垂直化布局.水平化布局.栅格布局.

随机推荐