1. 程式人生 > 程式設計 >詳解Python GUI程式設計之PyQt5入門到實戰

詳解Python GUI程式設計之PyQt5入門到實戰

1. PyQt5基礎

1.1 GUI程式設計學什麼

  • 大致瞭解你所選擇的GUI庫
  • 基本的程式的結構:使用這個GUI庫來執行你的GUI程式
  • 各種控制元件的特性和如何使用
  • 控制元件的樣式
  • 資源的載入
  • 控制元件的佈局
  • 事件和訊號
  • 動畫特效
  • 介面跳轉
  • 設計工具的使用

1.2 PyQT是什麼

QT是跨平臺C++庫的集合,它實現高階API來訪問現代桌面和移動系統的許多方面。這些服務包括定位和定位服務、多媒體、NFC和藍芽連線、基於Chromium的web瀏覽器以及傳統的UI開發。PyQt5是Qt v5的一組完整的Python繫結。它被實現為超過35個擴充套件模組,並使Python在所有支援的平臺(包括IOS和Android)上被用作C++的替代應用程式開發語言。PyQT5也可以嵌入在基於C++的應用程式中,以允許這些應用程式的使用者配置或增強這些應用程式的功能。

1.3 PyQT的優勢

  • 簡單好用
  • 功能強大
  • 跨平臺支援
  • 效能高
  • 文件齊全:PyQT本身就是對QT庫Python的繫結,在繫結的時候保持了原有的QT庫的API。也就是說,PyQT除了自己的文件外,也幾乎可以通用QT文件。
  • 穩定性高:面向物件、訊號與槽的機制、介面設計與業務程式碼完全隔離
  • 生態支援:QU Designer進行圖形介面設計、ui轉換成py檔案、資源處理
  • 開源免費:PyQT是雙重許可的,開發人員可以在GPL和商業許可之間進行選擇。採用GPL協議,軟體著作權屬於開發者本人所有,受國際相關版權法保護,允許其他使用者對原作者軟體進行復制和發行,也可以更改後髮型自己的軟體。

1.4 開發環境的安裝

首先,基本的 Python3 環境和 PyCharm 開發工具的安裝,由於比較簡單,博主在這裡不再詳細演示了!實在有問題的可以自行Google或者百度。其次就是GUI開發環境的安裝,也就是安裝PyQT5。這裡演示在Python的虛擬環境中來安裝PyQT5(Ubuntu Linux系統):

# 在Python全域性環境中安裝pipenv
$ pip3 install pipenv -i https://pypi.tuna.tsinghua.edu.cn/simple

# 建立專案目錄
$ mkdir pyqt5-pro

# 進入專案目錄
$ cd pyqt5-pro/

# 建立虛擬環境
$ pipenv --three

# 啟用虛擬環境(啟用環境後會自動建立Pipfile檔案)
$ pipenv shell

# 為加速安裝,將源改為國內源
(pyqt5-pro) $ vim Pipfile
url = "https://pypi.tuna.tsinghua.edu.cn/simple"

# 安裝pyqt5庫
(pyqt5-pro) $ pipenv install pyqt5

這個時候我們使用Pycharm開啟這個專案資料夾:

在這裡插入圖片描述

可以從設定中看到該專案依賴的Python環境:

在這裡插入圖片描述

1.5 第一個pyqt5桌面應用

示例程式碼:

from PyQt5.Qt import *
import sys

if __name__ == '__main__':
 # 建立QApplication類的例項
 app = QApplication(sys.argv)
 # 建立一個視窗
 window = QWidget()
 # 設定視窗標題
 window.setWindowTitle('Hello World!')
 # 設定視窗尺寸
 window.resize(400,400)
 # 移動視窗位置
 window.move(1000,300)
 # 建立label控制元件
 label = QLabel(window)
 # 為控制元件設定文字
 label.setText('Hello World!')
 # 移動空間的位置
 label.move(160,160)
 # 顯示視窗
 window.show()
 # 進入程式的主迴圈,並通過exit函式確保主迴圈安全結束
 sys.exit(app.exec_())

效果圖[在windows平臺中顯示有差別於Linux(注意我這不是Mac OS系統,只是ubuntu linux系統使用了Mac OS的主題)]:

在這裡插入圖片描述

2. QtDesigner的使用

2.1 安裝和配置

安裝Qt的工具包:

pip install PyQt5-tools -i https://pypi.douban.com/simple

安裝完成後,QTdesigner 就在你的 python 環境下的擴充套件包裡面了!

將QtDesigner整合到Pycharm:

在這裡插入圖片描述

2.2 快速入門

可以通過配置好的PyCharm擴充套件工具直接開啟QTDesigner:

在這裡插入圖片描述

簡單介紹QTDesigner幾個主要部分:

在這裡插入圖片描述

Ctrl+S後可以將其儲存到專案根目錄:

在這裡插入圖片描述

2.3 將ui檔案轉換成py檔案

第一種方法:

$ python -m PyQt5.uic.pyuic demo.ui -o demo.py

第二種方法:

$ pyuic5 demo.ui -o demo.py

第三種方法:把第一種方法中命令整合到 PyCharm 中,首先需要使用 $ which python 檢視當前使用的Python目錄,

(pyqt5-pro) $ which python
/home/thanlon/.local/share/virtualenvs/pyqt5-pro-ihgfaRRJ/bin/python

將其複製貼上到【Program】部分。然後再把 -m PyQt5.uic.pyuic $FileName$ -o $FileNameWithoutExtension$.py 加入到【Arguments】部分。再把 $FileDir$ 加入到【Working directory】中:

在這裡插入圖片描述

轉換之後,在專案目錄下會生成.py檔案:

在這裡插入圖片描述

2.4 水平佈局

使用水平佈局的方式在QtDesigner中做一些簡單的操作,如下圖所示:

在這裡插入圖片描述

將.ui檔案轉換成.py檔案後新建 RunMainWinHorizontalLayout.py 檔案用來執行轉換之後的.py檔案 MainWinHorizontalLayout.py

import sys
import MainWinHorizontalLayout
from PyQt5.QtWidgets import QApplication,QMainWindow

