QSS自定义滚动条

本文主要讲述如何通过qss自定义滚动条QScrollBar,我们先以实现一个扁平化的滚动条为例,效果如下图所示。

扁平化滚动条实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
QScrollBar:vertical {
width: 8px;
background: #f0f0f0;
}
QScrollBar:horizontal {
height: 8px;
background: #f0f0f0;
}
QScrollBar::handle:vertical {
background: #cdcdcd;
min-height: 30px;
}
QScrollBar::handle:horizontal {
background: #cdcdcd;
min-width: 30px;
}
QScrollBar::handle:vertical:hover,
QScrollBar::handle:horizontal:hover {
background: #a6a6a6;
}
QScrollBar::sub-line:vertical, QScrollBar::add-line:vertical,
QScrollBar::sub-line:horizontal, QScrollBar::add-line:horizontal {
width: 0;
height: 0;
}
/*make sure the background is solid style.*/
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical,
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
background: none;
}

windows中,如果不设置add-page,sub-page:background: none;,则背景将会变为网格样式。mac系统下无此特性。

自定义背景图片

通过上面的例子,我们可以用设置背景色的方式,来实现扁平化风格的滚动条,如果我们想有更绚丽的效果,可以通过修改背景图片,来自定义滚动条。我们以纵向为例,参考代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
QScrollBar:vertical {
background: white;
width: 8px;
}
QScrollBar::handle:vertical {
min-height: 40px;
border-width: 0px 4px 0px 4px;
border-image: url(:/images/scrollbar.png) 0 4 0 4 repeat repeat;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
width: 8px;
border-width: 0px 4px 0px 4px;
border-image: url(:/images/scrollbar_bg.png) 0 4 0 4 repeat repeat;
}

默认隐藏滚动条

现代风格的软件中,很多情况下滚动条默认是隐藏的,当鼠标进入相关区域后,显示当前区域的滚动条,这样做节省了空间,提高了整体观感。如微信的PC版本,Github客户端等均为此风格。实现方式也很简单,就是在鼠标进入和离开目标区域时,分别显示和隐藏滚动条即可,参考代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
ui->listWidget->installEventFilter(this);
ui->listWidget->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
bool Widget::eventFilter(QObject *obj, QEvent *e)
{
if(obj == ui->listWidget)
{
if(e->type() == QEvent::Enter)
{
obj->setProperty("verticalScrollBarPolicy", "ScrollBarAsNeeded");
}
else if(e->type() == QEvent::Leave)
{
obj->setProperty("verticalScrollBarPolicy", "ScrollBarAlwaysOff");
}
}
return QWidget::eventFilter(obj, e);
}

使用QObject::setProperty方法是为了适配多个窗体的情况,代码可复用,只需条件中添加obj == ui->listWidget2即可。

参考