qt设置qlistview上的滚动条样式-QT开发中文网

在Qt中，可以通过使用样式表（Style Sheets）来设置 QListView 上的滚动条样式。以下是如何自定义 QListView 的滚动条样式的示例代码。

示例代码

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

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

    QWidget window;
    QVBoxLayout layout(&window);

    // 创建 QListView
    QListView *listView = new QListView();
    listView->setFixedSize(200, 300); // 设置大小
    
    // 创建模型并填充数据
    QStringList items;
    for (int i = 1; i <= 50; ++i) {
        items << QString("Item %1").arg(i);
    }
    
    QStringListModel *model = new QStringListModel(items);
    listView->setModel(model);

    // 自定义样式表以设置滚动条样式
    listView->setStyleSheet(
        "QListView {"
        "   border: none;"
        "}"
        "QScrollBar:vertical {"
        "   background: #f0f0f0;"       // 滚动条背景色
        "   width: 10px;"               // 宽度
        "   margin: 22px 0 22px 0;"     // 上下边距，避免与列表项贴合
        "}"
        "QScrollBar::handle:vertical {"
        "   background: #a0a0a0;"       // 滑块背景色
        "   min-height: 30px;"          // 滑块最小高度
        "   border-radius: 5px;"       // 圆角效果
        "}"
        "QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical {"
        "   background: none;"          // 隐藏上下箭头按钮背景 
        "}"
        "QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {"
        "   background: none;           // 隐藏箭头图标 
        "} "
         );

    layout.addWidget(listView);
    
    window.setLayout(&layout);
    window.resize(250, 350);
    window.show();

    return app.exec();
}

样式表说明

基本设置：
- border: 设置 QListView 的边框为无。
滚动条垂直样式 (QScrollBar:vertical)：
- background: 设置滚动条的背景颜色。
- width: 设置滚动条的宽度。
- margin: 设置上下的间距，以确保不紧贴列表项。
滑块样式 (QScrollBar::handle:vertical)：
- background: 定义滑块（Handle）的颜色。
- min-height: 确保滑块有一个可视化的最小高度。
- border-radius: 为滑块添加圆角效果，使其看起来更加美观。
隐藏箭头按钮：
- 使用 add-line 和 sub-line 来隐藏默认的上下按钮背景。
箭头图标：
- 同时可以通过设置上下箭头的背景为无来去掉它们。