if __name__ == '__main__':
 # 建立QApplication類的例項
 app = QApplication(sys.argv)
 # 建立一個主視窗
 mainWindow = QMainWindow()
 # 建立Ui_MainWindow的例項
 ui = MainWinHorizontalLayout.Ui_MainWindow()
 # 呼叫setupUi在指定視窗(主視窗)中新增控制元件
 ui.setupUi(mainWindow)
 # 顯示視窗
 mainWindow.show()
 # 進入程式的主迴圈,並通過exit函式確保主迴圈安全結束
 sys.exit(app.exec_())

執行這個Python檔案得到:

在這裡插入圖片描述

2.5 垂直佈局

使用垂直佈局的方式在QtDesigner中了做一些簡單的操作,如下圖所示:

在這裡插入圖片描述

將.ui檔案轉換成.py檔案後新建 RunMainWinVerticalLayout.py 檔案用來執行轉換之後的.py檔案 MainWinVerticalLayout.py

import sys
import MainWinVerticalLayout
from PyQt5.QtWidgets import QApplication,QMainWindow

if __name__ == '__main__':
 # 建立QApplication類的例項
 app = QApplication(sys.argv)
 # 建立一個主視窗
 mainWindow = QMainWindow()
 # 建立Ui_MainWindow的例項
 ui = MainWinVerticalLayout.Ui_MainWindow()
 # 呼叫setupUi在指定視窗(主視窗)中新增控制元件
 ui.setupUi(mainWindow)
 # 顯示視窗
 mainWindow.show()
 # 進入程式的主迴圈,並通過exit函式確保主迴圈安全結束
 sys.exit(app.exec_())

執行這個.py檔案得到:

在這裡插入圖片描述

2.6 同時使用水平佈局和垂直佈局

“姓名”和“薪資”兩行都使用水平佈局,“備註+文字框”和它們一起使用垂直佈局:

在這裡插入圖片描述

將.ui檔案轉換成.py檔案後新建 RunMainWinHVLayout.py 檔案用來執行轉換之後的.py檔案:

import sys
import RunMainWinVHLayout
from PyQt5.QtWidgets import QApplication,QMainWindow

if __name__ == '__main__':
 # 建立QApplication類的例項
 app = QApplication(sys.argv)
 # 建立一個主視窗
 mainWindow = QMainWindow()
 # 建立Ui_MainWindow的例項
 ui = RunMainWinVHLayout.Ui_MainWindow()
 # 呼叫setupUi在指定視窗(主視窗)中新增控制元件
 ui.setupUi(mainWindow)
 # 顯示視窗
 mainWindow.show()
 # 進入程式的主迴圈,並通過exit函式確保主迴圈安全結束
 sys.exit(app.exec_())

在這裡插入圖片描述

2.7 柵格佈局

下面是使用柵格佈局設計的:

在這裡插入圖片描述

將.ui檔案轉換成.py檔案後新建 RunMainWinGridLayout.py 檔案用來執行轉換之後的.py檔案:

import sys
import MainWinGridLayout
from PyQt5.QtWidgets import QApplication,QMainWindow

if __name__ == '__main__':
 # 建立QApplication類的例項
 app = QApplication(sys.argv)
 # 建立一個主視窗
 mainWindow = QMainWindow()
 # 建立Ui_MainWindow的例項
 ui = MainWinGridLayout.Ui_MainWindow()
 # 呼叫setupUi在指定視窗(主視窗)中新增控制元件
 ui.setupUi(mainWindow)
 # 顯示視窗
 mainWindow.show()
 # 進入程式的主迴圈,並通過exit函式確保主迴圈安全結束
 sys.exit(app.exec_())

在這裡插入圖片描述

2.8 表單佈局

下面是使用表單佈局設計的:

在這裡插入圖片描述

將.ui檔案轉換成.py檔案後新建 RunMainWinFormLayout.py 檔案用來執行轉換之後的.py檔案:

import sys
import MainWinFormLayout
from PyQt5.QtWidgets import QApplication,QMainWindow

if __name__ == '__main__':
 # 建立QApplication類的例項
 app = QApplication(sys.argv)
 # 建立一個主視窗
 mainWindow = QMainWindow()
 # 建立Ui_MainWindow的例項
 ui = MainWinFormLayout.Ui_MainWindow()
 # 呼叫setupUi在指定視窗(主視窗)中新增控制元件
 ui.setupUi(mainWindow)
 # 顯示視窗
 mainWindow.show()
 # 進入程式的主迴圈,並通過exit函式確保主迴圈安全結束
 sys.exit(app.exec_())

右鍵選擇佈局的時候選擇“在窗體佈局中佈局”。

在這裡插入圖片描述

2.9 容器佈局

佈局和容器之間可以相互轉換,下面以 QFrame 和 Grid Layout 相互轉換為例子。第一個是把容器 QFrame 轉換成 Grid Layout,第二個是把 Grid Layout 轉換成容器 QFrame:

在這裡插入圖片描述

將 .ui 檔案轉換成 .py 檔案後新建 RunMainWinContainerLayout.py 檔案用來執行轉換之後的 .py 檔案:

import sys

from PyQt5.QtWidgets import QApplication,QMainWindow
import MainWinContainerLayout
if __name__ == '__main__':
 # 建立QApplication類的例項
 app = QApplication(sys.argv)
 # 建立一個主視窗
 mainWindow = QMainWindow()
 # 建立Ui_MainWindow的例項
 ui = MainWinContainerLayout.Ui_MainWindow()
 # 呼叫setupUi在指定視窗(主視窗)中新增控制元件
 ui.setupUi(mainWindow)
 # 顯示視窗
 mainWindow.show()
 # 進入程式的主迴圈,並通過exit函式確保主迴圈安全結束
 sys.exit(app.exec_())

在這裡插入圖片描述

2.10 絕對佈局

直接把空間放到容器或者視窗中預設是絕對佈局,根據座標屬性可以控制顯示的位置:

在這裡插入圖片描述

將 .ui 檔案轉換成 .py 檔案後新建 RunMainWinAbsoluteLayout.py 檔案用來執行轉換之後的 .py 檔案,發現出現報錯:

/home/thanlon/PycharmProjects/venv/pyqt5-pro/bin/python /home/thanlon/PycharmProjects/pyqt5-pro/2.QtDesigner/絕對佈局/RunMainWinHorizontalLayout.py
Traceback (most recent call last):
File "/home/thanlon/PycharmProjects/pyqt5-pro/2.QtDesigner/絕對佈局/RunMainWinHorizontalLayout.py",line 2,in <module>
import MainWinAbsoluteLayout
File "/home/thanlon/PycharmProjects/pyqt5-pro/2.QtDesigner/絕對佈局/MainWinAbsoluteLayout.py",line 75,in <module>
from PyQt5 import QtWebKitWidgets
ImportError: cannot import name 'QtWebKitWidgets' from 'PyQt5' (/home/thanlon/PycharmProjects/venv/pyqt5-pro/lib/python3.8/site-packages/PyQt5/__init__.py)

