小白的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;
}