使用 PyQt5 建立選項卡式瀏覽器


什麼是 Python 中的 PyQt5 庫?

PyQt5 是著名跨平臺 GUI 工具包 Qt 的 Python 繫結。它使 Python 程式設計師能夠構建可在 Windows、macOS 和 Linux 上執行的桌面程式,並具有精緻的圖形使用者介面 (GUI)。PyQt5 使使用者能夠訪問 Qt 的所有功能,包括對先進圖形、動畫和多媒體的支援。

PyQt5 庫的優缺點是什麼?

優點

  • 跨平臺功能 - PyQt5 程式可以在多個系統上執行,無需修改程式碼。這使開發人員能夠建立適用於各種使用者的軟體,而與作業系統無關。

  • 全面的視窗小部件和工具集合 - PyQt5 提供了大量視窗小部件和工具,可用於構建具有豐富功能的複雜使用者介面。它們包括各種元素,例如按鈕、標籤、文字框、組合框、列表框、進度條、滑塊和旋鈕。

  • 簡單的 Python 整合 - PyQt5 使開發人員能夠使用 Python 的所有功能構建桌面應用程式。這包括能夠使用 Python 庫和模組來增強其程式的功能。

  • 可修改的外觀和感覺 - PyQt5 使開發人員能夠修改其應用程式的外觀和感覺,包括使用自定義圖示、字型和樣式表。因此,應用程式可以根據使用者的需求進行定製,並與公司的品牌形象相協調。

缺點

  • 陡峭的學習曲線 - 對於 GUI 開發新手來說,特別是那些不熟悉 Qt 的人來說,PyQt5 可能難以掌握。這可能會使開發人員難以構建利用 Qt 全部功能集的複雜應用程式。

  • 許可證費用 - 由於 Qt 是一款商業產品,因此在專案中使用 PyQt5 的開發人員可能需要支付許可證費用。但是,Qt 有免費的開源和社群版本可用。

  • 效能問題 - PyQt5 應用程式可能會遇到效能問題,尤其是在處理大量資料或複雜圖形時。這可能會使構建快速響應的應用程式變得具有挑戰性,尤其是在較舊的硬體上。

  • 相容性問題 - PyQt5 程式可能無法完全相容所有作業系統和 Python 版本。這可能會使建立在多個平臺和環境中都能完美執行的應用程式變得具有挑戰性。

步驟和流程

讓我們從編寫選項卡式瀏覽器的程式碼開始。我們將程式碼分解成更小的塊,並詳細解釋每個部分。

使用 PyQt5 建立選項卡式瀏覽器對於想要學習 Python 中 GUI 程式設計的人來說是一個很有用的專案。在本教程中,我們將逐步介紹使用 PyQt5 構建基本選項卡式瀏覽器的步驟。

步驟 1 - 安裝 PyQt5

如果您尚未安裝 PyQt5,則可以使用 pip 進行安裝。開啟您的命令提示符或終端並鍵入以下命令 -

pip install PyQt5

步驟 2 - 匯入必要的模組

開啟您的文字編輯器並建立一個新的 Python 檔案。匯入必要的模組 -

from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *

前兩行從 PyQt5 匯入核心和視窗小部件類,而第三行匯入我們將用於顯示網頁的 Web 引擎視窗小部件。

步驟 3 - 建立主視窗

為繼承自 QMainWindow 的主視窗建立一個新類。在類中,建立一個 QTabWidget 並將其設定為主視窗的中心視窗小部件。這將是我們顯示選項卡的區域 -

class MainWindow(QMainWindow):
   def __init__(self):
      super(MainWindow, self).__init__()

      self.tabs = QTabWidget()
      self.setCentralWidget(self.tabs)

步驟 4 - 建立一個新選項卡

在主視窗類中,建立一個用於新增新選項卡的方法。每當使用者想要開啟新選項卡時,都會呼叫此方法。在方法內部,建立一個新的 QWidget 和一個 QWebEngineView。QWidget 將是 Web 引擎檢視的容器。將 QWidget 設定為選項卡,並將 QWebEngineView 設定為其佈局 -

class MainWindow(QMainWindow):
   def __init__(self):
      super(MainWindow, self).__init__()

      self.tabs = QTabWidget()
      self.setCentralWidget(self.tabs)

   def add_new_tab(self, qurl=None):
      if qurl is None:
         qurl = QUrl('https://www.google.com')

      browser = QWebEngineView()
      browser.setUrl(qurl)

      i = self.tabs.addTab(browser, "New Tab")
      self.tabs.setCurrentIndex(i)

該方法採用 qurl 引數,該引數是要載入的頁面的 URL。如果沒有提供 URL,則預設為 Google 的主頁。該方法建立一個新的 QWebEngineView 並將其 URL 設定為提供的 URL。然後它將 QWebEngineView 新增到選項卡小部件並將選項卡標題設定為“新選項卡”。最後,它將當前選項卡設定為新建立的選項卡。

步驟 5 - 將選項卡欄連線到 add_new_tab 方法

當用戶點選選項卡欄中的“+”按鈕時,我們希望新增一個新選項卡。為此,我們需要將“+”按鈕連線到 add_new_tab 方法。在 MainWindow 類中,新增以下程式碼 -

self.tabs.tabBar().setContextMenuPolicy(Qt.PreventContextMenu)
self.tabs.tabBar().setTabsClosable(True)
self.tabs.tabBar().tabCloseRequested.connect(lambda index: self.tabs.removeTab(index))
self.tabs.tabBar().addTab("+")
self.tabs.tabBar().tabBarClicked.connect(self.tab_bar_clicked)