在這裡插入圖片描述

可以使用 from PyQt5.QtWebEngineWidgets import * 替換 from PyQt5 import QtWebKitWidgets

MainWinAbsoluteLayout.py:

# -*- coding: utf-8 -*-
from PyQt5 import QtCore,QtGui,QtWidgets

class Ui_MainWindow(object):
 def setupUi(self,MainWindow):
  	...
  # self.webView = QtWebKitWidgets.QWebView(self.centralwidget)
  self.webView = QWebEngineView(self.centralwidget)
  ...

# from PyQt5 import QtWebKitWidgets
from PyQt5.QtWebEngineWidgets import *

RunMainWinAbsoluteLayout.py:

import sys
import MainWinAbsoluteLayout
from PyQt5.QtWidgets import QApplication,QMainWindow

if __name__ == '__main__':
 # 建立QApplication類的例項
 app = QApplication(sys.argv)
 # 建立一個主視窗
 mainWindow = QMainWindow()
 # 建立Ui_MainWindow的例項
 ui = MainWinAbsoluteLayout.Ui_MainWindow()
 # 呼叫setupUi在指定視窗(主視窗)中新增控制元件
 ui.setupUi(mainWindow)
 # 顯示視窗
 mainWindow.show()
 # 進入程式的主迴圈,並通過exit函式確保主迴圈安全結束
 sys.exit(app.exec_())

2.11 佈局中的間隔和分割線

間隔分為水平和垂直間隔,分別是 Horizontal Spacer 和 Vertical Spacer 兩個控制元件。分割線也分為水平和垂直分割線,使用的控制元件分別是 Horizontal Line 和 Vertical Line。分割線控制元件可以讓兩個控制元件之間有一條分割線,通常用分割線控制元件將相同或類似功能的控制元件放在一起,形成一個組。

在這裡插入圖片描述

RunMainWinSpacerLineLayout.py:

import sys

from PyQt5.QtWidgets import QApplication,QMainWindow
import MainWinSpacerLineLayout

if __name__ == '__main__':
 # 建立QApplication類的例項
 app = QApplication(sys.argv)
 # 建立一個主視窗
 mainWindow = QMainWindow()
 # 建立Ui_MainWindow的例項
 ui = MainWinSpacerLineLayout.Ui_MainWindow()
 # 呼叫setupUi在指定視窗(主視窗)中新增控制元件
 ui.setupUi(mainWindow)
 # 顯示視窗
 mainWindow.show()
 # 進入程式的主迴圈,並通過exit函式確保主迴圈安全結束
 sys.exit(app.exec_())

在這裡插入圖片描述

2.12 控制元件最大尺寸和最小尺寸

控制元件最大尺寸和最小尺寸分別由控制元件的 minimunmSize 和 maximumSize 屬性來設定的,

在這裡插入圖片描述

2.13 尺寸策略

每個控制元件都有期望尺寸,每一個控制元件的期望尺寸都是不一樣的。未設定控制元件的最大值和最小值,推薦設定的尺寸,即建議尺寸。對大多數控制元件,期望尺寸是固定值,不能夠去設定的。我們可以獲取控制元件的期望尺寸:

在這裡插入圖片描述

RunMainWinSizePolicyLayout.py:

# -*- coding: utf-8 -*-
from PyQt5 import QtCore,MainWindow):
  pass
  # 列印pushButton控制元件的期望尺寸
  push_button_width = self.pushButton.sizeHint().width()
  push_button_height = self.pushButton.sizeHint().height()
  print('pushButton控制元件期望尺寸的寬度:{}px'.format(push_button_width))
  print('pushButton控制元件期望尺寸的高度:{}px'.format(push_button_height))
  """
  pushButton控制元件期望尺寸的寬度:48px
  pushButton控制元件期望尺寸的高度:25px
  """
  pass
  # 列印line_Edit控制元件的期望尺寸
  line_Edit_width = self.lineEdit.sizeHint().width()
  line_Edit_height = self.lineEdit.sizeHint().height()
  print('lineEdit控制元件期望尺寸的寬度:{}px'.format(line_Edit_width))
  print('lineEdit控制元件期望尺寸的高度:{}px'.format(line_Edit_height))
  """
  lineEdit控制元件期望尺寸的寬度:142px
  lineEdit控制元件期望尺寸的高度:25px
  """
  pass
 def retranslateUi(self,MainWindow):
  pass

還有最小期望尺寸的概念,對於很多控制元件期望尺寸和最小期望尺寸是一樣的,如 pushButton 控制元件:

# -*- coding: utf-8 -*-
from PyQt5 import QtCore,MainWindow):
  pass
  # 列印pushButton控制元件的最小期望尺寸
  push_button_minimum_width = self.pushButton.minimumSizeHint().width()
  push_button_minimum_height = self.pushButton.minimumSizeHint().height()
  print('pushButton控制元件最小期望尺寸的寬度:{}px'.format(push_button_minimum_width))
  print('pushButton控制元件最小期望尺寸的高度:{}px'.format(push_button_minimum_height))
  """
  pushButton控制元件最小期望尺寸的寬度:48px
  pushButton控制元件最小期望尺寸的高度:25px
  """
  pass
 def retranslateUi(self,MainWindow):
  pass

也有不一樣的如 lineEdit 控制元件:

# -*- coding: utf-8 -*-
from PyQt5 import QtCore,MainWindow):
  pass
  # 列印line_Edit控制元件的最小期望尺寸
  line_Edit_minimum_width = self.lineEdit.minimumSizeHint().width()
  line_Edit_minimum_height = self.lineEdit.minimumSizeHint().height()
  print('lineEdit控制元件最小期望寬度:{}px'.format(line_Edit_minimum_width))
  print('lineEdit控制元件最小期望高度:{}px'.format(line_Edit_minimum_height))
  """
  lineEdit控制元件最小期望寬度:59px
  lineEdit控制元件最小期望高度:25px
  """
  pass
 def retranslateUi(self,MainWindow):
  pass

