使用 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 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告