小项目实验：qt 做一个这样的滚动条，轨道，滑块，空白区域，箭头按钮，分别用不同的颜色，举一个完整的例子

原创于 2025-06-25 19:10:01 发布 · 504 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#qt #开发语言

qt -ui 专栏收录该内容

284 篇文章

订阅专栏

1.概要

1.没有效果

// 设置滚动条样式表（增强版）
    scrollArea->verticalScrollBar()->setStyleSheet(

2.有效果

// 设置滚动条样式表（增强版）
    app.setStyleSheet(

2.内容

以下是一个完整的 Qt 示例，展示如何为滚动条的轨道、滑块、空白区域和箭头按钮设置不同颜色：

#include <QApplication>
#include <QScrollArea>
#include <QTextEdit>
#include <QVBoxLayout>
#include <QScrollBar>
#include <QStyleFactory>

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

    // 强制使用 Fusion 样式（确保样式表生效）
    app.setStyle(QStyleFactory::create("Fusion"));

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

    // 创建带滚动条的文本区域
    QScrollArea *scrollArea = new QScrollArea;
    QTextEdit *textEdit = new QTextEdit;

    // 填充长文本以触发滚动条
    QString longText;
    for(int i = 0; i < 100; ++i) {
        longText += QString("这是示例文本行 %1\n").arg(i+1);
    }
    textEdit->setPlainText(longText);

    scrollArea->setWidget(textEdit);
    scrollArea->setWidgetResizable(true);

    // 设置滚动条样式表（增强版）
    //scrollArea->verticalScrollBar()->setStyleSheet(
    app.setStyleSheet(
        "/* 强制覆盖原生样式 */"
        "QScrollBar:vertical {"
        "    background: #E0E0E0;"
        "    width: 15px;"
        "    margin: 0px;"
        "}"

        "QScrollBar::handle:vertical {"
        "    background: #2196F3;"
        "    min-height: 30px;"
        "    border-radius: 6px;"
        "}"

        "QScrollBar::sub-line:vertical {"
        "    background: #4CAF50;"
        "    height: 20px;"
        "    subcontrol-position: top;"
        "    subcontrol-origin: margin;"
        "    border-top-left-radius: 6px;"
        "    border-top-right-radius: 6px;"
        "}"

        "QScrollBar::add-line:vertical {"
        "    background: #FF5722;"
        "    height: 20px;"
        "    subcontrol-position: bottom;"
        "    subcontrol-origin: margin;"
        "    border-bottom-left-radius: 6px;"
        "    border-bottom-right-radius: 6px;"
        "}"

        "QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {"
        "    background: #F5F5F5;"
        "}"

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

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

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

运行结果

// 设置滚动条样式表（增强版）
    app.setStyleSheet(

// 设置滚动条样式表（增强版）
    scrollArea->verticalScrollBar()->setStyleSheet(

效果说明：

轨道（Groove）：浅灰色（#E0E0E0），宽度 15px
滑块（Handle）：蓝色（#2196F3），带圆角，最小高度 30px
向上箭头：绿色（#4CAF50），位于顶部
向下箭头：橙色（#FF5722），位于底部
空白区域：浅灰色（#F5F5F5），点击时按页步滚动
交互反馈：滑块悬停变深蓝（#1976D2），按下变更深的蓝色（#0D47A1）

运行效果：

滚动条会显示在文本区域右侧
拖动滑块或点击箭头可滚动内容
不同区域的颜色区分明显，便于观察结构
悬停和按下时有视觉反馈

自定义方法：

修改颜色值：直接替换样式表中的颜色代码
调整尺寸：修改 width 和 height 值
修改形状：调整 border-radius 改变圆角程度
添加边框：在对应控件样式中添加 border: 1px solid #颜色值;

这个示例展示了如何通过 Qt 样式表完全自定义滚动条的外观，同时保持其基本交互功能。

3.关联链接

4.关联知识

1.qt 的滚动条

在 Qt 中，滚动条（QScrollBar）是用于控制视图内容滚动的核心组件，通常与 QAbstractScrollArea 派生类（如 QTextEdit、QListView）结合使用。以下是关于滚动条的详细说明和常见操作：

1. 基本使用

创建滚动条

// 垂直滚动条
QScrollBar *verticalScrollBar = new QScrollBar(Qt::Vertical, this);
// 水平滚动条
QScrollBar *horizontalScrollBar = new QScrollBar(Qt::Horizontal, this);

关联到视图

// 例如，为 QTextEdit 设置滚动条
QTextEdit *textEdit = new QTextEdit(this);
textEdit->setVerticalScrollBar(verticalScrollBar);
textEdit->setHorizontalScrollBar(horizontalScrollBar);

2. 核心属性设置

// 设置范围（最小值、最大值）
scrollBar->setRange(0, 100);


// 设置单步（点击箭头时的步长）
scrollBar->setSingleStep(1);


// 设置页步（点击轨道空白区域的步长）
scrollBar->setPageStep(10);


// 获取当前值
int currentValue = scrollBar->value();


// 设置当前值
scrollBar->setValue(50);

3. 样式自定义（QSS）

通过 Qt 样式表（QSS）修改滚动条外观：

// 示例样式
scrollBar->setStyleSheet(
    "QScrollBar:vertical {"
    "    background: #F0F0F0;"
    "    width: 12px;"
    "    margin: 0px 0px 0px 0px;"
    "}"
    "QScrollBar::handle:vertical {"
    "    background: #C0C0C0;"
    "    min-height: 20px;"
    "}"
    "QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {"
    "    height: 0px;"
    "    subcontrol-position: bottom;"
    "}"
);

4. 信号与槽

响应滚动条事件：

// 连接信号
connect(scrollBar, &QScrollBar::valueChanged, this, [=](int value) {
    qDebug() << "当前值：" << value;
});


// 其他常用信号
connect(scrollBar, &QScrollBar::rangeChanged, this, &MyClass::handleRangeChange);
connect(scrollBar, &QScrollBar::sliderPressed, this, &MyClass::handleSliderPressed);

5. 自定义滚动条行为

子类化 QScrollBar 以实现高级功能：

class CustomScrollBar : public QScrollBar {
protected:
    void paintEvent(QPaintEvent *event) override {
        // 自定义绘制逻辑
        QPainter painter(this);
        painter.setBrush(Qt::blue);
        painter.drawRect(rect());
    }
};

6. 常见问题解决

滚动条不显示？

检查内容区域是否超出可视区域。

确保滚动条策略正确：

scrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAsNeeded);
scrollArea->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);

同步多个滚动条

// 连接两个滚动条的 valueChanged 信号
connect(scrollBar1, &QScrollBar::valueChanged, scrollBar2, &QScrollBar::setValue);
connect(scrollBar2, &QScrollBar::valueChanged, scrollBar1, &QScrollBar::setValue);

7. Qt Quick 中的滚动条

在 QML 中使用 ScrollBar 组件：

ScrollBar {
    id: scrollBar
    orientation: Qt.Vertical
    policy: ScrollBar.AlwaysOn
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.bottom: parent.bottom
}

通过以上方法，您可以灵活控制 Qt 中的滚动条行为和外观。如果需要更复杂的交互（如平滑滚动、动画效果），可以结合 QPropertyAnimation 或自定义事件处理实现。