Qt工作笔记-QSS中关于QScrollBar的设置

如下面的这个QSS代码：

QScrollBar:vertical{
width:16px;
border:1px solid rgb(255,0,0);
margin:0px,0px,0px,0px;
padding-top:16px;
padding-bottom:16px;
}

程序运行截图如下：

提示：rgb(255,0,0)为红色，padding-top与padding-bottom；还有width:16，是为了后面放向上和向下图标

注意：这个vertical属性包含了上面那个和下面的那个箭头（估计是被覆盖了），现在设置下ScrollBar的背景来测试下：

源码如下：

QScrollBar:vertical{
width:16px;
border:1px solid rgb(255,0,0);
margin:0px,0px,0px,0px;
padding-top:16px;
padding-bottom:16px;
background-color: rgb(0, 255, 0);
}

运行截图如下：

下面来看修改握把的源码：

扫描二维码关注公众号，回复： 2893921 查看本文章

QScrollBar::handle:vertical{
width:16px;
background-color: rgb(85, 0, 255);
min-height:30px;
border-radius:8px;
}

程序运行截图如下：

注意：

1.设置握把的源码要和最上面的那个源码一起出现，单独出现会失效。

2.rgb(85,0,255)为紫色。

下面这个是鼠标停留在握把的代码：

QScrollBar::handle:vertical:hover{
background:rgb(205,205,205);
border:1px rgb(22,75,124);
border-radius:8px;
}

现象就是那样，没什么好看的，就是鼠标停过去会变色。

下面来看一组源码：

QScrollBar::sub-line:vertical{
height:16px;
background:rgb(205,205,205);
border-image:url(:/img/arrows_up.png);
subcontrol-position:top;
}
QScrollBar::sub-line:vertical:hover{
height:16px;
background:rgb(0,0,0);
subcontrol-position:top;
}
QScrollBar::add-line:vertical{
height:16px;
background:rgb(205,205,205);
border-image:url(:/img/arrows_down.png);
subcontrol-position:bottom;
}
QScrollBar::add-line:vertical:hover{
height:16px;
background:rgb(0,0,0);
subcontrol-position:bottom;
}

这里要注意一点：当有ScrollBar出现的时候，一般都是往下翻，新的东西都在下面。

所有sub-line放up的图片，

add-line放down的图片。

运行截图如下：

这些属性只能满足基本要求，更多复杂的功能还有查！

如：

QScrollBar::sub-page:horizontal {
background: red;
}
QScrollBar::add-page:horizontal {
background: green;
}

不过感觉这些好像用得并不多！

水平的就把vertical换horizontal

Qt工作笔记-QSS中关于QScrollBar的设置

猜你喜欢