QDockWidget标签样式表设置：如何修改底部标签颜色以匹配设计

云原生阿岚

2026-9-26

如何修改QDockWidget底部标签的样式

你需要的样式表前缀根据场景对应如下：

多个QDockWidget合并停靠时的底部标签（即你截图的场景），选择器为 QTabBar::tab，如果要限定仅作用于停靠区域的标签，可写为 QMainWindow::dockWidgetArea QTabBar::tab
单个QDockWidget独立停靠时的顶部标题栏，选择器为 QDockWidget::title

设计器内修改步骤

打开Qt Designer界面编辑器，选中承载QDockWidget的QMainWindow控件
右键点击选择「改变样式表」，在弹出的样式表编辑窗口中写入自定义样式即可
界面会实时预览效果，无需运行代码调试

样式表示例

/* 停靠区标签未选中状态 */
QMainWindow::dockWidgetArea QTabBar::tab {
    background-color: #e0e0e0;
    color: #333333;
    padding: 6px 12px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    margin-right: 2px;
}

/* 停靠区标签选中状态 */
QMainWindow::dockWidgetArea QTabBar::tab:selected {
    background-color: #2d7ff9;
    color: #ffffff;
}

/* 停靠区标签hover状态 */
QMainWindow::dockWidgetArea QTabBar::tab:hover {
    background-color: #c4d8f9;
}

/* 单个独立停靠dock的标题栏样式 */
QDockWidget::title {
    background-color: #2d7ff9;
    color: #ffffff;
    padding-left: 5px;
}