小白的pyqt5浏览器

小白的pyqt5浏览器

效果：

• 有主题美化效果
• 没有标签页，只能新建窗口
• 不支持下载
  

细节

鼠标悬浮效果（按钮）

鼠标悬浮效果（地址栏）

先放上代码（小白的迷之操作不要在意）：

窗口部分：
(图标自行准备)

import sys
from PyQt5.QtGui import QIcon
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtWebEngineWidgets import QWebEngineView


class window(QWidget):
    '''浏览器窗口'''

    def __init__(self):
        super().__init__()
        self.setWindowTitle('Web Browser')
        self.setWindowIcon(QIcon("./static/images/web.png"))

        self.layout = QGridLayout()  # 网格布局

        ##地址栏构造
        # 地址栏构造
        self.bar = QWidget()
        self.bar.setObjectName("urlbar")  # 设置name, 便于qss选择

        # 地址栏布局构造
        self.H_box = QHBoxLayout()  # 横向布局
        self.H_box.setSpacing(10)

        # 地址栏元素构造
        self.btu_1 = QPushButton(QIcon('./static/images/left arrow.png'), '')
        self.btu_1.setIconSize(QSize(30, 30))

        self.btu_2 = QPushButton(QIcon('./static/images/right arrow.png'), '')
        self.btu_2.setIconSize(QSize(30, 30))

        self.btu_3 = QPushButton(QIcon('./static/images/refresh.png'), '')
        self.btu_3.setIconSize(QSize(30, 30))

        self.btu_4 = QPushButton(QIcon('./static/images/home.png'), '')
        self.btu_4.setIconSize(QSize(30, 30))

        self.urlInput = QLineEdit()
        self.urlInput.setPlaceholderText("输入网址")

        self.btu_5 = QPushButton(QIcon('./static/images/aviation'), '')
        self.btu_5.setIconSize(QSize(30, 30))

        self.btu_6 = QPushButton(QIcon('./static/images/add-select'), '')
        self.btu_6.setIconSize(QSize(30, 30))

        # 网页查看组件构造
        self.browser = WebEngineView(self)
        self.browser.urlChanged.connect(self.reurlbar)

        # 信号绑定
        self.btu_1.clicked.connect(self.browser.back)
        self.btu_2.clicked.connect(self.browser.forward)
        self.btu_3.clicked.connect(self.browser.reload)
        self.btu_4.clicked.connect(self.home)
        self.urlInput.returnPressed.connect(self.navigate_url)
        self.btu_5.clicked.connect(self.navigate_url)

        ## 布局添加
        self.H_box.addWidget(self.btu_1)
        self.H_box.addWidget(self.btu_2)
        self.H_box.addWidget(self.btu_3)
        self.H_box.addWidget(self.btu_4)
        self.H_box.addWidget(self.urlInput)
        self.H_box.addWidget(self.btu_5)
        self.H_box.addWidget(self.btu_6)
        self.bar.setLayout(self.H_box)

        self.layout.addWidget(self.bar)
        self.layout.addWidget(self.browser)

        self.setLayout(self.layout)

        # 设置全局qss
        file = QFile('./static/qss/browser.css')
        file.open(QFile.ReadOnly)
        qss = str(file.readAll(), encoding='utf-8')
        file.close()
        self.setStyleSheet(qss)

        # 窗口最大化
        self.showMaximized()

    def reurlbar(self, q):
        '''将地址栏内容设置为网址'''
        self.urlInput.setText(q.toString())
        self.urlInput.setCursorPosition(0)

    def navigate_url(self):
        '''转到url指定网页'''
        q = QUrl(self.urlInput.text())
        if q.scheme() == '':
            q.setScheme('http')
        self.browser.setUrl(q)
        QApplication.processEvents()

    def home(self):
        '''主页'''
        self.browser.load(QUrl("http://www.baidu.com/"))
        self.browser.urlChanged.connect(self.reurlbar)


class MainWindow(QMainWindow):
    '''主窗口'''

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.win = window()
        # 加载百度页面
        self.win.browser.load(QUrl("http://www.baidu.com/"))


# 为实现点击跳转，重写createWindow方法
class WebEngineView(QWebEngineView):
    windowList = []

    def createWindow(self, QWebEnginePage_WebWindowType):
        newWindow = window()
        self.windowList.append(newWindow)
        return newWindow.browser


if __name__ == "__main__":
    app = QApplication(sys.argv)
    win = MainWindow()
    sys.exit(app.exec_())

qss部分：

QWidget#urlbar > QLineEdit {
    font-family: "Microsoft YaHei UI";
    border-radius: 7px;
    min-height: 30px;
    max-height: 30px;
    padding: 2px 4px;
    border: 1px groove #EEEEEE;
}

QWidget#urlbar > QLineEdit:hover {
    border: 1px groove gray;
}

QWidget#urlbar > QPushButton {
    font-family: "Microsoft YaHei UI";
    min-height: 30px;
    max-height: 30px;
    font-size: 20px;
    background-color: #EEEEEE;
    border-radius: 5px;
    min-width: 30px;
    border: 0px;
    padding: 2px 4px;
    transition:background-color 2000ms;
}

QWidget#urlbar > QPushButton:hover {
    background-color: #DDDDDD;
}

QWidget#urlbar > QPushButton:pressed {
    background-color: #C4C4C4;
}

QWidget#urlbar {
    max-height: 50px;
    background-color: #EEEEEE;
    padding: 0;
    border-radius: 5px;
    border: 0px;
}

QWidget#main {
    background-color: #E6E6E6;
}

QWidget#page {
    background-color: #E6E6E6;
    border: 2px groove gray;
    border-radius: 10px;
}