Qt 滚动条 其各部分设置不同颜色

以下是一个直接创建独立滚动条并为其各部分设置不同颜色的完整示例。此代码将直接显示一个垂直滚动条，各组件颜色区分明显：

#include <QApplication>
#include <QScrollBar>
#include <QWidget>
#include <QVBoxLayout>

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    // 创建主窗口
    QWidget window;
    QVBoxLayout *layout = new QVBoxLayout(&window);

    // 创建独立滚动条（不嵌入其他控件）
    QScrollBar *scrollBar = new QScrollBar(Qt::Vertical);
    scrollBar->setFixedSize(25, 200);  // 设置固定尺寸方便观察

    // 设置详细样式表
    scrollBar->setStyleSheet(
        "QScrollBar:vertical {"
        "    background: #E0E0E0;  /* 轨道背景色（浅灰） */"
        "    width: 20px;"
        "    margin: 0px;"
        "}"

        "QScrollBar::handle:vertical {"
        "    background: #2196F3;  /* 滑块颜色（蓝色） */"
        "    min-height: 30px;"
        "    border-radius: 10px;"
        "    border: 2px solid #FFFFFF;"  /* 添加白色边框增强区分 */
        "}"

        "QScrollBar::sub-line:vertical {"
        "    background: #4CAF50;  /* 向上箭头背景（绿色） */"
        "    height: 20px;"
        "    subcontrol-position: top;"
        "    subcontrol-origin: margin;"
        "    border-top-left-radius: 8px;"
        "    border-top-right-radius: 8px;"
        "}"

        "QScrollBar::add-line:vertical {"
        "    background: #FF5722;  /* 向下箭头背景（橙色） */"
        "    height: 20px;"
        "    subcontrol-position: bottom;"
        "    subcontrol-origin: margin;"
        "    border-bottom-left-radius: 8px;"
        "    border-bottom-right-radius: 8px;"
        "}"

        "QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {"
        "    background: #FFF59D;  /* 空白区域颜色（浅黄） */"
        "}"

        /* 悬停效果 */
        "QScrollBar::handle:vertical:hover {"
        "    background: #1976D2;"
        "}"

        /* 按下效果 */
        "QScrollBar::handle:vertical:pressed {"
        "    background: #0D47A1;"
        "}"

        /* 箭头悬停效果 */
        "QScrollBar::sub-line:vertical:hover, QScrollBar::add-line:vertical:hover {"
        "    background: #388E3C;"  /* 深绿色悬停 */
        "}"
        );

    layout->addWidget(scrollBar);
    window.resize(100, 300);
    window.show();
    return app.exec();
}

运行效果 

关键特性说明：

1. 独立滚动条：直接创建QScrollBar对象，不嵌入其他控件
2. 颜色分区：
   • 轨道（轨道）：浅灰色（#E0E0E0）
   • 滑块（Handle）：蓝色（#2196F3）带白色边框
   • 向上箭头：绿色（#4CAF50）
   • 向下箭头：橙色（#FF5722）
   • 空白区域：浅黄色（#FFF59D）
3. 视觉增强：
   • 所有圆角元素（滑块、箭头）均添加圆角效果
   • 滑块添加白色边框增强与轨道的区分
   • 包含悬停/按下状态的交互反馈
4. 尺寸控制：
   • 固定宽度20px，高度200px
   • 滑块最小高度30px保证可操作区域

运行效果：

1. 显示一个独立的垂直滚动条
2. 各组件颜色对比明显，易于观察结构
3. 拖动滑块或点击箭头时可见颜色变化
4. 空白区域点击时滚动内容（本例中无内容，但功能正常）

自定义建议：

1. 修改颜色值：直接替换样式表中的十六进制颜色代码
2. 调整尺寸：修改width和height参数
3. 改变形状：调整border-radius值（0为直角，最大值=高度/2为全圆）
4. 添加边框：在对应控件样式中添加border: 1px solid #颜色值;

此示例通过直接操作QScrollBar对象，避免了其他控件的样式干扰，可以更清晰地观察滚动条各组件的样式效果。