尺寸策略的應用,使用常用的屬性值 Expanding:

在這裡插入圖片描述

在這裡插入圖片描述

RunMainWinExpendingLayout.py:

import sys

from PyQt5.QtWidgets import QApplication,QMainWindow
import MainWinExpandingLayout

if __name__ == '__main__':
 # 建立QApplication類的例項
 app = QApplication(sys.argv)
 # 建立一個主視窗
 mainWindow = QMainWindow()
 # 建立Ui_MainWindow的例項
 ui = MainWinExpandingLayout.Ui_MainWindow()
 # 呼叫setupUi在指定視窗(主視窗)中新增控制元件
 ui.setupUi(mainWindow)
 # 顯示視窗
 mainWindow.show()
 # 進入程式的主迴圈,並通過exit函式確保主迴圈安全結束
 sys.exit(app.exec_())

在這裡插入圖片描述

2.14 設定控制元件之間的夥伴關係

把兩個控制元件關聯到一起,通過其中一個控制元件控制另外一個控制元件。使用 Form Layout 佈局在裡面新增 Label 和 Line Edit 空間,

在這裡插入圖片描述

在這裡插入圖片描述

預覽後同時按鍵盤中的 “ALT”和“A” 滑鼠會定位到姓名的文字框中。同理,“ALT”和“B” 滑鼠會定位到年齡的文字框中。

在這裡插入圖片描述

RunMainWinBuddyLayout.py:

import sys
import MainWinBuddyLayout
from PyQt5.QtWidgets import QApplication,QMainWindow

if __name__ == '__main__':
 # 建立QApplication類的例項
 app = QApplication(sys.argv)
 # 建立一個主視窗
 mainWindow = QMainWindow()
 # 建立Ui_MainWindow的例項
 ui = MainWinBuddyLayout.Ui_MainWindow()
 # 呼叫setupUi在指定視窗(主視窗)中新增控制元件
 ui.setupUi(mainWindow)
 # 顯示視窗
 mainWindow.show()
 # 進入程式的主迴圈,並通過exit函式確保主迴圈安全結束
 sys.exit(app.exec_())

2.15 修改控制元件的Tab順序

控制元件佈局好之後,如果是要求使用者輸入的控制元件,可以使用 Tab 鍵進行切換。實際上使用 Tab 鍵切換預設是按照控制元件新增順序,當然還可以修改控制元件的 Tab 順序。修改控制元件的 Tab 順序有兩種方法,方法一:選擇 Edit --> 編輯 Tab 順序:

在這裡插入圖片描述

雙擊序號可切換序號:

在這裡插入圖片描述

也可以選中序號,右鍵選擇”製表符順序列表“來調整順序:

在這裡插入圖片描述

2.16 訊號與槽的設定

訊號(signal)與槽(slot)是 QT 的核心機制,也是 PyQt 的核心機制。訊號:物件或者控制元件發出去的訊息。單擊一個按鈕的時候按鈕就會向外部發送單擊的訊息,這些傳送出去的訊號需要一些程式碼來攔截,這些程式碼就是槽。槽的本質是函式或方法,單擊一個按鈕其實就是執行了槽所對應的函式或方法,這個函式或方法本質上就相當於這個按鈕的單擊事件。

簡單理解就是:訊號就是一個單擊事件,槽就是單擊事件所對應的事件函式。一個訊號可以和多個槽繫結,一個槽可以攔截多個訊號。

下面使用 QtDesigner 來完成訊號與槽的繫結:

在這裡插入圖片描述

選擇編輯訊號/槽,為 “關閉視窗” 按鈕新增點選事件,槽為 close( ) 函式:

在這裡插入圖片描述

預覽之後,點選按鈕會關閉視窗:

在這裡插入圖片描述

例子1:控制文字輸入框的顯示和隱藏

在這裡插入圖片描述

在這裡插入圖片描述

預覽後的效果:

在這裡插入圖片描述

在這裡插入圖片描述

例子2:控制文字輸入框是否可用

在這裡插入圖片描述

在這裡插入圖片描述

預覽後的效果:

在這裡插入圖片描述

在這裡插入圖片描述

2.17 新增選單和工具欄

使用 QtDesigner 建立一個主視窗時,預設會在主視窗的上方新增一行選單欄,在最下方新增一行狀態列。如果我們需要新增工具欄則需要單擊右鍵選擇【新增工具欄】,這部分主要探討如何在視窗中建立選單和工具欄以及分別向選單欄、工具欄中新增選單項、按鈕。

預設選單已經建立,所以只需要為選單新增選單項:

在這裡插入圖片描述

建立工具欄並且將按鈕新增到工具欄中:

在這裡插入圖片描述

3. PyQt5核心API的使用

3.1 建立主視窗

有三種類型的視窗,分別是 QMainWindow、QDialog 和 QWidget。QMainWindow:可以包括選單欄、工具欄、狀態列和標題欄,是最常見的視窗形式。QDialog:是對話視窗的基類。沒有選單欄、工具欄、標題欄。QWidget:不確定視窗的型別,就可以使用 QWidget。建立一個主視窗:

FirstMainWindow.py:

"""
@from:https://pythoneers.cn
@author: qq3330447288
@contact: [email protected]
@software: PyCharm
@file: FirstMainWindow.py
@time: 2020/11/17 上午9:50
"""
import sys
from PyQt5.QtWidgets import QMainWindow,QApplication
from PyQt5.QtGui import QIcon

class FirstMainWin(QMainWindow):
 def __init__(self):
  """
  初始化
  :param parent:控制元件放到parent
  """
  super(FirstMainWin,self).__init__()
  # 設定主視窗的標題
  self.setWindowTitle('第一個視窗應用')
  # 設定視窗的尺寸
  self.resize(400,300)
  # 獲取當前的狀態列(預設是有狀態列的)
  self.status = self.statusBar()
  # 設定狀態列顯示的訊息(訊息只存在5s)
  self.status.showMessage('只顯示5s的訊息!',5000)

if __name__ == '__main__':
 # 建立一個應用程式物件(傳入引數)
 app = QApplication(sys.argv)
 # 設定應用程式的圖示
 app.setWindowIcon(QIcon('../images/Dragon.ico'))
 # 建立視窗類的物件
 main = FirstMainWin()
 # 顯示視窗
 main.show()
 # 呼叫exit()進入程式的主迴圈
 sys.exit(app.exec_())

