QScrollBar设置滚动滑块覆盖在内容上-QT开发中文网

要使 QScrollBar 的滑块覆盖在内容上，您可以使用绝对布局或者调整样式，使滚动条的滑块和内容重叠。下面是一个简单示例，展示了如何设置 QScrollBar 滑块覆盖在内容上的方法。

示例代码

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

class CustomScrollArea : public QScrollArea {
public:
    CustomScrollArea(QWidget *parent = nullptr) : QScrollArea(parent) {
        setStyleSheet("background: transparent;"); // 设置背景为透明
    }

protected:
    void resizeEvent(QResizeEvent *event) override {
        QScrollArea::resizeEvent(event);
        // 重新定位滚动条的几何位置，使其浮动在内容之上
        verticalScrollBar()->setGeometry(width() - verticalScrollBar()->width(), 
                                          0, 
                                          verticalScrollBar()->width(), 
                                          height());
    }
};

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

    QWidget window;
    QVBoxLayout *layout = new QVBoxLayout(&window);

    // 创建内容区域
    QWidget *contentWidget = new QWidget();
    QVBoxLayout *contentLayout = new QVBoxLayout(contentWidget);
    
    for (int i = 0; i < 20; ++i) {
        contentLayout->addWidget(new QLabel(QString("Line %1").arg(i + 1)));
    }
    
    contentWidget->setMinimumWidth(200); // 设置最小宽度以便于查看效果

    CustomScrollArea *scrollArea = new CustomScrollArea();
    scrollArea->setWidget(contentWidget);
    
    // 设置固定大小
    scrollArea->setFixedSize(300, 200); 

    layout->addWidget(scrollArea);

    // 设置自定义滚动条的样式表
    scrollArea->verticalScrollBar()->setStyleSheet(
        "QScrollBar:vertical {"
        "   background: rgba(255, 255, 255, 150);" // 半透明背景
        "   width: 10px;"
        "}"
        "QScrollBar::handle:vertical {"
        "   background: rgba(100, 100, 100, 180);"
        "   border-radius: 5px;"
        "}"
        );

    window.setWindowTitle("Overlay Scroll Bar Example");
    window.show();

    return app.exec();
}

实现说明

自定义滚动区：通过继承 QScrollArea，我们创建了一个名为 CustomScrollArea 的类。在这个类中，我们重写了 resizeEvent() 方法，以便在调整窗口大小时重新定位垂直滚动条的位置，从而实现它与内容重叠。
样式表：通过调用 setStyleSheet() 方法，可以自定义滚动条及其滑块的外观。在这个例子中，我们将滑块的背景设定为半透明，并且指定了宽度和圆角。
内容区域：我们创建了一个包含多个标签的内容区域，并将其放入滚动区，这样当标签数量超过显示范围时，便会出现滚动条。
视觉效果：设置透明背景和半透明滑块，增强了 UI 效果，使得用户可以更清晰地看到被覆盖的内容。