https://my.oschina.net/u/221120/blog/634053?p=1
ui->QTableView->verticalScrollBar()->setStyleSheet("QScrollBar:vertical{" //垂直滑块整体 "background:#FFFFFF;" //背景色 "padding-top:20px;" //上预留位置（放置向上箭头） "padding-bottom:20px;" //下预留位置（放置向下箭头） "padding-left:3px;" //左预留位置（美观） "padding-right:3px;" //右预留位置（美观） "border-left:1px solid #d7d7d7;}"//左分割线 "QScrollBar::handle:vertical{"//滑块样式 "background:#dbdbdb;" //滑块颜色 "border-radius:6px;" //边角圆润 "min-height:80px;}" //滑块最小高度 "QScrollBar::handle:vertical:hover{"//鼠标触及滑块样式 "background:#d0d0d0;}" //滑块颜色 "QScrollBar::add-line:vertical{"//向下箭头样式 "background:url(:/images/down.png) center no-repeat;}" "QScrollBar::sub-line:vertical{"//向上箭头样式 "background:url(:/images/up.png) center no-repeat;}"); ui->QTableView->horizontalScrollBar()->setStyleSheet("QScrollBar:horizontal{" "background:#FFFFFF;" "padding-top:3px;" "padding-bottom:3px;" "padding-left:20px;" "padding-right:20px;}" "QScrollBar::handle:horizontal{" "background:#dbdbdb;" "border-radius:6px;" "min-80px;}" "QScrollBar::handle:horizontal:hover{" "background:#d0d0d0;}" "QScrollBar::add-line:horizontal{" "background:url(:/images/right.png) center no-repeat;}" "QScrollBar::sub-line:horizontal{" "background:url(:/images/left.png) center no-repeat;}");
新建scrollBar.qss文件
// 设置垂直滚动条基本样式 QScrollBar:vertical { 8px; background:rgba(0,0,0,0%); margin:0px,0px,0px,0px; padding-top:9px; // 留出9px给上面和下面的箭头 padding-bottom:9px; } QScrollBar::handle:vertical { 8px; background:rgba(0,0,0,25%); border-radius:4px; // 滚动条两端变成椭圆 min-height:20; } QScrollBar::handle:vertical:hover { 8px; background:rgba(0,0,0,50%); // 鼠标放到滚动条上的时候，颜色变深 border-radius:4px; min-height:20; } QScrollBar::add-line:vertical // 这个应该是设置下箭头的，3.png就是箭头 { height:9px;8px; border-image:url(:/images/a/3.png); subcontrol-position:bottom; } QScrollBar::sub-line:vertical // 设置上箭头 { height:9px;8px; border-image:url(:/images/a/1.png); subcontrol-position:top; } QScrollBar::add-line:vertical:hover // 当鼠标放到下箭头上的时候 { height:9px;8px; border-image:url(:/images/a/4.png); subcontrol-position:bottom; } QScrollBar::sub-line:vertical:hover // 当鼠标放到下箭头上的时候 { height:9px;8px; border-image:url(:/images/a/2.png); subcontrol-position:top; } QScrollBar::add-page:vertical,QScrollBar::sub-page:vertical // 当滚动条滚动的时候，上面的部分和下面的部分 { background:rgba(0,0,0,10%); border-radius:4px; }
在程序中读取文件，调用文件中的设置，代码如下：
QFile file(":/scrollbar.qss"); file.open(QFile::ReadOnly); listWidget->verticalScrollBar()->setStyleSheet(file.readAll());
直接在程序中设置，适用于不复杂的格式，本次试验就是直接写入程序中，代码示例如下：
textEdit->verticalScrollBar()->setStyleSheet( "QScrollBar{ background: #F0F0F0; 30px ;margin-top:16px;margin-bottom:16px }" "QScrollBar::handle:vertical{ background: #EAEAED; min-height: 80px ;30px }" "QScrollBar::sub-line:vertical{height:16px;subcontrol-position:top;subcontrol-origin:margin;}" "QScrollBar::add-line:vertical{height:16px;subcontrol-position:bottom;subcontrol-origin:margin;}" );
这样就能把设置滚动条的宽度、滑块大小及上下边缘箭头。需要其他设计可参考上述文件中设计的详细格式。
特别注意：
在设置滑块属性时，一定要先设置QScrollBar 和 QScrollBar::handle:vertical 的背景颜色或图片，不然设置其他属性不生效，亲测可用。
本文针对垂直滚动条进行示例说明，水平滚动条也类似。只需要把vertical 换成 horizontal 即可。