3.2 主視窗居中顯示

PyQt5中沒有API直接讓視窗居中,所以需要自己去寫。主視窗居中顯示需要計算視窗的左上角的座標值,橫座標可以通過螢幕的寬度減去視窗的寬度除以2,縱座標可以通過螢幕的高度減去視窗的高度除以2。完成計算後可以使用move方法移動視窗。

CenterWindow.py:

"""
@from:https://pythoneers.cn
@author: qq3330447288
@contact: [email protected]
@software: PyCharm
@file: FirstMainWindow.py
@time: 2020/11/17 上午9:50
"""
import sys
from PyQt5.QtWidgets import QMainWindow,QApplication,QDesktopWidget
from PyQt5.QtGui import QIcon

class CenterMainWin(QMainWindow):
 def __init__(self):
  """
  初始化
  :param parent:控制元件放到parent
  """
  super(CenterMainWin,self).__init__()
  # 設定主視窗的標題
  self.setWindowTitle('視窗居中')
  # 設定視窗的尺寸
  self.resize(400,5000)

 def center(self):
  # 獲取螢幕座標系
  screen = QDesktopWidget().screenGeometry()
  # 獲取視窗座標系
  size = self.geometry()
  left = (screen.width() - size.width()) / 2
  top = (screen.height() - size.height()) / 2
  # 移動視窗
  self.move(left,top)

if __name__ == '__main__':
 # 建立一個應用程式物件(傳入引數)
 app = QApplication(sys.argv)
 # 設定應用程式的圖示
 app.setWindowIcon(QIcon('../images/Dragon.ico'))
 # 建立視窗類的物件
 main = CenterMainWin()
 # 顯示視窗
 main.show()
 # 視窗居中
 main.center()
 # 呼叫exit()進入程式的主迴圈
 sys.exit(app.exec_())

在這裡插入圖片描述

3.3 退出應用程式

退出應用程式,即退出整個視窗,

QuitApplication.py:

"""
@from:https://pythoneers.cn
@author: qq3330447288
@contact: [email protected]
@software: PyCharm
@file: QuitApplication.py
@time: 2020/11/17 上午10:48
"""
import sys
from PyQt5.QtWidgets import QMainWindow,QPushButton,QHBoxLayout,QWidget,QApplication


class QuitApplication(QMainWindow):
 def __init__(self):
  super(QuitApplication,self).__init__()
  self.resize(300,150)
  self.setWindowTitle('退出應用程式')
  # 新增按鈕
  self.buttion1 = QPushButton('退出應用程式')
  # 將訊號與槽關聯。訊號繫結到方法,每一個訊號都有一個connect方法
  self.buttion1.clicked.connect(self.onClickButton)
  # 設定水平佈局(將按鈕放到佈局中)
  layout = QHBoxLayout()
  layout.addWidget(self.buttion1)
  # 把佈局放到QWidget(所有的控制元件都放到Qwiget,Qwiget可以充滿整個視窗)
  main_frame = QWidget()
  main_frame.setLayout(layout)
  # 框架放到視窗上
  self.setCentralWidget(main_frame)

 def onClickButton(self):
  # 通過sender獲取button
  sender = self.sender()
  # 獲取button的文字
  print(sender.text() + ' 按鈕被按下!')
  # 建立應用程式物件
  app = QApplication.instance()
  # 退出應用程式
  app.quit()

if __name__ == '__main__':
 app = QApplication(sys.argv)
 main = QuitApplication()
 main.show()
 sys.exit(app.exec_())

在這裡插入圖片描述

在這裡插入圖片描述

3.4 螢幕座標系

視窗的位置可以通過視窗的左上角的座標來描述,這個座標就是相對於螢幕座標系。我們可以獲取視窗相關的一系列引數:

"""
@from:https://pythoneers.cn
@author: qq3330447288
@contact: [email protected]
@software: PyCharm
@file: ScreenGeometry.py
@time: 2020/11/17 上午11:15
"""
import sys
from PyQt5.QtWidgets import QApplication,QPushButton


def on_click_btn():
 """
 單擊button列印視窗的座標和寬度和高度
 :return:
 """
 print('onclick')
 print('------1------')
 print('widget.x() = %d' % widget.x()) # 視窗橫座標
 print('widget.y() = %d' % widget.y()) # 視窗縱座標
 print('widget.width() = %d' % widget.width()) # 工作區寬度
 print('widget.height() = %d' % widget.height()) # 工作去高度
 print('------2------')
 print('widget.geometry().x() = %d' % widget.geometry().x()) # 工作區橫座標
 print('widget.geometry().y() = %d' % widget.geometry().y()) # 工作區縱座標
 print('widget.geometry().width() = %d' % widget.geometry().width()) # 工作區寬度
 print('widget.geometry().height() = %d' % widget.geometry().height()) # 工作區高度
 print('------3------')
 print('widget.geometry().x() = %d' % widget.frameGeometry().x()) # 視窗橫座標
 print('widget.geometry().y() = %d' % widget.frameGeometry().y()) # 視窗縱座標
 print('widget.geometry().width() = %d' % widget.frameGeometry().width()) # 視窗寬度
 print('widget.geometry().height() = %d' % widget.frameGeometry().height()) # 視窗高度(包括標題欄)


if __name__ == '__main__':
 app = QApplication(sys.argv)
 # 使用Qwigit建立視窗
 widget = QWidget()
 # 在視窗放按鈕
 btn = QPushButton(widget)
 # 設定按鈕的文字
 btn.setText('按鈕')
 # 設定按鈕相對於視窗(工作區)的位置
 btn.move(10,10)
 # 繫結槽
 btn.clicked.connect(on_click_btn)
 # 設定工作區的尺寸
 widget.resize(300,300)
 # 設定視窗的座標(對於螢幕的位置)
 widget.move(200,200)
 # 設定視窗標題欄文字
 widget.setWindowTitle('螢幕座標系')
 # 顯示視窗
 widget.show()
 # 進入事件迴圈
 sys.exit(app.exec_())

在這裡插入圖片描述

視窗相對於座標系的位置和尺寸,側面可以得到標題欄的高度是31px。

3.5 設定視窗和應用程式圖示

