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

要使 QListView 的滚动滑块覆盖在内容上，您可以通过自定义样式表和布局来实现。以下是一个简单的示例，展示如何将滚动条的滑块放置在 QListView 的内容上方。

示例代码

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

class CustomListView : public QListView {
public:
    CustomListView(QWidget *parent = nullptr) : QListView(parent) {
        setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
        setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
        
        // 设置样式表，使得背景透明
        setStyleSheet("background: transparent;");
    }

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

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

    QWidget window;
    QVBoxLayout layout(&window);

    QStringList items;
    for (int i = 1; i <= 100; ++i) {
        items << QString("Item %1").arg(i);
    }

    QStringListModel *model = new QStringListModel(items);

    CustomListView *listView = new CustomListView();
    listView->setModel(model);
    
    // 设置固定大小以便于查看效果
    listView->setFixedSize(300, 200);

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

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

    return app.exec();
}

实现说明

自定义列表视图：我们创建了一个名为 CustomListView 的类，它继承自 QListView。重写了 resizeEvent() 方法，以便在调整窗口大小时重新定位垂直滚动条的位置，从而实现它与内容重叠。
样式表：通过调用 setStyleSheet() 方法，可以自定义 QListView 和滚动条的外观。在这个示例中，我们设置了滑块的背景为半透明，同时确保了滚动条宽度和形状。
模型数据：使用 QStringListModel 来填充列表视图，这个模型包含多个项目供用户查看。
视觉效果：设置透明背景和半透明滑块，增强了 UI 效果，使得用户可以更清晰地看到被覆盖的内容。