第一行將上下文選單策略設定為 PreventContextMenu。第二行使選項卡可關閉。第三行將 tabCloseRequested 訊號連線到一個 lambda 函式,該函式在點選關閉按鈕時刪除選項卡。第四行新增一個“+”選項卡。最後,第五行將 tabBarClicked 訊號連線到一個方法,該方法檢查是否點選了“+”選項卡,如果是,則呼叫 add_new_tab 方法 -

def tab_bar_clicked(self, index):
   if index == self.tabs.count() - 1:
      self.add_new_tab()

此方法檢查點選的選項卡的索引是否為“+”選項卡的索引。如果是,則呼叫 add_new_tab 方法。

步驟 6 - 新增導航欄

我們現在將新增一個導航欄,允許使用者導航到不同的網頁。在 MainWindow 類中,新增以下程式碼。

self.navbar = QToolBar("Navigation")
self.addToolBar(self.navbar)

self.back_btn = QAction("Back", self)
self.back_btn.triggered.connect(lambda: self.tabs.currentWidget().back())
self.navbar.addAction(self.back_btn)

self.forward_btn = QAction("Forward", self)
self.forward_btn.triggered.connect(lambda: self.tabs.currentWidget().forward())
self.navbar.addAction(self.forward_btn)

self.reload_btn = QAction("Reload", self)
self.reload_btn.triggered.connect(lambda: self.tabs.currentWidget().reload())
self.navbar.addAction(self.reload_btn)

self.urlbar = QLineEdit()
self.urlbar.returnPressed.connect(self.navigate)
self.navbar.addWidget(self.urlbar)

此程式碼建立一個新的工具欄並將其新增到主視窗。它還建立了三個按鈕,用於後退、前進和重新載入頁面。這些按鈕連線到當前選項卡的相應方法。最後,它建立一個用於輸入 URL 的 QLineEdit 並將其 returnPressed 訊號連線到 navigate 方法。

步驟 7 - 實現 Navigate 方法

當用戶在 URL 欄中按下 Enter 鍵時,將呼叫 navigate 方法。它將在當前選項卡中載入使用者在 URL 欄中輸入的 URL。將以下程式碼新增到 MainWindow 類 -

def navigate(self):
   qurl = QUrl(self.urlbar.text())
   if qurl.scheme() == "":
      qurl.setScheme("http")
   self.tabs.currentWidget().setUrl(qurl)

此方法根據 URL 欄中輸入的文字建立一個 QUrl 物件。如果 URL 沒有方案(即“http://”或“https://”),則新增“http://”作為預設方案。最後,它將當前選項卡的 URL 設定為輸入的 URL。

步驟 8 - 執行應用程式

要執行應用程式,請建立 MainWindow 類的例項並呼叫其 show 方法 -

app = QApplication([])
window = MainWindow()
window.show()
app.exec_()

此程式碼建立一個新的 QApplication 例項,建立一個新的 MainWindow 例項,並顯示主視窗。最後,它使用 QApplication 例項的 exec_ 方法啟動主事件迴圈。

示例

from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *

class MainWindow(QMainWindow):
   def __init__(self):
      super(MainWindow, self).__init__()

      self.tabs = QTabWidget()
      self.setCentralWidget(self.tabs)

class MainWindow(QMainWindow):
   def __init__(self):
      super(MainWindow, self).__init__()

      self.tabs = QTabWidget()
      self.setCentralWidget(self.tabs)

   def add_new_tab(self, qurl=None):
      if qurl is None:
         qurl = QUrl('https://www.google.com')

      browser = QWebEngineView()
      browser.setUrl(qurl)

      i = self.tabs.addTab(browser, "New Tab")
      self.tabs.setCurrentIndex(i)

self.tabs.tabBar().setContextMenuPolicy(Qt.PreventContextMenu)
self.tabs.tabBar().setTabsClosable(True)
self.tabs.tabBar().tabCloseRequested.connect(lambda index: self.tabs.removeTab(index))
self.tabs.tabBar().addTab("+")
self.tabs.tabBar().tabBarClicked.connect(self.tab_bar_clicked)

def tab_bar_clicked(self, index):
   if index == self.tabs.count() - 1:
      self.add_new_tab()

self.navbar = QToolBar("Navigation")
self.addToolBar(self.navbar)

self.back_btn = QAction("Back", self)
self.back_btn.triggered.connect(lambda: self.tabs.currentWidget().back())
self.navbar.addAction(self.back_btn)

self.forward_btn = QAction("Forward", self)
self.forward_btn.triggered.connect(lambda: self.tabs.currentWidget().forward())
self.navbar.addAction(self.forward_btn)

self.reload_btn = QAction("Reload", self)
self.reload_btn.triggered.connect(lambda: self.tabs.currentWidget().reload())
self.navbar.addAction(self.reload_btn)

self.urlbar = QLineEdit()
self.urlbar.returnPressed.connect(self.navigate)
self.navbar.addWidget(self.urlbar)

def navigate(self):
   qurl = QUrl(self.urlbar.text())
   if qurl.scheme() == "":
      qurl.setScheme("http")
   self.tabs.currentWidget().setUrl(qurl)

app = QApplication([])
window = MainWindow()
window.show()
app.exec_()

輸出

在上面的輸出視窗中,我們可以看到選項卡式瀏覽器。

結論

恭喜!您已經完成了第一個 PyQt5 選項卡式瀏覽器的開發。書籤、歷史選單和搜尋框只是可以新增到程式中的一些功能,以使其更符合您的需求。

更新於: 2023-12-21

310 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告