PyQt5如何設(shè)置登錄界面及界面美化功能

這篇文章主要介紹“PyQt5如何設(shè)置登錄界面及界面美化功能”，在日常操作中，相信很多人在PyQt5如何設(shè)置登錄界面及界面美化功能問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”PyQt5如何設(shè)置登錄界面及界面美化功能”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

寫在前面

前一段時(shí)間刷了半個(gè)多月的LeetCode算法題，刷的歸類為簡(jiǎn)單的那些題，做到自己簡(jiǎn)直要懷疑人生。想著人生在世，何苦這么為難自己呢，何不做點(diǎn)自己擅長(zhǎng)的東西。想到博主還有個(gè)項(xiàng)目沒做完呢，于是開始搗鼓起來。項(xiàng)目的最終成果是要寫一個(gè)軟件，把所有研究的內(nèi)容可視化的展示出來，研究的內(nèi)容都寫的差不多了，還差個(gè)登錄界面，于是就開始元?dú)鉂M滿的干起來。

先上編譯環(huán)境：

• Python3.7

• pycharm2020專業(yè)版

• PyQt5

博主習(xí)慣用Spyder做編譯器，但如果做大項(xiàng)目，最好還是用pycharm，不然總會(huì)遇到各種問題，讓人頭大，況且pycharm的代碼填充簡(jiǎn)直不要太香。
好了，進(jìn)入正題。

控件配置和美化

背景設(shè)置

首先咱們的登錄界面一定要炫酷，這樣才能彰（唬）顯（得）技（?。┬g(shù)（人），找了半天，從身為資深程序媛的lp大人那里盜了張圖，上一下博主最終的登錄界面

打碼了軟件的名稱和其他隱私信息，這樣是不是有科技感了？雖然我覺得也不是很美觀，但也還行吧，畢竟博主可不是搞美工設(shè)計(jì)的。
那來講講這個(gè)界面是怎么做出來的。

背景元素添加

最初圖片上啥都沒有，就是一張純粹的圖片，上面的文字可以在PyQt5中通過代碼來添加，不過博主推薦使用一種最快捷的處理方式——PS，甚至都不用PS，博主用的是工科生寫論文必備軟件——visio，如下

這樣，我在背景圖片上添加了最上面的那行字，還有中間添加了一個(gè)半透明的蒙版，以及下面的一行英文。
看看原來的背景圖

這樣省去了很多工作。

登錄界面的類和方法

我先上代碼，再慢慢解釋。

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)

    # 設(shè)置界面控件

    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))
    # 設(shè)置透明度
    op1 = QGraphicsOpacityEffect()
    op1.setOpacity(0.5)
    self.nameEd1.setGraphicsEffect(op1)
    # 設(shè)置文本框?yàn)閳A角
    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中可以設(shè)置字體大小，如下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("請(qǐng)輸入賬號(hào)")
    # self.lineEdit_account.move(900, 540)
    self.verticalLayout.addWidget(self.lineEdit_account)

    self.lineEdit_password = QLineEdit()
    self.lineEdit_password.setPlaceholderText("請(qǐng)輸入密碼")
    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):
    # 賬號(hào)判斷
    if self.nameEd1.text() == "":
      return

    # 權(quán)限判斷
    if self.nameEd2.text() == "":
      return

    # 密碼判斷
    if self.nameEd3.text() == "":
      return

    # 通過驗(yàn)證，關(guān)閉對(duì)話框并返回1
    self.accept()

博主默認(rèn)讀者對(duì)PyQt5有一定的了解，導(dǎo)包過程不再贅述。下面開始講代碼

• 第一行代碼，建立一個(gè)類，這個(gè)類使用的是PyQt5中的QDialog也就是對(duì)話框；

• __init__是初始化方法，為了更好去理解，我沒有再去寫更多其他的方法，所有的設(shè)置按鈕，文本輸入框，都在這里進(jìn)行；

• 下面這幾行代碼分別表示設(shè)置界面名稱、圖標(biāo)和大??；

		self.setWindowTitle('XXXXXXX')
    self.setWindowIcon(QIcon('wheel.ico'))
    self.resize(1920, 1080)

self.setWindowFlags(Qt.WindowMinimizeButtonHint | Qt.WindowMaximizeButtonHint | Qt.WindowCloseButtonHint)這行代碼在界面頂端設(shè)置了最小化、最大化和關(guān)閉點(diǎn)擊事件，如下：

下面這三行代碼挺關(guān)鍵，就是把咱前面設(shè)計(jì)好的背景圖設(shè)為登錄界面的背景，用QPalette方法；

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

下面進(jìn)入界面的控件設(shè)置環(huán)節(jié)：

