设置Central Widget样式表后QDockWidget边框变宽的原因及解决方法

在Qt开发中，为QMainWindow的Central Widget设置全局QWidget样式表后，左侧停靠的QDockWidget会出现边框变宽的异常情况。

复现代码 #

QDockWidgetTest::QDockWidgetTest(QWidget *parent)
: QMainWindow(parent)
{
    QDockWidget* dockWidget = new QDockWidget();
    QTabWidget* tabWidget = new QTabWidget();
    tabWidget->addTab(new QWidget(), "1");
    tabWidget->addTab(new QWidget(), "2");
    dockWidget->setWidget(tabWidget);
    addDockWidget(Qt::DockWidgetArea::LeftDockWidgetArea , dockWidget);

    QWidget* widget = new QWidget();
    QHBoxLayout* layout = new QHBoxLayout();
    layout->addWidget(new QLabel("content"));
    widget->setLayout(layout);
    layout->setSpacing(0);
     
    // 设置Central Widget样式表（会引发问题）
    QColor whiteColor(255, 255, 255);
    QString styleSheet = QString("QWidget { background-color: %1 }").arg(whiteColor.name());
    widget->setStyleSheet(styleSheet);
    
    setCentralWidget(widget);
    
    showMaximized();
}

问题现象 #

解决方案 #

方法1：使用精确的样式选择器 #

避免使用全局QWidget选择器，给Central Widget设置唯一的objectName，通过ID选择器指定样式：

// 给Central Widget设置objectName
widget->setObjectName("CentralWidget");
// 修改样式表为精确匹配
QString styleSheet = QString("#CentralWidget { background-color: %1 }").arg(whiteColor.name());
widget->setStyleSheet(styleSheet);

这样样式只会作用于目标控件，不会被QDockWidget的子控件继承。

方法2：使用QPalette设置背景色 #

改用调色板设置背景，避免样式表的继承问题：

QPalette palette = widget->palette();
palette.setColor(QPalette::Window, whiteColor);
widget->setPalette(palette);
widget->setAutoFillBackground(true); // 确保背景色生效

方法3：覆盖QDockWidget的样式 #

如果必须使用全局QWidget样式表，可以给QDockWidget单独设置边框样式，覆盖继承的效果：

dockWidget->setStyleSheet("QDockWidget { border: 1px solid gray; }");

注意：需要手动匹配Qt默认的边框样式，灵活性较低。

问题原因 #

当使用QWidget { ... }这种全局样式选择器时，样式会被所有继承自QWidget的控件（包括QDockWidget内部的子控件）继承，导致QDockWidget的边框被异常渲染变宽。使用精确选择器或调色板可以避免这种不必要的样式继承。

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