使用 PyQt5 创建选项卡式浏览器

简介

在本文中，我们将探索如何使用 PyQt5 框架创建一个简单的选项卡式浏览器。这个简单的浏览器将具有基本的导航操作，包括后退、前进、刷新和停止。

前提条件

在开始这个项目之前，您需要安装以下工具：

• Python 3.x
• PyQt5

您可以通过运行 pip install PyQt5 来安装 PyQt5。

创建主要窗口

让我们开始创建主窗口。我们将使用 QMainWindow 类来创建我们的浏览器窗口。下面是一个简单的示例：

from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *

class BrowserWindow(QMainWindow):

    def __init__(self):
        super().__init__()

        self.init_ui()

    def init_ui(self):

        self.setWindowTitle("PyQt5 Browser")
        self.setGeometry(100, 100, 800, 600)

        self.show()

添加选项卡

我们希望我们的浏览器能够具有选项卡功能。在 PyQt5 中，我们可以使用 QTabWidget 来实现选项卡。我们将通过添加 QTabWidget 将选项卡添加到主窗口中。

class BrowserWindow(QMainWindow):

    def __init__(self):
        super().__init__()

        self.init_ui()

    def init_ui(self):

        self.setWindowTitle("PyQt5 Browser")
        self.setGeometry(100, 100, 800, 600)

        # 添加选项卡
        self.tabs = QTabWidget()
        self.setCentralWidget(self.tabs)

        self.show()

添加工具栏

现在我们已经有了选项卡，让我们添加一些常见的导航操作到主窗口中的工具栏中。我们将使用 QToolBar 和一些常见的 QAction。

class BrowserWindow(QMainWindow):

    def __init__(self):
        super().__init__()

        self.init_ui()

    def init_ui(self):

        self.setWindowTitle("PyQt5 Browser")
        self.setGeometry(100, 100, 800, 600)

        # 添加选项卡
        self.tabs = QTabWidget()
        self.setCentralWidget(self.tabs)

        # 添加工具栏
        self.toolbar = QToolBar()
        self.addToolBar(self.toolbar)

        # 添加按钮
        back_button = QAction(QIcon("icons/back.png"), "Back", self)
        back_button.triggered.connect(self.current_browser.goBack)
        self.toolbar.addAction(back_button)

        forward_button = QAction(QIcon("icons/forward.png"), "Forward", self)
        forward_button.triggered.connect(self.current_browser.goForward)
        self.toolbar.addAction(forward_button)

        refresh_button = QAction(QIcon("icons/refresh.png"), "Refresh", self)
        refresh_button.triggered.connect(self.current_browser.reload)
        self.toolbar.addAction(refresh_button)

        stop_button = QAction(QIcon("icons/stop.png"), "Stop", self)
        stop_button.triggered.connect(self.current_browser.stop)
        self.toolbar.addAction(stop_button)

        self.show()

添加浏览器窗口

现在我们已经有了一个工具栏和选项卡，让我们为每个选项卡添加一个浏览器窗口。

class BrowserWindow(QMainWindow):

    def __init__(self):
        super().__init__()

        self.init_ui()

    def init_ui(self):

        self.setWindowTitle("PyQt5 Browser")
        self.setGeometry(100, 100, 800, 600)

        # 添加选项卡
        self.tabs = QTabWidget()
        self.setCentralWidget(self.tabs)

        # 添加工具栏
        self.toolbar = QToolBar()
        self.addToolBar(self.toolbar)

        # 添加按钮
        back_button = QAction(QIcon("icons/back.png"), "Back", self)
        back_button.triggered.connect(self.current_browser.goBack)
        self.toolbar.addAction(back_button)

        forward_button = QAction(QIcon("icons/forward.png"), "Forward", self)
        forward_button.triggered.connect(self.current_browser.goForward)
        self.toolbar.addAction(forward_button)

        refresh_button = QAction(QIcon("icons/refresh.png"), "Refresh", self)
        refresh_button.triggered.connect(self.current_browser.reload)
        self.toolbar.addAction(refresh_button)

        stop_button = QAction(QIcon("icons/stop.png"), "Stop", self)
        stop_button.triggered.connect(self.current_browser.stop)
        self.toolbar.addAction(stop_button)

        # 添加浏览器窗口
        self.tabs.addTab(BrowserTab(self), "New Tab")

        self.show()

我们还需要创建 BrowserTab 类来管理每个选项卡中的浏览器窗口。

class BrowserTab(QWidget):

    def __init__(self, parent):
        super().__init__(parent)

        self.browser = QWebEngineView()
        self.browser.setUrl(QUrl("https://www.google.com"))
        self.layout = QVBoxLayout(self)
        self.layout.addWidget(self.browser)

完整代码

下面是完整的代码：

from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEnginePage


class BrowserWindow(QMainWindow):

    def __init__(self):
        super().__init__()

        self.init_ui()

    def init_ui(self):

        self.setWindowTitle("PyQt5 Browser")
        self.setGeometry(100, 100, 800, 600)

        # 添加选项卡
        self.tabs = QTabWidget()
        self.setCentralWidget(self.tabs)

        # 添加工具栏
        self.toolbar = QToolBar()
        self.addToolBar(self.toolbar)

        # 添加按钮
        back_button = QAction(QIcon("icons/back.png"), "Back", self)
        back_button.triggered.connect(self.current_browser.goBack)
        self.toolbar.addAction(back_button)

        forward_button = QAction(QIcon("icons/forward.png"), "Forward", self)
        forward_button.triggered.connect(self.current_browser.goForward)
        self.toolbar.addAction(forward_button)

        refresh_button = QAction(QIcon("icons/refresh.png"), "Refresh", self)
        refresh_button.triggered.connect(self.current_browser.reload)
        self.toolbar.addAction(refresh_button)

        stop_button = QAction(QIcon("icons/stop.png"), "Stop", self)
        stop_button.triggered.connect(self.current_browser.stop)
        self.toolbar.addAction(stop_button)

        # 添加浏览器窗口
        self.tabs.addTab(BrowserTab(self), "New Tab")

        self.show()


class BrowserTab(QWidget):

    def __init__(self, parent):
        super().__init__(parent)

        self.browser = QWebEngineView()
        self.browser.setUrl(QUrl("https://www.google.com"))
        self.layout = QVBoxLayout(self)
        self.layout.addWidget(self.browser)


if __name__ == '__main__':
    app = QApplication([])
    window = BrowserWindow()
    app.exec_()

现在，您可以编译并运行这个程序，就可以创建自己的选项卡式浏览器。