使用 setWindowIcon 方法來設定圖示,視窗的 setWindowIcon 方法用於設定視窗的圖示,只在 Windows 中可用,只能在標題欄左上角顯示圖示。QApplication 中的 setWindowIcon 方法可以用來設定主視窗的圖示和應用程式的圖示,但是如果主視窗已經設定了的圖示,這裡只能用於設定應用程式的圖示。

"""
@from:https://pythoneers.cn
@author: qq3330447288
@contact: [email protected]
@software: PyCharm
@file: WinAndApplicationIcon.py.py
@time: 2020/11/17 上午11:33
"""
import sys
from PyQt5.QtWidgets import QMainWindow,QApplication
from PyQt5.QtGui import QIcon


class WinAndApplicationIcon(QMainWindow):
 def __init__(self):
  super(WinAndApplicationIcon,self).__init__()
  self.init_ui()

 def init_ui(self):
  # 設定主視窗的標題
  self.setWindowTitle('設定視窗圖示')
  # 同時設定主視窗的尺寸和位置
  self.setGeometry(400,400,300,200)
  # 設定視窗圖示
  self.setWindowIcon(QIcon('../images/Basilisk.ico'))

if __name__ == '__main__':
 # 建立一個應用程式物件(傳入引數)
 app = QApplication(sys.argv)
 # 設定應用程式的圖示
 app.setWindowIcon(QIcon('../images/Dragon.ico')) # 可以用來設定主視窗的圖示和應用程式的圖示,但是如果主視窗已經設定了的圖示,這裡只能用於設定應用程式的圖示
 # 建立視窗類的物件
 main = WinAndApplicationIcon()
 # 顯示視窗
 main.show()
 # 呼叫exit()進入程式的主迴圈
 sys.exit(app.exec_())

3.6 控制元件新增提示訊息

當滑鼠放在控制元件上的時候,可以顯示提示訊息。使用 setToolTip 方法設定的訊息內容支援富文字。

"""
@from:https://pythoneers.cn
@author: qq3330447288
@contact: [email protected]
@software: PyCharm
@file: ToolTip.py
@time: 2020/11/17 上午11:39
"""
import sys
from PyQt5.QtGui import QFont
from PyQt5.QtWidgets import QMainWindow,QToolTip,QApplication


class ToolTip(QMainWindow):
 def __init__(self):
  super(ToolTip,self).__init__()
  self.init_ui()

 def init_ui(self):
  QToolTip.setFont(QFont('SansSerif',12))
  self.setToolTip('你好,Erics')
  self.setGeometry(300,150)
  self.setWindowTitle('設定控制元件提示訊息')

  self.button1 = QPushButton('按鈕')
  self.button1.setToolTip('這是一個按鈕!')
  layout = QHBoxLayout()
  layout.addWidget(self.button1)
  main_frame = QWidget()
  main_frame.setLayout(layout)
  self.setCentralWidget(main_frame)


if __name__ == '__main__':
 app = QApplication(sys.argv)
 tool_tip = ToolTip()
 tool_tip.show()
 sys.exit(app.exec_())

在這裡插入圖片描述

4. PyQt5中常用控制元件API的使用

4.1 QLabel控制元件的基本用法

QLabel 控制元件是用來顯示文字資訊的,QLabel 控制元件相關的方法如下:

方法名 說明
setAlignment() 設定文字的對齊方式
setIndent() 設定文字縮排
text() 獲取文字內容
setBuddy() 設定夥伴關係
setText() 設定文字內容
selectedText() 返回所選的字元
setWordWrap() 設定是否允許換行

QLabel 控制元件常用的訊號(事件)

訊號 說明
linkHoverd 當滑鼠滑過QLabel控制元件時觸發
linkActivated 當滑鼠單擊QLabel控制元件時觸發

"""
@from:https://pythoneers.cn
@author: qq3330447288
@contact: [email protected]
@software: PyCharm
@file: QLabelDemo.py
@time: 2020/11/17 下午5:56
"""
import sys
from PyQt5.QtGui import QPalette,QPixmap
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QWidget,QLabel,QVBoxLayout,QApplication

class QLabelDemo(QWidget):
 def __init__(self):
  super().__init__()
  # 初始化視窗介面
  self.init_ui()

 def init_ui(self):
  # 建立4個QLabel控制元件
  label1 = QLabel(self)
  label2 = QLabel(self)
  label3 = QLabel(self)
  label4 = QLabel(self)
  # 設定label1文字(支援html標籤)
  label1.setText('<font color="orange">這是一個文字標籤</font>')
  # 建立調色盤
  palette = QPalette()
  palette.setColor(QPalette.Window,Qt.blue) # 設定控制元件的背景色
  # 設定label1使用建立的調色盤(設定label1控制元件的背景色)
  label1.setPalette(palette)
  # 設定label1自動填充背景
  label1.setAutoFillBackground(True)
  # 設定label1居中對齊
  label1.setAlignment(Qt.AlignCenter)

  # 設定label2的文字
  label2.setText('<a href="#">歡迎你使用Python GUI程式!</a>') # 跳轉網頁或者是點選事件
  # 設定label2文字居中
  label3.setAlignment(Qt.AlignCenter)
  # 設定提示資訊
  label3.setToolTip('這是一個圖片標籤!')
  # 設定標籤下顯示圖片
  label3.setPixmap(QPixmap('../images/python.jpg'))

  # 設定label4的文字
  label4.setText('<a href="https://pythoneers.cn">感謝您訪問我的網站!</a>')
  # 遮蔽事件(點選之後開啟網頁,而不是觸發事件)
  label4.setOpenExternalLinks(True) # False是響應事件
  # 設定label4右對齊
  label4.setAlignment(Qt.AlignRight)
  # 設定提示資訊
  label4.setToolTip('這是一個超連結!')

  # 建立垂直佈局物件
  vbox = QVBoxLayout()
  # 將label1、label2、label2、label3控制元件新增到佈局中
  vbox.addWidget(label1)
  vbox.addWidget(label2)
  vbox.addWidget(label3)
  vbox.addWidget(label4)

  # 滑過label2標籤的訊號繫結到槽(函式)
  label2.linkHovered.connect(self.linkHovered)
  # 點選label4標籤的訊號繫結槽(函式)
  label4.linkActivated.connect(self.linkClicked)
  # 設定視窗的佈局
  self.setLayout(vbox)
  # 設定視窗標題
  self.setWindowTitle('QLabel控制元件演示')

 def linkHovered(self):
  """
  當滑鼠劃過標籤label2時觸發事件
  :return:
  """
  print('當滑鼠劃過標籤label2時觸發事件')

 def linkClicked(self):
  """
  當滑鼠單擊標籤label4時觸發事件
  :return:
  """
  print('當滑鼠單擊標籤label4時觸發事件')