從我上面的那張整體圖來看，應(yīng)該是有3個(gè)文本輸入框，分別是賬號(hào)、權(quán)限、密碼，以及兩個(gè)按鈕，分別是確認(rèn)和取消按鈕，采用的布局是垂直布局，如果對(duì)PyQt5布局還有困惑的，可以去看我我之前的博客——PyQt5的相對(duì)布局管理。

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

在設(shè)置垂直布局前，我先新建了一個(gè)QFrame，這個(gè)玩意兒很有用，我通過它，把我的垂直布局組合在一起，然后去設(shè)置它的形狀、線條等。我通過move函數(shù)把它移動(dòng)到窗口的中間來。

然后就建立一個(gè)垂直布局窗口：self.mainLayout = QVBoxLayout(self.frame)

后面就是為這個(gè)垂直布局窗口添加控件了，由于控件都差不多，我先重點(diǎn)介紹第一個(gè)控件。

self.nameEd1 = QLineEdit(self)
    self.nameEd1.setPlaceholderText("Account")
    self.nameEd1.setFont(QFont('Arial', 24))
    # 設(shè)置透明度
    op1 = QGraphicsOpacityEffect()
    op1.setOpacity(0.5)
    self.nameEd1.setGraphicsEffect(op1)
    # 設(shè)置文本框?yàn)閳A角
    self.nameEd1.setStyleSheet('''QLineEdit{border-radius:5px;}''')
    # self.nameLb1.setBuddy(self.nameEd1)

用setPlaceholderText函數(shù)來設(shè)置文本框里面的提示內(nèi)容self.nameEd1.setPlaceholderText("Account")
然后為這個(gè)文本框設(shè)置字體和大小self.nameEd1.setFont(QFont('Arial', 24))
后面self.nameEd1.setGraphicsEffect(op1)是設(shè)置這個(gè)控件的透明度，主要是為了美觀，注意，我每設(shè)置一個(gè)控件就定義了一個(gè)變量來設(shè)置透明度，如果我只設(shè)置一個(gè)的話，那它修改的只是最后一個(gè)控件的透明度。這里不注意很容易搞錯(cuò)。
接下來我用QSS來美化文本框，就這行代碼self.nameEd1.setStyleSheet('''QLineEdit{border-radius:5px;}''')，我把文本框修改為圓角的了，里面還有很多參數(shù)可以修改，比如顏色，字體等等。

下面再來看看我對(duì)按鈕控件的修改和美化：

		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中可以設(shè)置字體大小，如下font-size:24px;

同樣設(shè)置透明度，然后QSS里面設(shè)置的東西就更復(fù)雜了，background是按鈕背景顏色，QPushButton:hover是指當(dāng)鼠標(biāo)滑動(dòng)到按鈕上市按鈕顯示的顏色。
后面類似self.mainLayout.addWidget(self.nameEd1)這樣的代碼，就是把控件添加到布局里面去了，不多說了。

控件都添加完了，下面是最重要的一步，為你的OK按鈕添加回調(diào)函數(shù)，看下面代碼：

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

第一行是為OK按鈕添加了一個(gè)槽函數(shù)，函數(shù)名是on_pushButton_enter_clicked，我們來看看這個(gè)函數(shù)是啥樣的：

  def on_pushButton_enter_clicked(self):
    # 賬號(hào)判斷
    if self.nameEd1.text() == "":
      return

    # 權(quán)限判斷
    if self.nameEd2.text() == "":
      return

    # 密碼判斷
    if self.nameEd3.text() == "":
      return

    # 通過驗(yàn)證，關(guān)閉對(duì)話框并返回1
    self.accept()

這里寫的很簡(jiǎn)單，賬號(hào)密碼隨便填，只要不是空就行了
第二行代碼是將cancel按鈕鏈接到QT內(nèi)置的退出槽函數(shù)。
好了，主體功能寫完了。

功能實(shí)現(xiàn)

其實(shí)就是寫main函數(shù)了
看看我的代碼：

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

首先，實(shí)例logindialog類，當(dāng)對(duì)象返回接受時(shí)，就進(jìn)入你的主界面了，然后你就實(shí)例化你的軟件主體類。
開始愉快的玩耍吧~~

Mark一下陪伴我一路完成我整個(gè)項(xiàng)目開發(fā)、我最心愛的電腦~~

寫在后面

感覺寫起來簡(jiǎn)單，但具體實(shí)現(xiàn)過程卻是很麻煩的，主要是Qt開發(fā)也還不是很熟練，總之對(duì)菜鳥來說，來自C++的東西，都不是很友好，只有熟練了各個(gè)函數(shù)后，才能寫好。Qt開發(fā)其實(shí)相當(dāng)牛逼的，感覺在界面上很棒。

到此，關(guān)于“PyQt5如何設(shè)置登錄界面及界面美化功能”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！