PySide2中如何为QHBoxLayout布局设置样式实现导航菜单

使用PySide2开发浏览器时无法直接为QHBoxLayout设置样式，本质原因正如@musicamante 所说：

布局不是控件，而是布局管理器，它们不属于图形元素不会进行显示，不会执行任何绘制操作，本身没有可设置样式的内容。

要实现可自定义样式、支持控件按规则拉伸、视觉效果类似菜单栏的导航容器，只需要用可渲染的UI控件承载布局即可，不需要修改Qt底层渲染逻辑。

• 选用QFrame作为导航栏的容器控件（相比基础QWidget，QFrame原生支持边框、圆角、阴影绘制，更适合做栏位容器）
• 将原本的水平导航布局QHBoxLayout绑定到这个容器控件上，所有导航按钮、地址输入框都添加到这个布局中
• 给容器控件设置唯一的objectName，方便QSS样式表精准选中，不会污染其他控件样式
• 给需要自适应拉伸的控件（地址栏、网页视图）设置拉伸因子，实现窗口缩放时自动调整尺寸的效果
• 将容器控件作为整体添加到外层主布局中，替代原本直接添加裸布局的写法

import os
import sys
from PySide2.QtGui import *
from PySide2.QtCore import *
from PySide2.QtWidgets import *
from PySide2.QtWebEngine import *
from PySide2.QtWebEngineWidgets import *

class BrowserEngine(QWidget):
    def __init__(self, *args, **kwargs):
        super(BrowserEngine, self).__init__()
        self.webview = QWebEngineView(self)
        # 修复原代码bug：load方法需要传入QUrl对象，部分PySide2版本直接传字符串会加载失败
        self.webview.load(QUrl("https://www.duckduckgo.com"))
        self.setMinimumSize(800, 600)

        # 可样式化的导航栏容器
        self.nav_bar = QFrame(self)
        self.nav_bar.setObjectName("navBar")
        self.navigation = QHBoxLayout(self.nav_bar)
        self.navigation.setContentsMargins(8, 4, 8, 4)
        self.navigation.setSpacing(6)

        self.back = QPushButton("Back", self)
        self.back.clicked.connect(self.webview.back)

        self.reload = QPushButton("Reload", self)
        self.reload.clicked.connect(self.webview.reload)

        # 修复原代码拼写错误：Foward -> Forward
        self.forward = QPushButton("Forward", self)
        self.forward.clicked.connect(self.webview.forward)

        self.entrypoint = QLineEdit(self)
        self.entrypoint.setMinimumHeight(28)
        
        # 地址栏设置拉伸因子1，自动占满导航栏剩余宽度
        self.navigation.addWidget(self.back)
        self.navigation.addWidget(self.reload)
        self.navigation.addWidget(self.forward)
        self.navigation.addWidget(self.entrypoint, 1)
        self.navigation.addStretch() 
        
        self.mainlayout = QVBoxLayout(self)
        self.mainlayout.setContentsMargins(0, 0, 0, 0)
        self.mainlayout.setSpacing(0)
        self.mainlayout.addWidget(self.nav_bar)
        # 网页视图设置拉伸因子1，自动占满窗口剩余高度
        self.mainlayout.addWidget(self.webview, 1)

        # 增加文件存在校验、指定编码，避免样式文件缺失/编码问题导致程序崩溃
        stylesheet_path = os.path.join(os.path.dirname(__file__), 'style.qss')
        if os.path.exists(stylesheet_path):
            with open(stylesheet_path, 'r', encoding='utf-8') as file:
                self.setStyleSheet(file.read())

class BrowserWindow(QMainWindow):
    def __init__(self, *args, **kwargs):
        super(BrowserWindow, self).__init__()
        self.widget = BrowserEngine()
        self.setCentralWidget(self.widget)
    

if __name__ == '__main__':
    app = QApplication(sys.argv)
    module = BrowserWindow()
    module.show()
    sys.exit(app.exec_())

/* 导航栏整体样式 */
#navBar {
    background-color: #f0f2f5;
    border-bottom: 1px solid #d0d3d9;
    min-height: 40px;
}

/* 导航按钮样式 */
#navBar QPushButton {
    padding: 4px 12px;
    border: 1px solid #c0c4cc;
    border-radius: 4px;
    background-color: white;
}
#navBar QPushButton:hover {
    background-color: #e6f0ff;
    border-color: #409eff;
}

/* 地址栏样式 */
#navBar QLineEdit {
    border: 1px solid #c0c4cc;
    border-radius: 14px;
    padding: 0 12px;
    background-color: white;
}
#navBar QLineEdit:focus {
    border-color: #409eff;
    outline: none;
}

• 修复了原代码两处运行级bug：网页加载接口参数类型错误、按钮文本拼写错误
• 移除了地址栏固定最大宽度限制，配合拉伸因子实现窗口缩放时地址栏自动适配宽度
• 调整了控件间距、内边距、默认高度，视觉效果对齐主流浏览器导航栏
• 增加样式文件容错逻辑，避免缺失样式文件时程序直接崩溃
• 导航栏使用独立objectName标记，样式不会误作用到其他同类型控件

内容的提问来源于stack exchange，提问作者user16435384