Qt的QDockWidget 样式设置详细指南（涵盖标题栏、边框、浮动状态等）

以下是关于 QDockWidget 样式设置的详细指南，涵盖标题栏、边框、浮动状态等常见定制需求：

1. 核心样式属性

QDockWidget 的样式可通过以下选择器和子控件控制：

• QDockWidget：主容器样式
• QDockWidget::title：标题栏区域
• QDockWidget::close-button 和 QDockWidget::float-button：关闭/浮动按钮
• QDockWidget:floating：悬浮状态时的样式

2. 常用样式代码示例

(1) 标题栏样式

/* 标题栏背景、文字、边距 */
QDockWidget::title {
    background: #2c3e50;          /* 背景颜色 */
    color: white;                /* 文字颜色 */
    padding: 4px 10px;           /* 内边距 */
    border: 1px solid #34495e;   /* 边框 */
    border-radius: 3px;          /* 圆角 */
}

/* 鼠标悬停标题栏时的效果 */
QDockWidget::title:hover {
    background: #34495e;
}

/* 关闭按钮样式 */
QDockWidget::close-button {
    subcontrol-origin: margin;   /* 定位基准 */
    subcontrol-position: right;  /* 位置 */
    padding: 2px;                /* 内边距 */
    image: url(close_icon.png);  /* 自定义图标 */
}

/* 浮动按钮样式 */
QDockWidget::float-button {
    subcontrol-position: right bottom;
    image: url(float_icon.png);
}

(2) 主容器和内容区域

/* QDockWidget整体边框和背景 */
QDockWidget {
    border: 2px solid #7f8c8d;    /* 边框 */
    titlebar-close-icon: none;    /* 隐藏默认关闭图标 */
    titlebar-normal-icon: none;   /* 隐藏默认恢复图标 */
}

/* 内容区域背景色 */
QDockWidget > QWidget {
    background: #ecf0f1;
}

(3) 浮动状态样式

/* 悬浮时的边框阴影 */
QDockWidget:floating {
    border: 2px solid #e74c3c;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.2); /* 阴影效果 */
}

3. 高级定制技巧

(1) 标题栏渐变和图标对齐

QDockWidget::title {
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
        stop:0 #3498db, stop:1 #2980b9);  /* 渐变背景 */
    text-align: left;                     /* 文字左对齐 */
    padding-left: 20px;                   /* 左侧留空 */
}

(2) 动态状态控制

/* 折叠时的标题栏样式 */
QDockWidget:closed {
    background: #95a5a6;
}

/* 禁用状态 */
QDockWidget:disabled {
    border-color: #bdc3c7;
}

(3) 分隔条样式（Dock之间的拖拽分隔线）

/* 水平分隔条 */
QDockWidget::separator:horizontal {
    width: 4px;                         /* 宽度 */
    background: #bdc3c7;                /* 默认颜色 */
    border-left: 1px solid #7f8c8d;     /* 左侧线 */
    border-right: 1px solid #7f8c8d;    /* 右侧线 */
}

/* 垂直分隔条 */
QDockWidget::separator:vertical {
    height: 4px;
    background: #bdc3c7;
}

4. 完整示例

// 在代码中设置全局样式
qApp->setStyleSheet(R"(
    QDockWidget {
        border: 2px solid #7f8c8d;
        font: 12px "Arial";
    }
    QDockWidget::title {
        background: #2c3e50;
        color: white;
        padding: 6px;
        border: none;
    }
    QDockWidget::close-button {
        subcontrol-position: right top;
        right: 5px;
        top: 5px;
        width: 16px;
        height: 16px;
        image: url(:/icons/close_white.png);
    }
    QDockWidget:floating {
        border: 2px solid #e74c3c;
    }
)");

5. 注意事项

1. 子控件定位：使用 subcontrol-position 和 subcontrol-origin 精确控制按钮位置。
2. 图标资源：建议将图标文件（如 PNG）添加到 Qt 资源系统（.qrc）。
3. 平台兼容性：部分样式（如阴影 box-shadow）可能在不同操作系统或 Qt 版本中表现不同，需实际测试。
4. 动态效果：可通过伪状态（:hover, :pressed）增强交互感。