if __name__ == '__main__':
 app = QApplication(sys.argv)
 mainWindow = QLabelDemo()
 mainWindow.show()
 sys.exit(app.exec_())

4.2 QLabel與夥伴控制元件

這裡使用程式碼設定夥伴控制元件如下:

QLabelBuddy.py:

"""
@from:https://pythoneers.cn
@author: qq3330447288
@contact: [email protected]
@software: PyCharm
@file: QLabelBuddy.py
@time: 2020/11/17 下午6:26
"""
import sys
from PyQt5.QtWidgets import QDialog,QLineEdit,QGridLayout,QApplication

class QLabelBuddy(QDialog):
 def __init__(self):
  super().__init__()
  # 初始化例項的時候執行
  self.init_ui()

 def init_ui(self):
  # 設定視窗標題欄文字
  self.setWindowTitle('QLabel與夥伴控制元件')
  # 建立QLabel控制元件
  nameQLabel = QLabel('&Name',self)
  # 建立QLineEdit控制元件
  nameQLineEdit = QLineEdit(self)
  # 設定夥伴控制元件
  nameQLabel.setBuddy(nameQLineEdit)
  # 建立QLabel控制元件
  passwordQLabel = QLabel('&Pwd',self)
  # 建立QLineEdit控制元件
  passwordQLineEdit = QLineEdit(self)
  # 設定夥伴控制元件
  passwordQLabel.setBuddy(passwordQLineEdit)
  ok_btn = QPushButton('&OK')
  cancel_btn = QPushButton('&Cancel')
  # 建立柵格佈局
  mainLayout = QGridLayout(self)
  # 將nameQLabel新增到柵格佈局中
  mainLayout.addWidget(nameQLabel,0)
  # 將nameQLineEdit新增到柵格佈局中
  mainLayout.addWidget(nameQLineEdit,1,2)
  # 將passwordQLabel新增到柵格佈局中
  mainLayout.addWidget(passwordQLabel,0)
  # 將passwordQLineEdit新增到柵格佈局中
  mainLayout.addWidget(passwordQLineEdit,2)
  # 將ok_btn新增到佈局中
  mainLayout.addWidget(ok_btn,2,1)
  # 將cancel_btn新增到佈局中
  mainLayout.addWidget(cancel_btn,2)
  """
  行索引rowIndex和列索引columnIndex是控制元件在柵格佈局中位置,佔用的行數row和佔用的列數column是控制元件的尺寸
  mainLayout.addWidget(控制元件物件,行索引rowIndex,列索引columnIndex,佔用的行數row,佔用的列數column)
  """

if __name__ == '__main__':
 app = QApplication(sys.argv)
 QLabel_Buddy = QLabelBuddy()
 QLabel_Buddy.show()
 sys.exit(app.exec_())

在這裡插入圖片描述

4.3 QLineEdit控制元件與回顯模式

QLineEdit 控制元件的基本功能是輸入單行文字,這個控制元件還有其它高階內容,如設定回顯模式、掩碼。回顯有4種模式:

  • Normal:正常顯示輸入的內容(正常回顯)
  • NoEcho:不顯示任何內容(不回顯)
  • Password:輸入內容被點替代(回顯但顯示的是點)
  • PasswordEchoEdit:輸入的過程中正常回顯,當游標離開輸入框則顯示的是點

QLineEditEchoMode.py

"""
@from:https://pythoneers.cn
@author: qq3330447288
@contact: [email protected]
@software: PyCharm
@file: QLineEditEchoMode.py
@time: 2020/11/24 上午4:06
"""
import sys
from PyQt5.QtWidgets import QWidget,QFormLayout,QApplication


class QLineEditEchoMode(QWidget):
 def __init__(self):
  super(QLineEditEchoMode,self).__init__()
  self.initUI()

 def initUI(self):
  self.setWindowTitle('文字輸入框的回顯模式')
  # 建立表單佈局物件
  formLayout = QFormLayout()
  # 建立四個LineEdit控制元件
  normalLineEdit = QLineEdit()
  noEchoLineEdit = QLineEdit()
  passwordLineEdit = QLineEdit()
  passwordEchoOnEdit = QLineEdit()
  # 將空間新增到佈局中
  formLayout.addRow('Normal',normalLineEdit)
  formLayout.addRow('NoEcho',noEchoLineEdit)
  formLayout.addRow('Password',passwordLineEdit)
  formLayout.addRow('PasswordEchoEdit',passwordEchoOnEdit)
  # 設定預設的文字提示內容(類似於設定HTML表單中的Placeholder屬性)
  normalLineEdit.setPlaceholderText('Normal')
  noEchoLineEdit.setPlaceholderText('NoEcho')
  passwordLineEdit.setPlaceholderText('Password')
  passwordEchoOnEdit.setPlaceholderText('PasswordEchoOnEdit')
  # 設定回顯模式
  normalLineEdit.setEchoMode(QLineEdit.Normal)
  noEchoLineEdit.setEchoMode(QLineEdit.NoEcho)
  passwordLineEdit.setEchoMode(QLineEdit.Password)
  passwordEchoOnEdit.setEchoMode(QLineEdit.PasswordEchoOnEdit)
  # 應用表單佈局
  self.setLayout(formLayout)


if __name__ == '__main__':
 app = QApplication(sys.argv)
 main = QLineEditEchoMode()
 main.show()
 sys.exit(app.exec_())

在這裡插入圖片描述

4.4 QLineEdit控制元件的校驗器

通過校驗器可以限制文字輸入控制元件的輸入,如限制只能輸入整數、浮點數或滿足一定條件的字串。

QLineEditEchoMode.py:

"""
@from:https://pythoneers.cn
@author: qq3330447288
@contact: [email protected]
@software: PyCharm
@file: QLineEditValidator.py
@time: 2020/11/24 上午5:14
"""
from PyQt5.QtWidgets import QWidget,QApplication
from PyQt5.QtGui import QIntValidator,QDoubleValidator,QRegExpValidator
from PyQt5.QtCore import QRegExp # 引入正則表示式的類
import sys

