这几天写一个类似于悬浮窗的小程序,可是qt自带的滚动条实在难看,经过多番查找终于找到一个类似于qq聊天窗口的滚动条,废话不说上代码。希望能帮到大家

1.写入到文件中,新建个xx.qss,然后复制一下内容:

// 设置垂直滚动条基本样式
QScrollBar:vertical
{
width:8px;
background:rgba(0,0,0,0%);
margin:0px,0px,0px,0px;
padding-top:9px; // 留出9px给上面和下面的箭头
padding-bottom:9px;
}
QScrollBar::handle:vertical
{
width:8px;
background:rgba(0,0,0,25%);
border-radius:4px; // 滚动条两端变成椭圆
min-height:20;
}
QScrollBar::handle:vertical:hover
{
width:8px;
background:rgba(0,0,0,50%); // 鼠标放到滚动条上的时候,颜色变深
border-radius:4px;
min-height:20;
}
QScrollBar::add-line:vertical // 这个应该是设置下箭头的,3.png就是箭头
{
height:9px;width:8px;
border-image:url(:/images/a/3.png);
subcontrol-position:bottom;
}
QScrollBar::sub-line:vertical // 设置上箭头
{
height:9px;width:8px;
border-image:url(:/images/a/1.png);
subcontrol-position:top;
}
QScrollBar::add-line:vertical:hover // 当鼠标放到下箭头上的时候
{
height:9px;width:8px;
border-image:url(:/images/a/4.png);
subcontrol-position:bottom;
}
QScrollBar::sub-line:vertical:hover // 当鼠标放到下箭头上的时候
{
height:9px;width: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());

2.直接在程序中设置,简单

listWidget->verticalScrollBar()->setStyleSheet("QScrollBar:vertical"
"{"
"width:8px;"
"background:rgba(0,0,0,0%);"
"margin:0px,0px,0px,0px;"
"padding-top:9px;"
"padding-bottom:9px;"
"}"
"QScrollBar::handle:vertical"
"{"
"width:8px;"
"background:rgba(0,0,0,25%);"
" border-radius:4px;"
"min-height:20;"
"}"
"QScrollBar::handle:vertical:hover"
"{"
"width:8px;"
"background:rgba(0,0,0,50%);"
" border-radius:4px;"
"min-height:20;"
"}"
"QScrollBar::add-line:vertical"
"{"
"height:9px;width:8px;"
"border-image:url(:/images/a/3.png);"
"subcontrol-position:bottom;"
"}"
"QScrollBar::sub-line:vertical"
"{"
"height:9px;width:8px;"
"border-image:url(:/images/a/1.png);"
"subcontrol-position:top;"
"}"
"QScrollBar::add-line:vertical:hover"
"{"
"height:9px;width:8px;"
"border-image:url(:/images/a/4.png);"
"subcontrol-position:bottom;"
"}"
"QScrollBar::sub-line:vertical:hover"
"{"
"height:9px;width: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;"
"}"
);
04-30 02:05