class QLineEditValidator(QWidget):
 def __init__(self):
  super(QLineEditValidator,self).__init__()
  self.initUI()

 def initUI(self):
  self.setWindowTitle('QLineEdit控制元件的校驗器')
  # 建立表單佈局物件
  formLayout = QFormLayout()
  # 建立三個QLineEdit控制元件
  intLineEdit = QLineEdit()
  doubleLineEdit = QLineEdit()
  validatorLineEdit = QLineEdit()
  # 將控制元件新增到佈局中
  formLayout.addRow('整數型別',intLineEdit)
  formLayout.addRow('浮點型別',doubleLineEdit)
  formLayout.addRow('字母和數字(正則表示式)',validatorLineEdit)
  # 為QLineEdit控添預設提示內容
  intLineEdit.setPlaceholderText('整數')
  doubleLineEdit.setPlaceholderText('浮點')
  validatorLineEdit.setPlaceholderText('字母和數字')
  """
  1.設定整數校驗器(只能輸入[1,99]之間的整數)
  """
  # 建立QDoubleValidator校驗器物件
  intValidator = QIntValidator(self)
  # 設定校驗範圍
  intValidator.setRange(1,99)
  """
  2.設定浮點校驗器(只能輸入[-99.xx,99.xx],精度要求保留小數點後2位)
  """
  # 建立QDoubleValidator校驗器物件
  doubleValidator = QDoubleValidator(self)
  # 設定校驗範圍
  doubleValidator.setRange(-99,99)
  # 正常顯示浮點數
  doubleValidator.setNotation(QDoubleValidator.StandardNotation)
  # 設定精度,保留小數點後兩位
  doubleValidator.setDecimals(2)
  """
  3.設定字母和數字(正則表示式)校驗器
  """
  # 正則表示式
  reg = QRegExp('[a-zA-Z0-9]+$')
  # 正則表示式校驗器
  validator = QRegExpValidator(self)
  # 將正則表示式和正則表示式校驗器繫結到一起
  validator.setRegExp(reg)
  """
  設定校驗器:繫結校驗器和控制元件
  """
  intLineEdit.setValidator(intValidator)
  doubleLineEdit.setValidator(doubleValidator)
  validatorLineEdit.setValidator(validator)
  # 應用表單佈局
  self.setLayout(formLayout)

if __name__ == '__main__':
 app = QApplication(sys.argv)
 main = QLineEditValidator()
 main.show()
 sys.exit(app.exec_())

在這裡插入圖片描述

在這裡插入圖片描述

4.5 使用掩碼限制QLineEdit控制元件的輸入

掩碼 說明
A ASCII字母字元必須輸入(A-Z、a-z)
a ASCII字母字元允許但不是必須輸入(A-Z、a-z)
N ASCII字母和數字字元必須輸入(A-Z、a-z 、0-9)
n ASCII字母和數字字元允許但不是必須輸入(A-Z、a-z 、0-9)
X 任何字元都必須輸入
x 任何字元允許但不是必須輸入
9 ASCII數字字元必須輸入(0-9)
0 ASCII數字字元允許但不是必須輸入(0-9)
D ASCII數字字元必須輸入(1-9)
d ASCII數字字元允許但不是必須輸入(1-9)
# ASCII數字字元或加減符號允許但不是必須輸入
H 十六進位制格式字元必須輸入(A-F,a-f,0-9)
h 十六進位制格式允許但不是必須輸入(A-F,a-f,0-9)
B 二進位制格式字元是必須輸入(0,1)
b 二進位制格式字元允許但不是必須輸入(0,1)
> 所有的字母字元都大寫
< 所有的字母字元都小寫
! 關閉大小寫轉換
\ 使用\轉義上面列出的字元

QLineEditMask.py:

"""
@from:https://pythoneers.cn
@author: qq3330447288
@contact: [email protected]
@software: PyCharm
@file: QLineEditMask.py
@time: 2020/11/25 下午11:41
"""
from PyQt5.QtWidgets import QWidget,QLineEdit
import sys


class QLineEditMask(QWidget):
 def __init__(self):
  # 呼叫父類QWidget的__init__方法
  super(QWidget,self).__init__()
  # 呼叫類的例項方法初始化視窗介面
  self.initUI()

 def initUI(self):
  # 設定視窗標題
  self.setWindowTitle('5.掩碼限制QLineEdit控制元件的輸入')
  # 建立表單佈局
  formLayout = QFormLayout()
  # 建立QLineEdit控制元件
  ipLineEdit = QLineEdit()
  macLineEdit = QLineEdit()
  dateLineEdit = QLineEdit()
  licenseLineEdit = QLineEdit()
  # 設定掩碼規則(ASCII數字字元允許但不是必須輸入0-9),沒有輸入時顯示下劃線
  ipLineEdit.setInputMask('000,000,000;_')
  # 置掩碼規則( 十六進位制格式允許但不是必須輸入A-F,a-f,0-9),沒有輸入時顯示下劃線
  macLineEdit.setInputMask('HH:HH:HH:HH:HH:HH;_')
  # 置掩碼規則(ASCII數字字元允許但不是必須輸入0-9),沒有輸入時顯示下劃線
  dateLineEdit.setInputMask('0000-00-00;_')
  # 置掩碼規則(ASCII字母字元必須輸入A-Z、a-z,如果輸入a-z則小寫轉大寫),沒有輸入時顯示#號
  licenseLineEdit.setInputMask('>AAAAA-AAAAA-AAAAA-AAAAA-AAAAA;#')
  # 將QLineEdit控制元件新增到表單佈局中
  formLayout.addRow('ip地址',ipLineEdit)
  formLayout.addRow('mac地址',macLineEdit)
  formLayout.addRow('日期',dateLineEdit)
  formLayout.addRow('序列號',licenseLineEdit)
  # 設定視窗的佈局為表單佈局
  self.setLayout(formLayout)


if __name__ == '__main__':
 # 建立應用程式物件
 app = QApplication(sys.argv)
 # 建立視窗類的物件
 mainWindow = QLineEditMask()
 # 顯示視窗
 mainWindow.show()
 # 呼叫exit()進入程式的主迴圈
 sys.exit(app.exec_())

在這裡插入圖片描述

到此這篇關於詳解Python GUI程式設計之PyQt5入門到實戰的文章就介紹到這了,更多相關PyQt5入門內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!